Image Click Selects Dropdown Item
Today's article can make things easier for your web site visitors and customers.
Images can communicate quicker than words, and sometimes with better understanding. A picture of a tree is recognized instantly as being a tree, and is understood to be a tree whether the observer's native language is German, Spanish, English, or Space Alien.
Clicking on an image can automatically select a list item in a dropdown, or in a selectbox.
This can be used where the image isn't actually necessary but provided for ease of use. Clicking on an image of the credit card to be used in a purchase comes to mind as an example.
It can also be used where images are a necessity. These situations can be geometrical shapes, photos of variations on a theme, repeating patterns, and other items not easily described in a dropdown or selectbox list item. Examples would be grinding stones, a selection of sunset photos, and the wallpaper provided with this article's demonstrations.
The demonstrations show how to automatically select list items in both dropdown and selectbox (multiple items in the select box). They show how to select list items when clicking on an image map as well as when clicking on individual images.
See /a/25h/pl.pl?art254
One of the demonstrations is selecting wallpaper samples. The samples are labeled for the demonstration so you can verify that the correct selections are made. In a live installation, the labels might not be present and the only way the customer may be certain of selecting the correct wallpaper would be to click on the image.
The other is an image map with areas of the image corresponding to attractions at an imagined amusement park.
It's easy to implement.
-
Put some images on a web page.
-
Put a form with a dropdown and/or a selectbox on the page.
-
Copy the JavaScript from one of the demonstration pages and paste it into the HEAD area.
-
Link the images that will automatically select list items.
The downloadable file of source code and images used in the demonstrations also includes a LinkingInstructions.txt file with instructions how to link the images. See /a/25h/pl.pl?art254
After you've done it once, it's easy to do more of them.
Question:
Did you find this article interesting and understandable? How can it be improved?
Your response is anonymous.
When done typing, click anywhere outside the box. [more info]
Will Bontrager
©2004 Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
