Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
Hello
 
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.
 
HTML
 
<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td width="100%">
            <form name="mygallery">
                <p>
                    <select name="picture" size="1" onChange="showimage()">
                        <option selected value="gfx/Marstons.jpg">Marstons pubs</option>
                        <option value="gfx/NorthUni.jpg" href="http://www.northumbria.ac.uk/">Northumbria University</option>
                    </select>
                </p>
            </form>
        </td>
    </tr>
    <tr>
        <td width="100%">
            <p align="center">
                <img src="gfx/Marstons.jpg" name="pictures" width="99" height="100">
        </td>
    </tr>
</table>
 
JS
 
function showimage() {
    if (!document.images) return
    document.images.pictures.src = document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
}
Posted 14-Jan-13 3:27am
Edited 14-Jan-13 17:59pm
v2

1 solution

Rate this: bad
good
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>
</select>
 
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" />
 
.....
  Permalink  

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

  Print Answers RSS
Your Filters
Interested
Ignored
     
0 Shai Vashdi 456
1 OriginalGriff 183
2 Sergey Alexandrovich Kryukov 171
3 Tadit Dash 160
4 praveen_07 115
0 Sergey Alexandrovich Kryukov 9,280
1 OriginalGriff 5,473
2 Peter Leow 4,100
3 Maciej Los 3,540
4 Abhinav S 3,333


Advertise | Privacy | Mobile
Web02 | 2.8.140415.2 | Last Updated 19 Jan 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Use
Layout: fixed | fluid