JavaScript: Multi-Target Image-Swapping
This example repurposes the MouseOver JavaScript to demonstrate the image-swapping power this simple script can have with just a few modifications. In this version we introduce the use of an array to store the items that will be used for image-swapping. We are also using an initialization routine to run through that array to generate the image-swap functions. This array implementation can easily handle 100 or more of these image-swaps.
This example also shows how to implement a web form and use multiple images for each image-swap target. In all, these four simple form fields use a total of 36 image-swap conditions.
MouseOver Form Example
This form does nothing more than demonstrate the use of multiple image-swap items utilizing a web form.
The Code
JavaScript Code
Below is the JavaScript code used to generate the changing images using the browser's image-swap functionality. This is all there is, really small and compact, and a total of 1.5 kilobyte in size.
|
<script type="text/javascript"><!-- window.onerror = null; // Generic Error Trapping var graphs = new Array("g1","g2","g3","g4"); if (document.images) { // Checks for handling of image swapping. var n=0,i="images/"; while (n < graphs.length) { eval(graphs[n] + "_0=new Image(65,54);"); eval(graphs[n] + "_0.src='" + i + "graph0.gif'"); eval(graphs[n] + "_0.txt='Tape Graph'"); eval(graphs[n] + "_1=new Image(65,54);"); eval(graphs[n] + "_1.src='" + i + "graph1.gif'"); eval(graphs[n] + "_1.txt='Bar Graph'"); eval(graphs[n] + "_2=new Image(65,54);"); eval(graphs[n] + "_2.src='" + i + "graph2.gif'"); eval(graphs[n] + "_2.txt='Stacked Bar Graph'"); eval(graphs[n] + "_3=new Image(65,54);"); eval(graphs[n] + "_3.src='" + i + "graph3.gif'"); eval(graphs[n] + "_3.txt='Pie Chart Graph'"); eval(graphs[n] + "_4=new Image(65,54);"); eval(graphs[n] + "_4.src='" + i + "graph4.gif'"); eval(graphs[n] + "_4.txt='Area Graph'"); eval(graphs[n] + "_5=new Image(65,54);"); eval(graphs[n] + "_5.src='" + i + "graph5.gif'"); eval(graphs[n] + "_5.txt='Line Graph'"); eval(graphs[n] + "_6=new Image(65,54);"); eval(graphs[n] + "_6.src='" + i + "graph6.gif'"); eval(graphs[n] + "_6.txt='3D Bar Graph'"); eval(graphs[n] + "_7=new Image(65,54);"); eval(graphs[n] + "_7.src='" + i + "graph7.gif'"); eval(graphs[n] + "_7.txt='Horizontal Bar Graph'"); eval(graphs[n] + "_8=new Image(65,54);"); eval(graphs[n] + "_8.src='" + i + "graph8.gif'"); eval(graphs[n] + "_8.txt='No Graph'"); n += 1; } } function Chng(Pct,typ) { // MouseOver, image swapping if (typ == "x") typ = 8; if (document.images) document[Pct].src = eval(Pct + "_" + typ + ".src"); document[Pct].alt = eval(Pct + "_" + typ + ".txt"); document[Pct].parentNode.title = eval(Pct + "_" + typ + ".txt"); } function init() { // Initialize presets for Graph images var t = 0; while (t < graphs.length) { // Assign array of multiple image-swaps eval("Chng('" + graphs[t] + "',document.profile." + graphs[t].substring(1,(graphs[t].length)) + ".value)" ); t += 1; } } window.onload=init; // Load JavaScript initialization routine // --></script> |
HTML Code
The HTML code is nothing special. Same old form coding and image coding. The real difference here is the addition of the OnChange attribute defined for the SELECT tag. This tells the JavaScript to update the image according to the current value of the list.
|
<p><strong>Graph 3</strong><br /> <img src="images/graph0.gif" border="0" id="g3" name="g3" align="left" width="65" height="54" alt="Graph Icon" /> <label for="f3" title="graph 3"> <select id="f3" name="f3" onchange="Chng('g3',this.value)"> <option value="0" selected="selected">[Tape]</option> <option value="1">Bar</option> <option value="2">Stacked Bar</option> <option value="3">Pie Chart</option> <option value="4">Area</option> <option value="5">Line</option> <option value="6">3D Bar</option> <option value="7">Horizontal Bar</option> <option value="x">None</option> </select></label></p> |
Please note that the JavaScript above also uses a condition test in the image-swapping function. This test is for the value 'x' which is then set to '8', the blank image. We could have easily just defined MouseOver image '8' to be 'x' instead, but this is a good example of how the code can be tweaked to make it easier for your task.
You might also notice that ID and NAME are both defined for the image, and that both are the same. This is part of our preparation for the changes coming with the rigorous coding standards of XHTML. The XHTML language is a little more rigorous than HTML, and it will use the ID attribute to interract with all elements of a document rather than the name attribute that HTML uses. By using both, we solve the problem of coding support during the transition.
This example goes one step further by changing the image's alternative text, and the anchor's title text, to accurately describe the image contents as the images are replaced. (You can normally see this text when you MouseOver the image.) With a little thought and planning you can make your pages very informative and useful to your visitors.
Be sure to also see the simpler approach to MouseOvers which does not use an array. The simpler approach also shows how to effectively code your links so that the MouseOver functions work even when the visitor 'tabs' through the links without using the mouse.
