|
|||||||||
|
|||||||||
| |||||||||
|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| ||||||||||||||||||||||||||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Codewalkers Forums Sponsor:
|
|
|
|
#1
February 14th, 2005, 06:51 PM
|
|||
|
|||
|
how to change image with drop down menu's options
I want to make a script which would enable me to do change image when a new option is selected from a drop down menu. Please view this link:
ebags.com/durango_leather_works/laptop_shuttle/product_detail/index.cfm?modelid=48390 I got to know that the event used for the options of drop down menu is "onChange" .i.e. It is with this event that the image is changed. But as I dont know javasript, I haven't succeeded as yet in doing what the ebags.com has done. I am copying a code and a lil bit explaination from a book. It is used for changing images with the onMouseOver and onMouseOut events. If someone could help me to change it to achieve, my required effect, it will be really great. ******* <html> <head> <script language="JavaScript"> <!-- hide // ************************************************** **** // Script from Stefan Koch - Voodoo's Intro to JavaScript // http://rummelplatz.uni-mannheim.de/~skoch/js/ // JS-book: http://www.dpunkt.de/javascript // You can use this code if you leave this message // ************************************************** **** // ok, we have a JavaScript browser var browserOK = false; var pics; // --> </script> <script language="JavaScript1.1"> <!-- hide // JavaScript 1.1 browser - oh yes! browserOK = true; pics = new Array(); // --> </script> <script language="JavaScript"> <!-- hide var objCount = 0; // number of (changing) images on web-page function preload(name, first, second) { // preload images and place them in an array if (browserOK) { pics[objCount] = new Array(3); pics[objCount][0] = new Image(); pics[objCount][0].src = first; pics[objCount][1] = new Image(); pics[objCount][1].src = second; pics[objCount][2] = name; objCount++; } } function on(name){ if (browserOK) { for (i = 0; i < objCount; i++) { if (document.images[pics[i][2]] != null) if (name != pics[i][2]) { // set back all other pictures document.images[pics[i][2]].src = pics[i][0].src; } else { // show the second image because cursor moves across this image document.images[pics[i][2]].src = pics[i][1].src; } } } } function off(){ if (browserOK) { for (i = 0; i < objCount; i++) { // set back all pictures if (document.images[pics[i][2]] != null) document.images[pics[i][2]].src = pics[i][0].src; } } } // preload images - you have to specify which images should be preloaded // and which Image-object on the wep-page they belong to (this is the first // argument). Change this part if you want to use different images (of course // you have to change the body part of the document as well) preload("link1", "img1f.gif", "img1t.gif"); preload("link2", "img2f.gif", "img2t.gif"); preload("link3", "img3f.gif", "img3t.gif"); // --> </script> <head> <body> <a href="link1.htm" onMouseOver="on('link1')" onMouseOut="off()"> <img name="link1" src="link1f.gif" width="140" height="50" border="0"></a> <a href="link2.htm" onMouseOver="on('link2')" onMouseOut="off()"> <img name="link2" src="link2f.gif" width="140" height="50" border="0"></a> <a href="link3.htm" onMouseOver="on('link3')" onMouseOut="off()"> <img name="link3" src="link3f.gif" width="140" height="50" border="0"></a> </body> </html> This script puts all images in an array pics. The preload() function which is called in the beginning builds up this array. You can see that we call the preload() function like this: preload("link1", "img1f.gif", "img1t.gif"); This means that the script should load the two images img1f.gif and img1t.gif. The first image is the image which should be displayed when the mousecursor isn't inside the image area. When the user moves the mousecursor across the image area the second image is shown. With the first argument "img1" of the call of the preload() function we specify which Image-object on the web-page the two preloaded images belong to. If you look into the <body> part of our example you will find an image with the name img1. We use the name of the image (and not its number) in order to be able to change the order of the pictures without changing the script. The two functions on() and off() are being called through the event-handlers onMouseOver and onMouseOut. As images cannot react to the events MouseOver and MouseOut we have to put a link around the images. As you can see the on() function sets back all other images. This is necessary because it could happen that several images are highlighted (the event MouseOut does not occur for example when the user moves the cursor from an image directly outside the window). *** Regards, Irfan
|
|
#2
February 18th, 2005, 03:49 PM
|
|||
|
|||
|
RE: how to change image with drop down menu's options
I didn't have time to read your code but you can easily change image from drop down menu:
use onChange() and call java script function with parameter what is value of drop down item, and thats your image name. Your function should take the parameter and do next: function ChangeImage(picture){ document.imagename.src = picture; }
|
|
| Viewing: Codewalkers Forums > Other Technologies > Client Side Things > how to change image with drop down menu's options |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
|
|
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
