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;
}

 

Projekt © 2009 - INFOPROG 67905 odwiedzin