HTMLHelp Forums > linking an image to a drop down list?

Full Version: linking an image to a drop down list?

HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)

danieltnbaker

Apr 23 2008, 10:29 AM

is it possible to link an image to a drop down list using hyperlinks and mouse over?

i have a table with an image on one side and several drop down lists on the other.
in the drop down lists is the list of images i have and when a user clicks one of theose images in the list i want the image at the side of the drop down lists to change to that image i just dont know how.

my code is:

CODE

<td><h4>Artichoke</h4>
                        <select>
                        <option>Select an Image</option>
                        <option><a href="#" onMouseOver="document.images[0].src='Images/Gallery/arti001.jpg'">Artichoke Image 01</a></option>
                        <option><a href="#" onMouseOver="document.images[0].src='Images/Gallery/arti002.jpg'">Artichoke Image 02</a></option>
                        <option><a href="#" onMouseOver="document.images[0].src='Images/Gallery/arti003.jpg'">Artichoke Image 03</a></option>
                        <option><a href="#" onMouseOver="document.images[0].src='Images/Gallery/arti004.jpg'">Artichoke Image 04</a></option>
                        <option><a href="#" onMouseOver="document.images[0].src='Images/Gallery/arti005.jpg'">Artichoke Image 05</a></option>
                        <option><a href="#" onMouseOver="document.images[0].src='Images/Gallery/arti006.jpg'">Artichoke Image 06</a></option>
                        <option><a href="#" onMouseOver="document.images[0].src='Images/Gallery/arti007.jpg'">Artichoke Image 07</a></option>
                        <option><a href="#" onMouseOver="document.images[0].src='Images/Gallery/arti008.jpg'">Artichoke Image 08</a></option>
                        <option><a href="#" onMouseOver="document.images[0].src='Images/Gallery/arti009.jpg'">Artichoke Image 09</a></option>
                        <option><a href="#" onMouseOver="document.images[0].src='Images/Gallery/arti010.jpg'">Artichoke Image 10</a></option>
                        </select>
                        <h4>Studio</h4>
                        <select>
                        <option>Select an Image</option>
                        <option><a href="#" onMouseOver="document.images[0].src='Images/Gallery/studio001.jpg'">Studio Image 01</a></option>
                        <option><a href="#" onMouseOver="document.images[0].src='Images/Gallery/studio002.jpg'">Studio Image 02</a></option>
                        <option><a href="#" onMouseOver="document.images[0].src='Images/Gallery/studio003.jpg'">Studio Image 03</a></option>
                        <option><a href="#" onMouseOver="document.images[0].src='Images/Gallery/studio004.jpg'">Studio Image 04</a></option>
                        <option><a href="#" onMouseOver="document.images[0].src='Images/Gallery/studio005.jpg'">Studio Image 05</a></option>
                        <option><a href="#" onMouseOver="document.images[0].src='Images/Gallery/studio006.jpg'">Studio Image 06</a></option>
                        <option><a href="#" onMouseOver="document.images[0].src='Images/Gallery/studio007.jpg'">Studio Image 07</a></option>
                        <option><a href="#" onMouseOver="document.images[0].src='Images/Gallery/studio008.jpg'">Studio Image 08</a></option>
                        <option><a href="#" onMouseOver="document.images[0].src='Images/Gallery/studio009.jpg'">Studio Image 09</a></option>
                        <option><a href="#" onMouseOver="document.images[0].src='Images/Gallery/studio010.jpg'">Studio Image 10</a></option>
                        <option><a href="#" onMouseOver="document.images[0].src='Images/Gallery/studio011.jpg'">Studio Image 11</a></option>
                        <option><a href="#" onMouseOver="document.images[0].src='Images/Gallery/studio012.jpg'">Studio Image 12</a></option>
                        <option><a href="#" onMouseOver="document.images[0].src='Images/Gallery/studio013.jpg'">Studio Image 13</a></option>
                        <option><a href="#" onMouseOver="document.images[0].src='Images/Gallery/studio014.jpg'">Studio Image 14</a></option>
                        <option><a href="#" onMouseOver="document.images[0].src='Images/Gallery/studio015.jpg'">Studio Image 15</a></option>
                        <option><a href="#" onMouseOver="document.images[0].src='Images/Gallery/studio016.jpg'">Studio Image 16</a></option>
                        <option><a href="#" onMouseOver="document.images[0].src='Images/Gallery/studio017.jpg'">Studio Image 17</a></option>
                        <option><a href="#" onMouseOver="document.images[0].src='Images/Gallery/studio018.jpg'">Studio Image 18</a></option>
                        <option><a href="#" onMouseOver="document.images[0].src='Images/Gallery/studio019.jpg'">Studio Image 19</a></option>
                        </select>
                        <h4>Misc</h4>
                        <select>
                        <option>Select an Image</option>
                        <option><a href="#" onMouseOver="document.images[0].src='Images/Gallery/conc001.jpg'">Concorde Image 01</a></option>
                        <option><a href="#" onMouseOver="document.images[0].src='Images/Gallery/glast001.jpg'">Glastonbury Image 01</a></option>
                        <option><a href="#" onMouseOver="document.images[0].src='Images/Gallery/glast002.jpg'">Glastonbury Image 02</a></option>
                        <option><a href="#" onMouseOver="document.images[0].src='Images/Gallery/glast003.jpg'">Glastonbury Image 03</a></option>
                        <option><a href="#" onMouseOver="document.images[0].src='Images/Gallery/muse001.jpg'">Muse Image 01</a></option>
                        <option><a href="#" onMouseOver="document.images[0].src='Images/Gallery/muse002.jpg'">Muse Image 02</a></option>
                        <option><a href="#" onMouseOver="document.images[0].src='Images/Gallery/muse003.jpg'">Muse Image 03</a></option>
                        </select>
                    </td>
                    <td>
                        <img src="Images/Gallery/studio018.jpg" />
                    </td>

the link is http://www.conceptsofinebriation.co.uk/Images.html

any ideas? anyone? ....

Christian J

Apr 23 2008, 04:40 PM

QUOTE(danieltnbaker @ Apr 23 2008, 05:29 PM)

is it possible to link an image to a drop down list using hyperlinks and mouse over?

You can't use links inside OPTION elements, but you can change the image SRC depending on the selected OPTION with javascript. Probably you can find some ready-made script for this, otherwise there are some basics here: http://www.javascriptkit.com/javatutors/combos1.shtml

But since not all visitors (and no search engines) use javascript, a more reliable way might be to load a whole new page (with a different image) from the SELECT menu using a server-side script, see http://htmlhelp.com/faq/html/forms.html#form-navmenu

But I think ordinary thumbnails would be the simplest and most user-friendly solution.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.