Web Programming Training By OM SIR Call for free Demo :9320957717/18

Ajax onmouseover and onmouseout event example

use following code  to try:

<html>
<body>


<script>

function loadimg1()
{

var xhttp=new XMLHttpRequest();

xhttp.onreadystatechange=function()
{
if(xhttp.readyState==4 && xhttp.status==200)
{
document.getElementById("targetDiv").innerHTML=xhttp.responseText;
}
};

xhttp.open("GET","Sandwiches.txt/sandwiches.txt",true);
xhttp.send();
}

function loadimg2()
{
var xhttp=new XMLHttpRequest();
xhttp.onreadystatechange=function()
{
if(xhttp.readyState==4 && xhttp.status==200)
{
document.getElementById("targetDiv").innerHTML=xhttp.responseText;
}
};
xhttp.open("GET","Pizzas.txt/pizzas.txt",true);
xhttp.send();
}
function loadimg3()
{
var xhttp=new XMLHttpRequest();
xhttp.onreadystatechange=function()
{
if(xhttp.readyState==4 && xhttp.status==200)
{    document.getElementById("targetDiv").innerHTML=xhttp.responseText;
}
};
xhttp.open("GET","Soups.txt/soups.txt",true);
xhttp.send();
}
function load4()
{
var xhttp=new XMLHttpRequest();
xhttp.onreadystatechange=function()
{
if(xhttp.readyState==4 && xhttp.status==200)
{  document.getElementById("targetDiv").innerHTML=xhttp.responseText;
}
};
xhttp.open("GET","Text.txt",true);
xhttp.send();
}
</script>


<h2><b>Interactive Mouseover</b></h2>

<img src="Image1.jpg" onmouseover="loadimg1()" width="300" heigth="300" onmouseout="load4()">

<img src="Image2.jpg" onmouseover="loadimg2()" width="300" heigth="300" onmouseout="load4()">

<img src="Image3.jpg" onmouseover="loadimg3()" width="300" heigth="300" onmouseout="load4()">


<div id="targetDiv">
<p>Welcome To My Restaurant!</p>
</div>
</body>
</html>

Previous
Next Post »