Changing a Drop Down list using Javascript to select multiple images?

Question

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.

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.

My HTML code:

<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>

My Javascript

function showimage() {
    if (!document.images) return
    document.images.pictures.src = document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
}

Gilles Hemmerlé · Accepted Answer · 2013-01-14 14:30:24Z

I am not sure what is your needs but you cannot add an href attribute directly over a select option.

If you want only add the url on you option to apply it on your img when it is selected by the user, you can use the data-* attributes provided by html5.

Here's an example with the code you provided on your request.

JS fiddle for a live test :http://jsfiddle.net/BVAkh/1/

Html part :

<html>
  <head></head>
  <body>
    <table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td width="100%">
            <form name="mygallery">
                <p>
                    <select name="picture" size="1" onChange="javascript:showimage()">
                        <option selected value="gfx/Marstons.jpg">Marstons pubs</option>
                        <option value="gfx/NorthUni.jpg" data-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" />
          </p>
        </td>
    </tr>
</table>
      </body>
    </html>

Js part :

function showimage() {
    if (!document.images) return;
    var selectedItem = document.mygallery.picture.options[document.mygallery.picture.selectedIndex];
    document.images.pictures.src = selectedItem.value;   

    if(selectedItem.getAttribute("data-href")) {
      document.images.pictures.onclick = function() {
        window.location.href = selectedItem.getAttribute("data-href");
      }
    }
    else {
      document.images.pictures.onclick = null;
    }  
}

But I think you should rethink about the image change. Maybe set an id to your p and change the content with an innerHTML. You will be able to add a <a></a> tag to your image if the data-href is provided.

Im using hide show in javascript.To display divs for each sector such as "pubs".

Collectives™ on Stack Overflow

Changing a Drop Down list using Javascript to select multiple images?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related