---
title: "Visa bild/ikon i dropdownmeny?"
type: "forum-thread"
url: "https://www.webforum.nu/amne/webbutveckling/165247-visa-bild-ikon-i-dropdownmeny"
topic: "Webbutveckling"
topic_url: "https://www.webforum.nu/amne/webbutveckling"
author: "Guldstrand"
published: "2007-10-08T09:21:44.000Z"
updated: "2007-10-08T11:52:36.000Z"
replies: 13
views: 625
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/webbutveckling/165247-visa-bild-ikon-i-dropdownmeny"
---

# Visa bild/ikon i dropdownmeny?

## #1 — Guldstrand, 2007-10-08T09:21Z

Som det är nu, så hämtar jag information från mysql till en dropdownmeny i ett **formulär**.
Nu är frågan, finns det möjlighet att visa en bild/ikon + namnet i menyn "\<option\>"?

Om ja, tacksam för exempelkod på detta.

Permalänk: https://www.webforum.nu/p/165247

## #2 — oskars, 2007-10-08T09:33Z

Det vore ju riktigt jävla nice om det gick, men tror tyvärr inte att det är möjligt med \<option\>.

Google hjälpte mig lite:

<http://forums.htmlhelp.com/lofiversion/index.php/t1137.htmlhttp://lab.artlung.com/form-image-background/>
<http://lab.artlung.com/form-image-background/>

FF verkar stödja det, men inte IE.

Permalänk: https://www.webforum.nu/p/2037184

## #3 — Guldstrand, 2007-10-08T09:40Z

> **oskars skrev:**
>
> Det vore ju riktigt jävla nice om det gick, men tror tyvärr inte att det är möjligt med \<option\>.
> 
> Google hjälpte mig lite:
> 
> <http://forums.htmlhelp.com/lofiversion/index.php/t1137.htmlhttp://lab.artlung.com/form-image-background/>
> <http://lab.artlung.com/form-image-background/>
> 
> FF verkar stödja det, men inte IE.

Visst hade det varit bra, framför allt snyggare.  ;)

Såg detta:

```
<option style="background-image: url(./linux_os_small.gif);"> Linux </option>
```

Kanske blir svårt att sätta in ett värde där från mysql? Tacksam för fler förslag.

Permalänk: https://www.webforum.nu/p/2037185

## #4 — oskars, 2007-10-08T09:45Z

Du, det har varit otroligt snygg om man kunde lösa det sådär med ikoner i option-taggarna :)

Nej nej för fan! Det är skitlätt! Så här gör du för att lägga in bilderna du sparat filnamnen för i databasen:

```
Response.Write("<option style=""background-image: url(images/"&RecSet("minBild")&");""> Linux </option>
```

Det övre funkar om du t.ex sparat filnamnet "bild01.gif" i mappen "images" på ditt webhotell!

Permalänk: https://www.webforum.nu/p/2037186

## #5 — Guldstrand, 2007-10-08T09:47Z

> **oskars skrev:**
>
> Du, det har varit otroligt snygg om man kunde lösa det sådär med ikoner i option-taggarna :)
> 
> Nej nej för fan! Det är skitlätt! Så här gör du för att lägga in bilderna du sparat filnamnen för i databasen:
>
>
> ```
> Response.Write("<option style=""background-image: url(images/"&RecSet("minBild")&");""> Linux </option>
> ```
>
> 
> 
> Det övre funkar om du t.ex sparat filnamnet "bild01.gif" i mappen "images" på ditt webhotell!

Eh, ok.. detta är väl asp?
Jag använder php samt mysql.  ;)

Permalänk: https://www.webforum.nu/p/2037188

## #6 — headbug, 2007-10-08T09:50Z

PHP/ASP/Ruby, etc, det är serverside så du borde kunna skriva det i vad som helst :) Jag gissar på något med echo... :)

Permalänk: https://www.webforum.nu/p/2037189

## #7 — oskars, 2007-10-08T09:53Z

> **Guldstrand skrev:**
>
> Eh, ok.. detta är väl asp?
> Jag använder php samt mysql.  ;)

