PDA

View Full Version : image popup on mouse over not working...



pritamdulam
11-18-2010, 06:52 AM
hi,
I have written the following code.. functionality is that when roll the mouse over the image ... a larger image pops..the problem the image is not popping on the previous one.....(but on one side(firefox) & below it (ie)) am I doing anything wrong plz help..


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function ShowPopup()
{
var hoverpop = "hover";
hp = document.getElementById(hoverpop);
hp.style.visibility = "Visible";
}

function HidePopup()
{
//alert(hoverpop);
hp = document.getElementById("hover");
hp.style.visibility = "Hidden";
}
</script>
</head>
<body>
<div id="imagepopup" style="border:2px solid red">
<img src="R19L340-OFM2TV-S.gif" alt="" width="85" height="148" id="<?php echo $id;?>"
style="cursor:default" onMouseOver="ShowPopup();" />

<div id="hover" style="position:absolute;visibility:hidden;" onMouseOut="HidePopup();">
<img src="R19L340-OFM2TV-S.gif" alt="" width="105" height="168" />
</div>
</div>
</body>
</html>

vwphillips
11-18-2010, 09:47 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function ShowPopup()
{
var hoverpop = "hover";
hp = document.getElementById(hoverpop);
hp.style.visibility = "visible";
}

function HidePopup()
{
//alert(hoverpop);
hp = document.getElementById("hover");
hp.style.visibility = "hidden";
}
</script>
</head>
<body>
<div id="imagepopup" style="position:relative;border:2px solid red">
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="" width="85" height="148" id="<?php echo $id;?>"
style="cursor:default" onMouseOver="ShowPopup();" />

<div id="hover" style="position:absolute;z-Index:1;visibility:hidden;left:-12px;top:-10px;" onMouseOut="HidePopup();">
<img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" alt="" width="105" height="168" />
</div>
</div>
</body>
</html>