javascript not working HTMl problem - HTML forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

javascript not working HTMl problem

webaster

5:08 pm on Jul 3, 2005 (gmt 0)

10+ Year Member

This javascript is not working. The idea is that after the largeImage has loaded, div1,2,3,4 get unhidden.
this line probably?:

document.getElementById('largeImage').onload = unhideDivsAfterImageOnload

<script language="javascript">
<!--

function unhideDivsAfterImageOnload () {
document.getElementById('div1').style.visibility = "visible";
document.getElementById('div2').style.visibility = "visible";
document.getElementById('div3').style.visibility = "visible";
document.getElementById('div4').style.visibility = "visible";

}
document.getElementById('largeImage').onload = unhideDivsAfterImageOnload ;

//
-->
</script>

The relevant css and HTML

<img id="largeImage" src="images/superlarge.jpg" width="600" heigth="400">

<div id="div1" style="visibility:hidden;">
<img src="images/image1.jpg" width="200" heigth="400">
</div>
<div id="div2" style="visibility:hidden;">
<img src="images/image2.jpg" width="200" heigth="400">
</div>
<div id=div3" style="visibility:hidden;">
<img src="images/image3.jpg" width="200" heigth="400">
</div>
<div id="div4" style="visibility:hidden;">
<img src="images/image4.jpg" width="200" heigth="400">
</div>

iamlost

6:49 pm on Jul 3, 2005 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

If the code is as you posted you might try placing the smaller images styles in the header or in an external style sheet.

By placing the "invisibility" inline it may well be over-riding the script.

webaster

9:38 pm on Jul 3, 2005 (gmt 0)

10+ Year Member

"By placing the "invisibility" inline it may well be over-riding the script."

This should not be a problem.

iamlost

11:56 pm on Jul 3, 2005 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

I ran some tests (replacing your images with mine):

* I changed js to:

<script language="javascript">

</script>

* I changed HTML to:

<img id="largeImage" src="images/superlarge.jpg" onload="unhideDivsAfterImageOnload();" width="600" heigth="400">

It still did not work.

* I then removed inline CSS to within <head> before js:
It worked as expected. The smaller images became visible.
* I then removed inline CSS to within <head> after js:
It worked as expected. The smaller images became visible.
* I then removed inline CSS to an external CSS file:
It worked as expected. The smaller images became visible.
* In each instance above I tested with the "largeImage" being unavailable:
It worked as expected - the smaller images did not change visibility.

As mentioned in my first post: inline CSS trumps all other CSS - that is what the cascade is all about.

* I then changed the js and HTML back to your coding and ran with <head> and external CSS:
Again it did not work.

So: you need the onLoad call at that portion of the HTML that must load to activate the script and the CSS must not be inline.