• Beginning our journey into Ajax tutorials and Scripts we start of with an Mouse hover Tooltip application.
  • A simple mouse hover reveals some part of the html file before actually opening it.

Directory Structure:

  1. Article/ Folder —> Where the html articles are stored.
  2. Index.html
  3. Script.css
  4. Script.js

Store the html files in the article folder and rest of files are stored on the root folder.

Scripts:

The Scripts are given below:

Index.html:

</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>
	<link href="script.css" rel="stylesheet" rev="stylesheet" /><script src="script.js" type="text/javascript">
    </script></p>
<h2>Popup/Tooltip using Ajax for Mousehovers</h2>
<ul>
	<li><a href="article/word-senosring.html">Word Sensoring Application</a></li>
	<li><a href="article/file-handling.html">Writing data to a file PHP</a></li>
	<li><a href="article/easy-steps.html">GET POST REQUEST METHOD</a></li>
</ul>
<div id="previewWin">&nbsp;</div>
<p>

Script.css:

</p>
<p>&nbsp;</p>
<p>li a {</p>
<p>text-decoration: none;</p>
<p>font-weight: bold;</p>
<p>}</p>
<p>&nbsp;</p>
<p>li a:hover {</p>
<p>text-decoration: underline;</p>
<p>}</p>
<p>&nbsp;</p>
<p>h2, ul {</p>
<p>font-family: Georgia, &quot;Times New Roman&quot;, Times, serif;</p>
<p>}</p>
<p>&nbsp;</p>
<p>li {</p>
<p>list-style-type: none;</p>
<p>}</p>
<p>&nbsp;</p>
<p>#previewWin {</p>
<p>background-color: #FF9;</p>
<p>width: 150px;</p>
<p>height: 200px;</p>
<p>font: .6em arial, helvetica, sans-serif;</p>
<p>padding: 5px;</p>
<p>position: absolute;</p>
<p>visibility: hidden;</p>
<p>border: 1px #CC0 solid;</p>
<p>overflow: hidden;</p>
<p>}</p>
<p>&nbsp;</p>
<p>#previewWin h1, #previewWin h2 {</p>
<p>font-size: 1.0em;</p>
<p>}</p>
<div>&nbsp;</div>
<p>

Script.js:

[JavaScript] 

 

window.onload = initAll;

var xhr = false;

var xPos, yPos;

 

function initAll() {

var allLinks = document.getElementsByTagName("a");

 

for (var i=0; i< allLinks.length; i++) {

allLinks[i].onmouseover = showPreview;

}

}

 

function showPreview(evt) {

if (evt) {

var url = evt.target;

}

else {

evt = window.event;

var url = evt.srcElement;

}

xPos = evt.clientX;

yPos = evt.clientY;

 

if (window.XMLHttpRequest) {

xhr = new XMLHttpRequest();

}

else {

if (window.ActiveXObject) {

try {

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}

catch (e) { }

}

}

 

if (xhr) {

xhr.onreadystatechange = showContents;

xhr.open("GET", url, true);

xhr.send(null);

}

else {

alert("Sorry, but I couldn't create an XMLHttpRequest");

}

return false;

}

 

function showContents() {

if (xhr.readyState == 4) {

if (xhr.status == 200) {

var outMsg = xhr.responseText;

}

else {

var outMsg = "There was a problem with the request " + xhr.status;

}

 

var prevWin = document.getElementById("previewWin");

prevWin.innerHTML = outMsg;

prevWin.style.top = parseInt(yPos)+2 + "px";

prevWin.style.left = parseInt(xPos)+2 + "px";

prevWin.style.visibility = "visible";

prevWin.onmouseout = function() {

document.getElementById("previewWin").style.visibility = "hidden";

}

}

}

 

[/JavaScript]


Screenshots:

  • This is the index page with the articles listed

  • When we hover the mouse a tooltip or preview popsout

 

 

Download & Live Demo:

 

  • Click below to download Script and view 'Live Demo'

 

Thank u for reading this Article hope it was useful !

-Regards

Sathesh Bm


About Sathesh Bm

Sathesh Bm has written 26 post in this website.

Engineer, Web Lover, Thinker, Blogger

Related Posts Plugin for WordPress, Blogger...