Notes for Chapter 11 Assignment and some useful links
1. Withrollovers, if you want your pages to respond quickly you mustpre-loadboth images.
This is discussed in Chapter 4 --
inForms and Events Note 2A(and related programs).
Here are some interesting links - - some of which capture the need to pre-load and others don't.
Also, some use thehover()method of jQuery, others use themouseoverandmouseoutevents.
(Either will work). If you want your alternate image to stay visible when the mouse leaves you are going to need to use theclickevent and toggle something.
All of these use some form of string manipulation to change the name of the src file.
2. Forthumbnailsyou might want to use a plug-in.
3. For preloading images
This list is supplementary to the first two.
(primarily b/c at the top of the page it links to....
which has a good example starting "If you have more than one image.." and another starting "Depending on your setup..."
Look at the example which starts "Quick and easy.." and the "tweaked"version of it just a little further down the page.
has one of the clearest solutions - but if you read the edit from 3 years later you will see a subtle issue with more recent browsers. There are two solutions here - one is to append the elements with a fast fade, but I think a nicer solution is to make the alternate images have a tiny class (1px by 1px). They won't show up, but they'll load.
Of course, if you have 20 images and 20 alternate images, then loading all 40 will be mighty slow.
Still and all this is a pretty good solution.
Of course, rather than putting the url's in an array you could put in part of the name (e.g. red, blue) and then construct the src url's ("red_in.gif", "red_out.gif", etc.) with string concatenation. That would allow you to insert the images you want to show into your body with a classes for size and rolls, and insert the others with the tiny class. Then you can attach mouseover and mouseout event handlers to those which have the rolls class.
shows the use of pre-loading with tiny class etc (I didn't bother with the array ["red", "blue"] in this example.)
(Again)has interesting code - but we haven't yet used (Node.js does use this a lot) the plugins that get us to ImgDir etc. but I think you can see how you would substitute a folder url for config.ImgDir and with jpeg or gif the config.ImgFormat
Again, if you name your images consistently you can also add a class attribute at the same time. I do like the way this code sets a bunch of attributes as it loads the image --- pretty neat.
Further down the page are the"quick and easy"andtweaked"snippets mentioned above.