Välj bilder med hjälp av dropdown menyer

---- formuläret ----
<form action="bild.html" method="get">
<select name="bild1">
<option value="har1">grått hår</option>
..
</select>
..
<input type="submit" value=" visa gubben ">

---- bildsidan ----
<Script language="JavaScript">
function getVar(varname) {
var st = location.search;
if (st.indexOf(varname) != null)
{
var tempst = st.substring(st.indexOf(varname + "=") + varname.length + 1,st.length); 
if (tempst.indexOf("&") != -1) 
{ 
var newtemp = tempst.substring(0, tempst.indexOf("&")); 
return newtemp; 
} else { 
return tempst; 
} 
} 
}

var bild1 = getVar("bild1");
...

document.write("<img src='gubbe/"+bild1+".gif' border=0>");
...

funkar ?

Eh jag e inte så hemma på javascript. Du tror inte du kan förklara det lite bättre? :q

Kul grej.

Formulär, val.html

<form action="bild.html" method="get">
<select name="bild1">
<option value="har1">grått hår</option>
<option value="har2">blått hår</option>
<option value="har3">rött hår</option>
</select>
<select name="bild2">
<option value="mage1">grå mage</option>
<option value="mage2">blå mage</option>
<option value="mage3">röd mage</option>
</select>
<select name="bild3">
<option value="ben1">grå ben</option>
<option value="ben2">blå ben</option>
<option value="ben3">röda ben</option>
</select>

<input type="submit" value=" visa gubben ">
</form>

bild.html

<Script language="JavaScript">
function getVar(varname) {
var st = location.search;
if (st.indexOf(varname) != null)
{
var tempst = st.substring(st.indexOf(varname + "=") + varname.length + 1,st.length); 
if (tempst.indexOf("&") != -1) 
{ 
var newtemp = tempst.substring(0, tempst.indexOf("&")); 
return newtemp; 
} else { 
return tempst; 
} 
} 
}

var bild1 = getVar("bild1");
var bild2 = getVar("bild2");
var bild3 = getVar("bild3");

document.write("<img src='gubbe/"+bild1+".gif' border=0><br>");
document.write("<img src='gubbe/"+bild2+".gif' border=0><br>");
document.write("<img src='gubbe/"+bild3+".gif' border=0><br>"); 
</script>

Bilderna heter nu:

har1.gif
har2.gif
har3.gif

mage1.gif
mage2.gif
mage3.gif

ben1.gif
ben2.gif
ben3.gif

Ja det var en bra bit på vägen. Bara en lite modifiering. Kan man ha så att när man väljer ett alternativ så visas gubben direkt.
För jag ska ha det på en registrerings sida där man fyller i andra uppgifter också. Därför så kan det vara bra att man får se vilket man valt och om man vill byta så att det går fort. Sedan när man fylt i allt och valt sin gubbe ska det skickas via formuläret.

Annars, var det en bra början :birp

Går det?

I princip behöver du ju bara lägga allt i en fil.

<form action="bild3.html" method="get">
<select name="bild1">
<option value="har1">grått hår</option>
<option value="har2">blått hår</option>
<option value="har3">rött hår</option>
</select>
<select name="bild2">
<option value="mage1">grå mage</option>
<option value="mage2">blå mage</option>
<option value="mage3">röd mage</option>
</select>
<select name="bild3">
<option value="ben1">grå ben</option>
<option value="ben2">blå ben</option>
<option value="ben3">röda ben</option>
</select>

<input type="submit" value=" visa gubben ">
</form>
<Script language="JavaScript">
function getVar(varname) {
var st = location.search;
if (st.indexOf(varname) != null)
{
var tempst = st.substring(st.indexOf(varname + "=") + varname.length + 1,st.length); 
if (tempst.indexOf("&") != -1) 
{ 
var newtemp = tempst.substring(0, tempst.indexOf("&")); 
return newtemp; 
} else { 
return tempst; 
} 
} 
}

var bild1 = getVar("bild1");
var bild2 = getVar("bild2");
var bild3 = getVar("bild3");

if (bild1 != "")
{
document.write("<img src='gubbe/"+bild1+".gif' border=0><br>");
document.write("<img src='gubbe/"+bild2+".gif' border=0><br>");
document.write("<img src='gubbe/"+bild3+".gif' border=0><br>"); 
}
</script>

Red. kanske kan man göra så...

Visserligen. Men jag kan inte ha knappen "Visa gubbe" för om man har den och trycker där så kommer gubben fram men den andra informationen försvinner ju och man kanske eventuellt vill kolla på dem olika alternativen som finns.

Alltså, hade man inte på något sätt kunna utan behöva någon formulär knapp ändra sin gubbe utan att behöva skicka det?

Så att man sedan när man tycker den är bra och har fyllt i den andra informationen så kan det skickas då.

Går det?

Ingen som kan?

Ett annat alternativ.

Annars är ett hett tips att du tittar hur de gjort på playdo, för det var väl där de hade ett liknande!?!

<html>
<head>
<!--
This file retrieved from the JS-Examples archives
[url]http://www.js-examples.com[/url]
100s of free ready to use scripts, tutorials, forums.
Author: JS-Examples - [url]http://www.js-examples.com/[/url] 
-->

</head>
<body>

<img src="js/pic3.gif" width="25" height="25" border="0" name="flyer"><br> 
<img src="js/pic3.gif" width="25" height="25" border="0" name="flyer1"><br> 
<img src="js/pic3.gif" width="25" height="25" border="0" name="flyer2"><br> 

<script>
var _img = new Array();
    _img[0] = new Image(); _img[0].src="js/pic1.gif";
    _img[1] = new Image(); _img[1].src="js/pic2.gif";
    _img[2] = new Image(); _img[2].src="js/pic3.gif";
    _img[3] = new Image(); _img[3].src="js/pic4.gif";
    _img[4] = new Image(); _img[4].src="js/pic5.gif";
    _img[5] = new Image(); _img[5].src="js/pic6.gif";
    _img[6] = new Image(); _img[6].src="js/pic7.gif";
    _img[7] = new Image(); _img[7].src="js/pic8.gif";
function doIt(_obj,bild)
{
  if(!_obj)return;
  var _index = _obj.selectedIndex;
  if(!_index)return;
  var _item  = _obj[_index].value;
  if(!_item)return;
  if(_item<0 || _item >=_img.length)return;
  document.images[bild].src=_img[_item].src;
}
</script>
<form  action="skickat.asp" method="post" > 
<select onchange="doIt(this,'flyer')" name="noll" >
<option value="">Select a Picture</option> 
<option value="0">pic 1</option> 
<option value="1">pic 2</option> 
<option value="2">pic 3</option> 
<option value="3">pic 4</option> 
</select> 
<select onchange="doIt(this,'flyer1')"  name="ett" >
<option value="">Select a Picture</option> 
<option value="0">pic 1</option> 
<option value="1">pic 2</option> 
<option value="2">pic 3</option> 
<option value="3">pic 4</option> 
</select> 
<select onchange="doIt(this,'flyer2')"  name="tva" >
<option value="">Select a Picture</option> 
<option value="4">pic 5</option> 
<option value="5">pic 6</option> 
<option value="6">pic 7</option> 
<option value="7">pic 8</option> 
</select>
<input type="submit" value="Skicka">
</form> 
</body>
</html>