Questions

Drop down list with images beside each row

Tags: Open Source
+
0 Votes

Drop down list with images beside each row

schreiben10
Hello all,

I have a stong question because i can't solve it.

I want to creat a drop down list with images beside each row.

On top of my pages i want a drop down list with all categories.
But not simple DDL - i want to be with a icon beside each row

select ... option value /option /select


But i want a small image (icon) beside each option from select.

See for example:

http://www.schreiben10.com/referate/Deutsch/14/Deutsch3.php on the top page see a categories
- so i want to generate a DDL for those .

How can i do that?

Thanks for your effort to reply

Member Answers

    • +
      0 Votes
      Sven2157

      The inline style, apparently only works with FireFox:

      
      <select>
         <option value="volvo" style="background-image:url(images/volvo.png);">Volvo</option>
         <option value="saab"  style="background-image:url(images/saab.png);">Saab</option>
         <option value="honda" style="background-image:url(images/honda.png);">Honda</option>
         <option value="audi"  style="background-image:url(images/audi.png);">Audi</option>
      </select>
      

      Or your other option is JQuery: http://www.marghoobsuleman.com/jquery-image-dropdown

    • +
      0 Votes
      Sven2157

      The inline style, apparently only works with FireFox:

      
      <select>
         <option value="volvo" style="background-image:url(images/volvo.png);">Volvo</option>
         <option value="saab"  style="background-image:url(images/saab.png);">Saab</option>
         <option value="honda" style="background-image:url(images/honda.png);">Honda</option>
         <option value="audi"  style="background-image:url(images/audi.png);">Audi</option>
      </select>
      

      Or your other option is JQuery: http://www.marghoobsuleman.com/jquery-image-dropdown