Aha, okej, jag kan tyvärr inte PHP helhjärtat, men om du har kört MySQL och PHP sen förut, så borde du greja det här :)

Permalänk: https://www.webforum.nu/p/2037190

## #8 — Guldstrand, 2007-10-08T09:55Z

Testade med detta:

```php
echo "<option style='background-image: url(images/horoskop/{$row['bild']});' value={$row['id']}>{$row['namn']}</option>";
```

Fick dock inte fram någon bild, bara namnet.
(Testade både i ie7 samt firefox.)

Permalänk: https://www.webforum.nu/p/2037191

## #9 — oskars, 2007-10-08T10:04Z

Hur ser källkoden ut när du skriver ut det där på hemsidan?
Alltså om du tar "Visa källa" i webbläsaren... bara den raden då.

Permalänk: https://www.webforum.nu/p/2037196

## #10 — Guldstrand, 2007-10-08T10:20Z

> **oskars skrev:**
>
> Hur ser källkoden ut när du skriver ut det där på hemsidan?
> Alltså om du tar "Visa källa" i webbläsaren... bara den raden då.

Hmm.. verkar hämta allt som den ska:

```
<option style='background-image: url(images/horoskop/fiskarna.gif);' value=12>Fiskarna</option><option style='background-image: url(images/horoskop/jungfrun.gif);' value=6>Jungfrun</option><option style='background-image: url(images/horoskop/kraftan.gif);' value=4>Kräftan</option><option style='background-image: url(images/horoskop/lejonet.gif);' value=5>Lejonet</option><option style='background-image: url(images/horoskop/oxen.gif);' value=2>Oxen</option><option style='background-image: url(images/horoskop/skorpionen.gif);' value=8>Skorpionen</option><option style='background-image: url(images/horoskop/skytten.gif);' value=9>Skytten</option><option style='background-image: url(images/horoskop/stenbocken.gif);' value=10>Stenbocken</option><option style='background-image: url(images/horoskop/tvillingarna.gif);' value=3>Tvillingarna</option><option style='background-image: url(images/horoskop/vattumannen.gif);' value=11>Vattumannen</option><option style='background-image: url(images/horoskop/vagen.png);' value=7>Vågen</option><option style='background-image: url(images/horoskop/vaduren.gif);' value=1>Väduren</option>
```

Har jag missat något?
Man kan se bilderna i firefox, fast det blir rätt knasigt.

Bilagor:

- [stjarntecken_dropdown.jpg](https://www.webforum.nu/a/16094.jpg)

Permalänk: https://www.webforum.nu/p/2037200

## #11 — oskars, 2007-10-08T10:39Z

Nä, precis, det kommer troligtvis inte funka i IE.

Testa det här:

```
background:{ #000 url(images/horoskop/{$row['bild']}) no-repeat fixed left; }
```

Permalänk: https://www.webforum.nu/p/2037202

## #12 — Guldstrand, 2007-10-08T10:44Z

> **oskars skrev:**
>
> Nä, precis, det kommer troligtvis inte funka i IE.
> 
> Testa det här:
>
>
> ```
> background:{ #000 url(images/horoskop/{$row['bild']}) no-repeat fixed left; }
> ```

Det fungerade inte alls, fick inte fram någon bild nu.

Permalänk: https://www.webforum.nu/p/2037205

## #13 — Guldstrand, 2007-10-08T11:11Z

Gjorde såhär istället.

```php
echo "<option style='background-image: url(images/horoskop/{$row['bild']}); background-repeat:no-repeat; padding-left:40px;' value='{$row['id']}'>{$row['namn']}</option>";
```

Ser mycket bättre ut nu, synd bara att det inte fungerar i internet explorer.   :( 

(ny screen)

Bilagor:

- [stjarntecken_dropdown2.jpg](https://www.webforum.nu/a/16095.jpg)

Permalänk: https://www.webforum.nu/p/2037216

## #14 — oskars, 2007-10-08T11:52Z

härligt! Bra jobbat!

Jo, tråkigt faktiskt!

Permalänk: https://www.webforum.nu/p/2037222

---

Tråden på webben: https://www.webforum.nu/amne/webbutveckling/165247-visa-bild-ikon-i-dropdownmeny