SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Evangelist BJ Duncan's Avatar
    Join Date
    Jun 2007
    Location
    North Richmond
    Posts
    494
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can images be displayed in drop-down menus?

    Hi,

    I am very new to javascript, I generally use php so my apologies upfront if this is a no-brainer.

    Can images be displayed in drop-down menus?
    Regards,
    BJ Duncan

  2. #2
    SitePoint Wizard holmescreek's Avatar
    Join Date
    Mar 2001
    Location
    Northwest Florida
    Posts
    1,707
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes, you can create your drop down menus with css and set the background property of the list item to whatever image you want -- then add a litle left padding to the menu text so it doesn't overlap the image.

    (In this case I'm thinking of a drop down menu item with maybe a bullet left of the menu text.)
    intragenesis, llc professional web & graphic design

  3. #3
    SitePoint Evangelist BJ Duncan's Avatar
    Join Date
    Jun 2007
    Location
    North Richmond
    Posts
    494
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the quick reply, pretty much I was looking at displaying a drop-down menu with the list of counrties, then the conutry flag next to it.

    EG.
    Code JavaScript:
    <select>
    <option value="australia">Australia <img src="/images/flags/australia.png" /></option>
    <option value="nz">New Zealand<img src="/images/flags/nz.png" /></option>
    <option value="en">England <img src="/images/flags/en.png" /></option>
    <option value="us">United States of America <img src="/images/flags/us.png" /></option>
    </select>

    This is how I have it, but it doesn't show the image. What am I doing wrong?
    Regards,
    BJ Duncan

  4. #4
    SitePoint Wizard holmescreek's Avatar
    Join Date
    Mar 2001
    Location
    Northwest Florida
    Posts
    1,707
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm pretty sure a standard html listbox won't let you display an image.

    Now, what you could do, is next to the list box display a single photo. Then, using javascript, on the list items, use onblur() and onfocus() to call a javascript function that would swap the .src attribute of the image.
    intragenesis, llc professional web & graphic design

  5. #5
    SitePoint Wizard holmescreek's Avatar
    Join Date
    Mar 2001
    Location
    Northwest Florida
    Posts
    1,707
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    
    <style>
    
    div { float:left; margin:1em; }
    
    </style>
    
    <script language="javascript1.4">
    
    function changeimg(imgid) {
    
      var targetimg = document.getElementById('imgplaceholder');
      
      targetimg.src = 'img/' + imgid;
    
    }
    
    
    </script>
    
    </head>
    
    <body><form>
    <div><select name="" size="1">
      <option value="us" selected="selected" onClick="changeimg('photo1.gif');">Photo1</option>
      <option value="uk" onClick="changeimg('photo2.gif');">Photo2</option>
    
    </select></div>
    <div><img src="/img/photo1.gif" id=imgplaceholder /></div>
    </form>
    </body>
    </html>
    
    intragenesis, llc professional web & graphic design

  6. #6
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should use the onchange event of the select to do this as IE doesn't support onclick event for options.

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    
    <style>
    
    div { float:left; margin:1em; }
    
    </style>
    
    <script type="text/javascript">
    
    var imgs2opts = {
    	"us": "photo1.gif",
    	"uk": "photo2.gif"
    }
    
    function changeimg(sel) {
    	if (imgs2opts[sel.value]) {
    		var targetimg = document.getElementById('imgplaceholder');
      	targetimg.src = 'img/' + imgs2opts[sel.value];
    	}
    }
    
    
    </script>
    
    </head>
    
    <body><form>
    <div><select name="" size="1" onchange="changeimg(this);">
      <option value="us" selected="selected">US</option>
      <option value="uk">UK</option>
    
    </select></div>
    <div><img src="/img/photo1.gif" id=imgplaceholder /></div>
    </form>
    </body>
    </html>

  7. #7
    SitePoint Evangelist BJ Duncan's Avatar
    Join Date
    Jun 2007
    Location
    North Richmond
    Posts
    494
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I certainly do appreciate the assistance and I am learning new things which is great, however, the end result of what I was looking for is still not there. I have tested the sample codes given and they are great, but what I was looking for (going by the EG above) is where the drop menu text is, can an image be placed next to that.

    EG
    ____________________
    |text - then image | _ |
    |_______________|_V_|

    within the drop-down box itself.
    Regards,
    BJ Duncan

  8. #8
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is no "easy" way to do this that will work in all browsers. IE doesn't allow images inside of <options> (just text). Mozilla can do it somehow (I've seen it, just don't remember how it was done).

    One approach that won't work is the use of a partially transparent select with images underneath. Once again IE quashes this piece of insight with its windowed elements (read more at http://support.microsoft.com/default...NoWebContent=1)

    So, this leaves the option of creating a fake select box that uses a bunch of javascript. If this is an approach you'd like to follow, google

    fake select

    and you should find a bunch.

    Good luck
    This leaves you with the hacky way of doing it, which is to make a "fake" select box

  9. #9
    SitePoint Evangelist BJ Duncan's Avatar
    Join Date
    Jun 2007
    Location
    North Richmond
    Posts
    494
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey jimfraser and holmescreek, again thank you guys so much for the assistance and direction.

    It is definately appreciated. - It is assistance like this that makes the forums true to life. Keep up the good work. Cheers
    Regards,
    BJ Duncan


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •