how to prevent mouse-over images from appearing on page load?

nowickil · Apr 5, 2005

I just tried using this code to implement some java script to do a nice little mouse over effect. I have about 10 buttons, and as I mouse-over each button, I got it so that a different image would appear beautifully in the center of the page. I just have one problem. When the page loaded for the first time (using IE), all of the center images would appear briefly, layered one on top of the other, before the code:

onload="MM_showHideLayers('Image','','hide')

had a chance to execute for each image. I ended up with the image I wanted on the screen, but having all 10 images load and then disappear is something I want to avoid.

To resolve this, I tried writing a function that would specifically hide each image, and just show the one image I want at page load. Now, however, I'm getting no center image at all on page load. I'm a bit new to java script, so I'm hopeful that I just have a very minor error. Can you help?

To summarize, I just want to ensure that only one center image will appear at the time of the initial page load, and the images that correspond to each button will only be seen when the mouse is moved over the correct button.

to see the entire source, visit

http://www.lwmusic.org.

I put what I think are the relvant bits below:

function LL_pageLoad() {
MM_showHideLayers('Image','','hide');
MM_showHideLayers('Image2','','hide');
MM_showHideLayers('Image3','','hide');
MM_showHideLayers('Image4','','hide');
MM_showHideLayers('Image5','','hide');
MM_showHideLayers('Image6','','hide');
MM_showHideLayers('Image7','','hide');
MM_showHideLayers('Image8','','hide');
MM_showHideLayers('Image9','','hide');
MM_showHideLayers('Image10','','hide');
MM_showHideLayers('Image1','','show');
}

//-->
</script>
</head>

<body background="images/backgroundimage.jpg"
onLoad="LL_pageLoad" link="#3A0B1B" alink="#C0C0C0" >
.
.
.
<div id="Image" style="position:absolute; left:300px; top:200px; width:255px; height:206px; z-index:1">
<img src="images/musicintheparktext.jpg" width="263" height="212" onload="MM_showHideLayers('Image','','hide')" > </div>
.
.
.
<a href="concert.htm">
<img border="0" src="images/button_concertschedule.jpg" name="Button1" width="166" height="26" id="Button1" onLoad="MM_showHideLayers('Image','','hide')" onMouseOver="LL_swapImage('Image', 'Image1')" onMouseOut="LL_swapImage('Image1', 'Image')" >
</a>

Thanks in advance for any help you are able to give,

nowickil

cLFlaVA · Apr 5, 2005

you can get rid of that onload call. instead, do this:

Code:

<img ... style="visibility: hidden;">

*cLFlaVA
----------------------------
[tt]a frickin' twelve-gauge, what do you think?[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]

nowickil · Apr 6, 2005

That fixes the page load all right, but breaks the mouse over in the process. When I mouse over the button to trigger the image, the image just stays hidden. The javascript to show the image doesn't seem to be able to override the style="visibility:hidden;" on the IMG tag. The javascript I was given appears to be implementing layers. I suspect I'm doing something wrong in getting the layers to work.

Any more ideas out there?

cLFlaVA · Apr 6, 2005

hmm, try leaving in the onload, and leaving in the style i defined earlier.

*cLFlaVA
----------------------------
[tt]a frickin' twelve-gauge, what do you think?[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]

kaht · Apr 6, 2005

Pre-load the images and store them in a javascript array, try this small sample by replacing the .gif files with 2 of your own images. You'll see that the 2nd image does not appear until you mouseover the 2nd button:

Code:

<script language=javascript>
var arr = new Array();
arr[0] = new Image();
arr[0].src = "snow1.gif";
arr[1] = new Image();
arr[1].src = "compass_pic.gif";

function switchImg(num) {
   document.getElementById("myImg").src = arr[num].src;
}

</script>
<body>
<img src='snow1.gif' id=myImg><br><br>
<input type=button value='img1' onmouseover='switchImg(0)'>
<input type=button value='img2' onmouseover='switchImg(1)'>
</form>
</body>

-kaht

Do the chickens have large talons?
[banghead]

cLFlaVA · Apr 6, 2005

oh yes, and don't forget the preloading dealie.

*cLFlaVA
----------------------------
[tt]a frickin' twelve-gauge, what do you think?[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]

nowickil · Apr 6, 2005

Hi,

It felt like we were on the right track with the visibility issue. So, before I got carried away implementing all new code (thanks anyway kaht!), I decided to try moving the style="visibility:hidden" to the div tag that governs the image, instead of placing it in the image tag directly:

<div id="Image" style="position:absolute; left:300px; top:200px; width:255px; height:206px; z-index:1; visibility:hidden;">

<img src="images/musicintheparktext.jpg" width="263" height="212" >

</div>

I left out the onload instruction. Now, the page loads correctly and the mouseovers work too. So, right answer, wrong tag!

Thanks for your help!

L.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

how to prevent mouse-over images from appearing on page load?

nowickil

Programmer

cLFlaVA

Programmer

nowickil

Programmer

cLFlaVA

Programmer

kaht

Programmer

cLFlaVA

Programmer

nowickil

Programmer

Similar threads

Part and Inventory Search

Sponsor