<HTML>
<HEAD><TITLE>Using DIV and SPAN Tags</TITLE>
<style type="text/css">
.c1{visibility:visible; text-align:center;}
.c2{color:blue;font-family:Georgia;font-size:28}
</style>
</HEAD>
<BODY bgcolor=beige>
<SCRIPT Language="JavaScript">
function img1_onmouseover()
{
text1.style.visibility = "visible";
img1.style.visibility = "visible";
text2.style.visibility = "hidden";
img2.style.visibility = "hidden";
}
function img2_onmouseover()
{
text1.style.visibility = "hidden";
img1.style.visibility = "hidden";
text2.style.visibility = "visible";
img2.style.visibility = "visible";
}
</SCRIPT>
<DIV Class="c1" onMouseOver="img1_onmouseover();">
<SPAN ID="text1" Class="c2">
To Hide this Picture Move the Mouse Out of this Picture.
</SPAN>
<P><IMG ID="img1" Src="img1.jpg" Height="200" Width="200">
</DIV>
<DIV Class="c1" onMouseOver="img2_onmouseover();">
<SPAN ID="text2" Class="c2">
To Hide this Picture Move the Mouse Out of this Picture.
</SPAN>
<P><IMG ID="img2" Src="img2.jpg" Height="200" Width="200">
</DIV>
</BODY>
</HTML>
<HEAD><TITLE>Using DIV and SPAN Tags</TITLE>
<style type="text/css">
.c1{visibility:visible; text-align:center;}
.c2{color:blue;font-family:Georgia;font-size:28}
</style>
</HEAD>
<BODY bgcolor=beige>
<SCRIPT Language="JavaScript">
function img1_onmouseover()
{
text1.style.visibility = "visible";
img1.style.visibility = "visible";
text2.style.visibility = "hidden";
img2.style.visibility = "hidden";
}
function img2_onmouseover()
{
text1.style.visibility = "hidden";
img1.style.visibility = "hidden";
text2.style.visibility = "visible";
img2.style.visibility = "visible";
}
</SCRIPT>
<DIV Class="c1" onMouseOver="img1_onmouseover();">
<SPAN ID="text1" Class="c2">
To Hide this Picture Move the Mouse Out of this Picture.
</SPAN>
<P><IMG ID="img1" Src="img1.jpg" Height="200" Width="200">
</DIV>
<DIV Class="c1" onMouseOver="img2_onmouseover();">
<SPAN ID="text2" Class="c2">
To Hide this Picture Move the Mouse Out of this Picture.
</SPAN>
<P><IMG ID="img2" Src="img2.jpg" Height="200" Width="200">
</DIV>
</BODY>
</HTML>
No comments :
Post a Comment