Question

the JS :

function imgLoader(imgObj)
         {
          alert(imgObj.id + " : " + imgObj.src + " : " +imgObj.width);
        }

the html :

<img id="img_1" src="image_1.png" onload="imgLoader(this)" />
<img id="img_2" src="image_2.png" onload="imgLoader(this)" />
<img id="img_3" src="image_3.png" onload="imgLoader(this)" />
<img id="img_4" src="image_4.png" onload="imgLoader(this)" />
<img id="img_5" src="image_5.png" onload="imgLoader(this)" />

related css (updated bc of css comment / question)

img {position:relative; height: 46px; display: inline-block; cursor:pointer; margin: 0px 10px 0px 0px; padding: 0px 10px 0px 10px;}

note there is no other css.
Problem : is it just friday and close to the holidays that I am missing something obvious ? the alerts from the onload all report the same value, however the same function when tied to a hover – accurately reports the width.

But when this runs at initial image load time, my alert box looks like (this is actually a fabricated order, since the order of which the images are loaded is not yet controlled and is up to the browser – but this illustrates my problem well enough) :

“img_1 : image_1.png : 125”

“img_2 : image_2.png : 125”

“img_3 : image_3.png : 125”

“img_4 : image_4.png : 125”

“img_5 : image_5.png : 125”

This is incredibly silly because the images vary from 15px to 400px in width. What gives?

Answer 1

Your code working fine on mozilla firefox and IE 6

<script type="text/javascript">
<!--
function imgLoader(imgObj)
         {
          alert(imgObj.id + " : " + imgObj.src + " : " +imgObj.width);
        }
-->
</script>


<img id="img_1" src="image_1.png" onload="imgLoader(this)" />
<img id="img_2" src="image_2.png" onload="imgLoader(this)" />
<img id="img_3" src="image_3.png" onload="imgLoader(this)" />
<img id="img_4" src="image_4.png" onload="imgLoader(this)" />
<img id="img_5" src="image_5.png" onload="imgLoader(this)" />

different width are shown on 5 alert boxes. in firefox it was fast and 5 alert boxes just showed so fastly one after another before clicking.so when all alert boxes are shown then the 5th alert box was on the top. then after clicking that the 4th appeared under that.

didn’t find any problem. check your images if those are in different width or not.