Loading:


    Dynamiczne podpowiedzi po najechaniu myszką - AJAX

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



    Napisz Artyku³

    Listing

    //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   #############################################

    <pre>
    Wydawnictwo: Helion
    ISBN: 83-246-0795-1
    Format: A5
    Stron: 160
    </pre>


    //tooltip2.html   #############################################

    <pre>
    Wydawnictwo: Helion
    ISBN: 83-246-0795-1
    Format: A5
    Stron: 160
    </pre>


    //tooltip1.html   #############################################

    <pre>
    Wydawnictwo: Helion
    ISBN: 83-246-0795-1
    Format: A5
    Stron: 160
    </pre>



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




    Dodano przez: igor
    Ranga: Administrator serwisu Punktów: 0
    Komentarze użytkowników
      • Tre¶æ komentarza
        Kod do komentarza (opcjonalnie)
        PHP JavaScript MySQL Smarty SQL HTML CSS ActionScript
        Autor
        Token
        token

         

         








    funkcje.net
    Wszelkie prawa zastrzeżone©. | Funkcje.net 2008-2025 v.1.5 | design: diviXdesign & rainbowcolors