Forum Moderators: open
I'm working on a page made to sort of showcase my digital photography, and I'm using the basic switchimage function for onmouseovers and onclicks. The links to the images 'light up' with the mouseovers, and when you click, the image in the center of the page changes to the link's respective photo. I have all the image declarations for the digital photography page in the head of my html file. There are about 12 photos and 24 thumbnails .. needless to say, the page takes a while to load .. I didn't forsee all the overhead that this would cause, and I'm assuming it's because of the location and amount of the image declarations causing the browser to download all the images before even displaying the html. Would a link to an external js file take care of this? Or will I need to reorganize the code a little? Or do I need to take a whole different approach?
Here's a sample of the code I'm actually using so you get a better idea:
(in the head of the html)
pic1 = new Image(620,465)
pic1.src = "photos/dphoto1.jpg"
thumb1 = new Image(50,50)
thumb1.src = "photos/dthumb1.jpg"
thumb1b = new Image(50,50)
thumb1b.src = "photos/dthumb1b.jpg"
function switchimage(imgDocID,imgObjName)
{
document[imgDocID].src = eval(imgObjName + ".src");
}
(in the body)
<a href="#" onmouseover="switchimage('thumb1','thumb1b');" onmouseout="switchimage('thumb1','thumb1');"
onclick="switchimage('dphoto','pic1');"><img src="photos/dthumb1.jpg" width="50" height="50" name="thumb1"></a>
I admit, I don't know javascript. I'm pretty new at making webpages in general .. but I do grasp programming concepts easily because I've been through a few classes and written a few things. So please keep that in mind when replying. Go easy on me.
Thank you!
No. It wouldn't make any effective difference. It is always a good idea to keep your script in a separate file though.
The page takes a long time to download because all the 'content' images are being preloaded. Bandwidth hog! Generally, only the thumbnail rollovers would be preloaded (so as to give a neat rollover response). The actual content images would only be loaded if and when they are needed. There will need to be a little tweak to the function calls and the switch image function - but that's it.
Ahh, yes. I figured as much. And I see why it's generally a good idea to declare just the thumbnails there -- for smooth mouseovers.. So, if all it needs is a little tweaking, could you (or anybody) help me out with the code? .. as I do not know javascript. :)
CSS Rollovers?
Being being a neophyte, you may not be aware that rollovers can be acheived using CSS.
The main benefit is not so much that it doesn't require script to be enabled but that it can half the number of images downloaded and lower the total overall download size.
Combine each image+rollover pair into a single image, with the rollover directly below the normal image. Then use the image as a background image for the link. Setting a :hover rule for this class that makes the BG image bottom-aligned gives the required effect.
This does require that you combine your images.
What do you think?
---------------
It is possible to combine all the images into a single block and let CSS handle the rest of the arrangements, but I'm not sure that a particular bug in IE won't cause problems.
However, the rollovers are not what I'm most concerned about. I just looked over my original post and realized I didn't make clear what I was trying to find an answer for. The part where I mentioned the photographs loading in the center of the page, using the same switchimage function as the rollovers, is what I was worried about. I really like the way I've already set it up. The user doesn't have to switch pages or worry about opening and closing pop-ups when looking through the pictures -- the pictures just load on the same page the instant you click its respective thumbnail. But like I said, the preloading of all the images (of the photographs) is a big problem because they're much larger than the tiny thumbnail images used for the rollovers (which is what the switchimage function is probably only meant to be used for) .. and this will only get worse when I add more photos to the list.
So, here's what I'm wondering: Is there any other way to use the same concept of loading a picture into an area of a single page without all the overhead caused by the nature of this switchimage function? I don't want to bother with multiple html files .. like, one for each picture. That seems incredibly unnecessary to me, .. but some people choose to do it that way. *shrug*
If you want the link to my site to see what I mean, just let me know. I didn't want to cause trouble with the whole self-promotion policy.
Inside the onClick attribute of the link shown in the code I supplied above, can I put some javascript referencing the URL of a .jpg file .. instead of referencing the file in the head? Is it possible to insert javascript into an attribute like that? If this is possible, would that make the image load only when the link is clicked? That would solve all my problems.
Thanks for the help. :)
