Click here to Skip to main content
13,453,422 members (50,211 online)
Rate this:
Please Sign up or sign in to vote.

I have a Drop Down List in a web page, what it currently does is displays an individual image that is selected in the list.

Please find my code below.

What I want to achieve is if a sector is selected such as pubs for example, It will display a group of images of pubs instead of one individual image, anyone with any knowledge of doing this?.If I select another option such as University it would display multiple images of University logos.

Also is there a way to add a mouse-click hyperlink to an image even if I am using it as a drop down list?.

I presume this is possible but I cannot find much information on the subject.

Any assistance would be great, Thanks in advance.


<table border="0" cellspacing="0" cellpadding="0">
        <td width="100%">
            <form name="mygallery">
                    <select name="picture" size="1" onChange="showimage()">
                        <option selected value="gfx/Marstons.jpg">Marstons pubs</option>
                        <option value="gfx/NorthUni.jpg" href="">Northumbria University</option>
        <td width="100%">
            <p align="center">
                <img src="gfx/Marstons.jpg" name="pictures" width="99" height="100">


function showimage() {
    if (!document.images) return = document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
Posted 14-Jan-13 3:27am
Updated 14-Jan-13 17:59pm

1 solution

Rate this: bad
Please Sign up or sign in to vote.

Solution 1

If you want display group of images to shown on selection of dropdownlist you should create images dynamically by assigning related image path..

<select name="picture" size="1" onChange="showimage()">
   <option selected value="gfx/Marstons.jpg">university</option>
   <option value="gfx/NorthUni.jpg" >companies</option>

Ex: 1.for university
<img id="img1" src="university1.jpg" />
<img id="img2" src="university2.jpg" />
<img id="img3" src="university3.jpg" />
<img id="img4" src="university4.jpg" />
2.for companies
<img id="img1" src="companies1.jpg" />
<img id="img2" src="companies2.jpg" />
<img id="img3" src="companies3.jpg" />
<img id="img4" src="companies4.jpg" />


This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy |
Web04-2016 | 2.8.180318.3 | Last Updated 19 Jan 2013
Copyright © CodeProject, 1999-2018
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100