Formulier moet een foto openen ipv url

Status
Niet open voor verdere reacties.

sjefmeijman

Gebruiker
Lid geworden
15 sep 2009
Berichten
5
Hallo,
Ik ben bezig met een website waarop een 3 keuzes gemaakt moeten uit steeds 3 waarden. iedere gekozen mogelijkheid zou één foto op de pagina moeten laten zien.
ik heb nu een script gevonden die iets soortgelijks doet, alleen opent dit script een nieuwe pagina.
weet iemand wat ik moet veranderen om ipv een nieuwe url een nieuwe foto te krijgen?


</script>
<script language="JavaScript">
<!-- Original: Ronnie T. Moore, Editor -->
<!-- Voor de leukste scripts gaat u naar...-->
<!-- Javascript by Con-nect.nl The source for all your Javascript and PHP -->
<!-- http://www.con-nect.nl -->
<!-- Begin
site = "http://www.sjefmeijman.nl"; // Do not include the final "/"
function combineMenus(frm, menu1, menu2,menu3) {
with (frm) {
str = menu1.options[menu1.selectedIndex].value;
str += menu2.options[menu2.selectedIndex].value;
str += menu3.options[menu3.selectedIndex].value;
url = site + "/" + str + ".html";
window.location.href = url;
}
}
// End -->


alvast dank
sjef
 
gebruik je image met een id. Deze code bijvoorbeeld:


HTML:
<form>
   <select id='s1'>
      <option value='1'>1</option>
      <option value='2'>2</option>
   </select>
   <select id='s2'>
      <option value='1'>1</option>
      <option value='2'>2</option>
   </select>
   <select id='s3'>
      <option value='1'>1</option>
      <option value='2'>2</option>
   </select>

   <input type='submit' onclick="setImg('s1','s2','s3'); return false;" />
</form>

<img src='standaard.jpg' id='plaatje' alt='plaatje' />
[JS]var obj = document.getElementById('plaatje');

function setImg(s1,s2,s3)
{
var w1 = document.getElementById(s1).value;
var w2 = document.getElementById(s2).value;
var w3 = document.getElementById(s3).value;
obj.src = 'images/' + w1 + w2 + w3 + '.jpg'; //verander optioneel
}
[/JS]
je moet dus alle plaatjes in de map 'images/' zetten, of gewoon de regel waar 'verander optioneel' aanpassen. Nu zijn de foto's dus bijvoorbeeld 111.jpg, 112.jpg, etcetera. Verander dit door de 'value' van elke '<option>' te veranderen.

:thumb:
 
Laatst bewerkt:
dank je wel.
het lukt alleen niet helemaal goed. kan je uitleggen wat je bedoelt met je image als een id te gebruiken? misschien gaat daar wat fout....?
 
sla dit eens op als test.html:
HTML:
<html>
<body>

<form>
   <select id='s1'>
      <option value='1'>1</option>
      <option value='2'>2</option>
   </select>
   <select id='s2'>
      <option value='1'>1</option>
      <option value='2'>2</option>
   </select>
   <select id='s3'>
      <option value='1'>1</option>
      <option value='2'>2</option>
   </select>
 
   <input type='submit' onclick="setImg('s1','s2','s3'); return false;" />
</form>
 
<img src='standaard.jpg' id='plaatje' alt='plaatje' />

<script>
var obj = document.getElementById('plaatje');
 
function setImg(s1,s2,s3)
{
   var w1 = document.getElementById(s1).value;
   var w2 = document.getElementById(s2).value;
   var w3 = document.getElementById(s3).value;
   alert('images/' + w1 + w2 + w3 + '.jpg');   //verander optioneel
}
</script>

</body>
</html>
je krijgt een alert als je op de knop drukt. Zoals je ziet krijg je steeds een link te zien.


:thumb:
 
ja dat klopt.
ik heb in de map images als test wel al foto 222.jpg aangemaakt.
die opent hij nu niet, wel het linkje image/222,jpg
 
UUhhm... ik denk dat we een beetje langs elkaar aan het praten zijn.

Download dit zip bestand eens (bijlage) en open test.html. Verander eens een paar keer de cijfers (bv. 122, 112, 111). Zie je hoe het plaatje veranderd?

Nu, is dit wat je wilde, of niet?



:thumb:
 

Bijlagen

gelukt!

beetje bij beetje begin ik het te begrijpen.

je hebt me het script gegeven waar ik wat mee kan!
super!
 
Laatst bewerkt:
geen probleem hoor, als je nog wat tegenkomt, gewoon posten. (maar zelf proberen is altijd leuker, ook al duurt het langer!)


:thumb:
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan