views:

123

answers:

1

i have some javascript in the head of a page that controls an image gallery where the user clicks a thumbnail image and a larger image and some text are revealed in a span. there are 10 of these thumbnails per page and i need to find out how to set the 1st thumbnail's hidden span to "block" on page load.


<script type="text/javascript">
function hideSpan(spanName) {

var obj = document.getElementById(spanName);
obj.style.border="0px";
obj.style.color="#fff";
obj.style.display="none";
obj.style.left="333px";
obj.style.padding="0";
obj.style.position="absolute";
obj.style.top="55px";
obj.style.width="244px";
}

function showSpan(spanName) {

var spanEl, count = 1;
while(spanEl = document.getElementById('link' + count++)){
spanEl.style.display = 'none';
}

var obj = document.getElementById(spanName);
obj.style.display="block";
}

</script>


any help with this is VERY appreciated thank you.

+1  A: 

The simple, breezy way is to do this:

<body onload="showSpan('link1');">

The trouble here is that the onload event attached to body that way is executed a little late in the page loading (After all the parts-- including images-- are loaded) so it'll be murder for your dial up users. jQuery implements a much better way:

$(document).ready(function () {
    showSpan('link1');
});

If you're not using jQuery, then someone here much wiser than I more than likely knows the correct way to do it using "proper" JavaScript, I don't remember the event name that jQuery uses off the top of my head.

Nicholas Flynt
Oh, if it's not important to do it in JS after the page loads, why not use a pure CSS solution? You can define "display: hidden" for the thumbnails, and then do this: "img.thumbnail:first-child { display:block;}" That first-child selector causes it to apply only to the first element in a container, so if you've got a bunch of images in a row it only affects the first one. Very useful, depending on how your markup is set up.
Nicholas Flynt
thank you very much nicholas. i just went with the breezy way for now, since it worked. i'm using wordpress so i think jquery would be easy enough to implement when i have time. the deadline is today, so that saved my life. thanks again!
measles