Beste SD'ers,
Ik ben al een paar uur aan het puzzelen maar ik weet niet wat ik fout doe. Ik heb flink wat gegoogled en kom er echt even niet uit. Ik wil het volgende:
http://movas.nl/preview/gall/
Wat er moet gebeuren is dat als er op het plaatje links geklikt wordt het grote plaatje rechts vervangen moet worden met dat plaatje.
Mijn code ziet er als volgt uit:
Ik heb het stukje javascript van een tutorial van google. Wat er nu gebeurt is dat hij het plaatje in een nieuw scherm opent maar ik weet niet waarom. Mijn javascript kennis is zo goed als nul.Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="nl" /> <meta name="author" content="Tom de Bast"/> <meta name="keywords" content="keywords, gescheiden, met, een, komma" /> <meta name="description" content="Een korte beschrijving van de website." /> <meta name="robots" content="index, follow" /> <title>New Haven - Appartement</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" language="javascript"> function showPic (whichpic) { if (document.getElementById) { document.getElementById('placeholder')» .src = whichpic.href; if (whichpic.title) { document.getElementById('desc')» .childNodes[0].nodeValue = whichpic.title; } else { document.getElementById('desc')» .childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue; } return false; } else { return true; } } </script> </head> <body> <div id="album"> <ul id="gallery"> <li><a onclick="return showPic(this)" href="images/groot/bank.png" title="1"><img src="images/thumbnails/bank.png" alt="bank" width="102" height="102" border="0" /></a></li> <li><a onclick="return showPic(this)" href="images/groot/telefoon.png" title="2"><img src="images/thumbnails/telefoon.png" alt="telefoon" width="102" height="102" border="0" /></a></li> <li><img src="images/thumbnails/bed.png" alt="bed" width="102" height="102" border="0" /></li> <li><img src="images/thumbnails/badkamer.png" alt="badkamer" width="102" height="102" /></li> <li><img src="images/thumbnails/badkamer2.png" alt="badkamer" width="102" height="102" /></li> <li><img src="images/thumbnails/huisjes2.png" alt="huisjes" width="102" height="102" /></li> <li><img src="images/thumbnails/eettafel.png" alt="eettafel" width="102" height="102" /></li> <li><img src="images/thumbnails/flat.png" alt="flats" width="102" height="102" /></li> </ul> <img id="placeholder" src="images/groot/bank.png" width="444" height="219" border= "none"/> </div> </body> </html>
Als er meer informatie nodig is hoor ik het graag van jullie.
Ik hoop dat jullie mij kunnen helpen.
groet,
Michiel
-
13-02-2010, 20:09 #1
Movas
- Berichten
- 162
- Lid sinds
- 17 Jaar
Image Gallery
-
In de schijnwerper
SEOblog.nl - Kort en sterk - Uit 2007 - Zoekvolume EMDDomein te koopHulp bij SEO/GoogleAds (NL/BE/DE). Economy.nl Google Premier Partner.Freelance / WerkAangeboden: Freelance Online/SEO marketeerFreelance / Werkwegens beëindiging bedrijf beschikbaar | HappyHuisdier.nl DA13 - DR16Website te koop -
14-02-2010, 08:42 #2
Particulier
- Berichten
- 257
- Lid sinds
- 15 Jaar
Michiel,
Om te beginnen heb je vreemde karakters in je javascript staan die er niet thuis horen: »
Die moet je allemaal weghalen en ervoor zorgen dat er geen spaties meer staan tussen de ')' en de '.' aldaar.
Verder is het belangrijk dat de functie 'false' returnt om te voorkomen dat de browser de normale actie uitvoert; dat is de link volgen. Maar omdat jij nog geen element met de id=desc hebt gemaakt loopt de javascript daarop vast.
verder voor de netheid: 'onclick' -> 'onClick'
Nieuwe javascript:
Verder een ergens in je html een element aanmaken met de id 'desc'. Dan zou het al moeten werken.Code:function showPic (whichpic) { if (document.getElementById) { document.getElementById('placeholder').src = whichpic.href; if (whichpic.title) { document.getElementById('desc').childNodes[0].nodeValue = whichpic.title; } else { document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue; } return false; } else { return true; } }
Iedereen die websites ontwikkeld met script zou verplicht Firefox moeten gebruiken. Daarin vind je onder 'Tools' de 'Error console'. Deze is onmisbaar om fouten op te sporen in je javascript. Verder is de Firefox Add On 'Firebug' ook zeer handig als je weet hoe je ermee om moet gaan. Hiermee kun je bijvoorbeeld je script stap voor stap uitvoeren en ondertussen kijken wat de waarden van de variabelen zijn en hoe die wijzigen.
