Dynamiczne podpowiedzi po najechaniu myszką - AJAX

Skrypt wyświetla dymki z podpowiedziami po najechaniu myszką na linki.

//index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ajax</title>
<link href="/ajaxcss.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/ajaxcore.js"></script>
<script type="text/javascript" src="/ajax.js"></script>
</head>
<body>
<div id="mainDiv" class="mainDiv">
<div><span onmouseover="showTooltip(1, this)" onmouseout="closeTooltip();"
style="font-weight:bold; cursor:pointer;">
PHP. 101 Praktycznych skryptów </span></div>
<div><span onmouseover="showTooltip(2, this)" onmouseout="closeTooltip();"
style="font-weight:bold; cursor:pointer;">
AJAX. Ćwiczenia </span></div>
<div><span onmouseover="showTooltip(3, this)" onmouseout="closeTooltip();"
style="font-weight:bold; cursor:pointer;">
JavaScript. Ćwiczenia praktyczne </span></div>
</div>
<div id="tooltipDiv" class="tooltipDiv">
</div>
</body>
</html>

//tooltip3.html

Przykładowa informacja 3

//tooltip2.html

Przykładowa informacja 2

//tooltip1.html

Przykładowa informacja 1

//ajaxcss.css

.mainDiv
{
color: #333333;
position: relative;
background-color: #EFEFEF;
border: 1px solid #000000;
margin: 10px 10px 10px 10px;
padding: 14px 14px 14px 14px;
width: 350px;
visibility: visible;
}

.dataDiv
{
color: #333333;
position: relative;
background-color: #ffffff;
border: 1px solid #000000;
margin: 10px 10px 10px 10px;
padding: 14px 14px 14px 14px;
width: 420px;
visibility: visible;
}

.myButton
{
font-family:helvetica,sans-serif;
font-size:84%;
font-weight:bold;
border:1px solid;
border-top-color:#696;
border-left-color:#696;
border-right-color:#363;
border-bottom-color:#363;
width:120px;
margin:5px;
}

.myTextInput
{
border:1px solid;
background-color: #F8F8F8;
border-top-color:#696;
border-left-color:#696;
border-right-color:#363;
border-bottom-color:#363;
width:70%;
}

//ajaxcore.js

function getXMLHttpRequestObject()
{
try{
return new XMLHttpRequest();
}
catch(e){
try{
return new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
return false;
}
}
}

function startGETRequest(url, onComplete, onEnd)
{
var XMLHttpRequestObject = getXMLHttpRequestObject();
if(XMLHttpRequestObject){
XMLHttpRequestObject.open("GET", url);
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4){
if(XMLHttpRequestObject.status == 200){
var responseXML = XMLHttpRequestObject.responseXML;
var responseText = XMLHttpRequestObject.responseText;
onComplete(responseText, responseXML);
}
delete XMLHttpRequestObject;
onEnd();
}
}
XMLHttpRequestObject.send(null);
}
}

function startPOSTRequest(url, params, onComplete, onEnd)
{
var XMLHttpRequestObject = getXMLHttpRequestObject();
if(XMLHttpRequestObject){
XMLHttpRequestObject.open("POST", url);
XMLHttpRequestObject.setRequestHeader(
'Content-Type', 'application/x-www-form-urlencoded');
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4){
if(XMLHttpRequestObject.status == 200){
var responseXML = XMLHttpRequestObject.responseXML;
var responseText = XMLHttpRequestObject.responseText;
onComplete(responseText, responseXML);
}
delete XMLHttpRequestObject;
onEnd();
}
}
XMLHttpRequestObject.send(params);
}
}

//ajax.js

onprogress = false;

function showTooltip(id, obj)
{
if(id < 1 || id > 3) return;

if(!obj) return;

if(onprogress){
XMLHttpRequestObject.abort();
}

xOff = obj.offsetWidth/1;
yOff = obj.offsetHeight/1;

while(obj.offsetParent){
xOff += obj.offsetLeft/1;
yOff += obj.offsetTop/1;
obj = obj.offsetParent;
}

var tooltipDiv = document.getElementById("tooltipDiv");
tooltipDiv.innerHTML = "Wczytuję dane...";
tooltipDiv.style.top = yOff + "px";
tooltipDiv.style.left = xOff + "px";
tooltipDiv.style.display = "block";

url = "tooltip" + id + ".html";
startGETRequest(url, onComplete, onEnd);
}

function closeTooltip()
{
var tooltipDiv = document.getElementById("tooltipDiv");
tooltipDiv.style.display = "none";
}

function onComplete(text, xml)
{
var tooltipDiv = document.getElementById("tooltipDiv");
tooltipDiv.innerHTML = text;
}

function onEnd(text, xml)
{
onprogress = false;
}

 

Popularne Artykuly

Najnowsze Artykuły