Bruke bilder i select i en form?

Mr Vest

Mr Vest

Sjefen over alle sjefer!
Ja, altså. Jeg har søkt litt på Google etter noe som gjør at jeg med select kan bruke bilder i form. Jeg kom frem til at det eneste som faktisk fungerte var og enten bruke Javascript eller og legge inn bildene som en bakgrunn med CSS. Ingen av de to er aktuelt for meg å bruke.

Greia er liksom det at jeg vil at brukeren skal kunne velge et bilde fra en liste de klikker frem på nettsiden. Når de har valgt bildet klikker de Submit, og så blir da altså bildet de har valgt deres nye bilde. Når jeg da ikke kan vise bilder i en slik select-boks - Hva kan jeg da bruke?

Dette var muligens ikke beste forklaring av "problemet," men håper dere forstår. :)
 
Nextri

Nextri

Rebel
Du kan bruke en radio select.
dvs at hver radio knapp har et bilde ved siden av seg.

Ha listen med bilder i en div som har en satt høyde og overflow:auto;
Dermed vil listen kun være en gitt høyde, og ha scroll slik som en select ofte har.
 
Mr Vest

Mr Vest

Sjefen over alle sjefer!
Det ser ut til at det funker ganske greit med slike radioknapper. Nå bruker jeg altså følgende kode:

Kode: 
<form action="lagre_dette_valget" method="post">

<div class="en_klasse_med_overflow_auto_og_slikt">
<Input type = 'Radio' Name ='brukerbilde' value= '1'><img src='mittbilde.gif' width='50' height='50'><br />

<Input type = 'Radio' Name ='brukerbilde' value= '2'><img src='mittbilde.gif' width='50' height='50'><br />

<Input type = 'Radio' Name ='brukerbilde' value= '3'><img src='mittbilde.gif' width='50' height='50'><br />
</div>
<input type=submit class=button id=bildeoppdatering value=\"Oppdater\">

Det jeg ser for meg at er dumt med denne løsninga er at det vil ta tid å laste siden dersom jeg har 100+ forkjellige bilder brukeren kan velge mellom. Dette vil jeg vurdere å løse ved å heller la brukeren endre dette bildet i et eget lite popupvindu.

Når jeg tenker meg litt om så gjør det ikke noe at denne krever Javascript for å fungere. Har dere tips til noen små enkle popups som kommer frem der hvor man klikker med musen hvor jeg kan vise en liten lapp hvor brukeren da kan endre bilde?

update: Ikke noe nødvendig med noen alternative løsninger allikevel. Har funnet ut at jeg vil dele alle bilder opp i kategorier, og da er det best med et skikkelig popup akkurat her. :)
 
Sist redigert:
Mr Vest

Mr Vest

Sjefen over alle sjefer!
Hmm, har du et eksempel på Javascript som kan løse dette Olafmoriarty? Det høres jo faktisk ut som en rett og slett perfekt løsning.
 
Mr Vest

Mr Vest

Sjefen over alle sjefer!
Her fant jeg frem et lite Javascript som ser ut til å fungere bra. (til dette som du olafmoriarty foreslo.) Det som altså skjer her er at vi får frem en FORM hvor vi da altså kan legge inn en SELECT. Når noen velger et valg i SELECT vil det komme frem en forhåndsvisning av et bilde. Hvilket bilde som kommer frem slenger man altså inn i koden.

Kode: 
<html>
<head>

<script>
var img1 = new Image().src = "10.jpg"
var img2 = new Image().src = "10.jpg"
var img3 = new Image().src = "10.jpg"

function setImage(imageSelect) {
 theImageIndex = imageSelect.options[imageSelect.selectedIndex].value;
 if (document.images)
     document.images[0].src = eval("img" + theImageIndex);
  }
</script>

</head>
<body>

<form name="theForm" method="post">
<select name="items" onChange="setImage(this)">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
 </select>
</form>

</body>
</html>

Denne ser ut til å fungere veldig bra her hos meg altså. Nå håper jeg inderlig ikke at alle bildene blir lastet inn og at det bare er bildene jeg selv har valg i SELECT-greia som blir lastet inn. Det får jeg teste når jeg orker å bry meg mer med det. :)
 
Du må logge inn eller registrere deg for å svare her.
Topp