All,
I'm trying to create a DIV which will appear when an onmouseover event is fired and will have a background Image displayed with some text on it. I'm getting some really weird behaviour and not sure how to solve it...
I've simplified the example below ... when it is loaded you will see that onmouseover, the div appears as it should with the image. Taking away the mouse makes it dissappear, as it should. Moving the mouse over again and the DIV appears but with no image?? what is going on?
any help,
Stuart
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape"
&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
function div_background() {
display.style.visibility = 'visible';
display.innerHTML = ('<h1>Hello</h1>');
display.style.backgroundImage = 'url(images/divbackground.gif)';
}
function hide() {
display.style.visibility ='hidden';
}
// -->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" >
<div id="display" onmouseover="div_background()" onmouseout="hide()" style="position:absolute; width:325px; height:203px; z-index:1; left: 296px; top: 221px"></div>
</body>
</html>
I'm trying to create a DIV which will appear when an onmouseover event is fired and will have a background Image displayed with some text on it. I'm getting some really weird behaviour and not sure how to solve it...
I've simplified the example below ... when it is loaded you will see that onmouseover, the div appears as it should with the image. Taking away the mouse makes it dissappear, as it should. Moving the mouse over again and the DIV appears but with no image?? what is going on?
any help,
Stuart
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape"
&&(parseInt(appVersion)==4)) {document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
function div_background() {
display.style.visibility = 'visible';
display.innerHTML = ('<h1>Hello</h1>');
display.style.backgroundImage = 'url(images/divbackground.gif)';
}
function hide() {
display.style.visibility ='hidden';
}
// -->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" >
<div id="display" onmouseover="div_background()" onmouseout="hide()" style="position:absolute; width:325px; height:203px; z-index:1; left: 296px; top: 221px"></div>
</body>
</html>