thomas lemmens
Gebruiker
- Lid geworden
- 8 mei 2009
- Berichten
- 36
hey iedereen
ik ben bezig een site ( www.bjct.co.cc) te maken voor ons team. voor de foto's te tonen dacht ik javascript te gebruiken (ik heb absoluut geen ervaring met javascript).
op de website staan enkel de foto's van DJO 2008 en EJCC 2009 al online
op het eerste zicht werkte het maar dat was dus te mooi om waar te zijn.
de bedoeling is dat wanneer er op een kleine foto wordt geklikt er een grotere versie verschijnd. Dit doet hij niet bij de de tiende foto. dus alle foto's werken behalve foto nummer 10, 20, 30 enzovoort.
kan iemand me zeggen wat ik fout doe?
dit is mijn code
html:
css:
ik ben bezig een site ( www.bjct.co.cc) te maken voor ons team. voor de foto's te tonen dacht ik javascript te gebruiken (ik heb absoluut geen ervaring met javascript).
op de website staan enkel de foto's van DJO 2008 en EJCC 2009 al online
op het eerste zicht werkte het maar dat was dus te mooi om waar te zijn.
de bedoeling is dat wanneer er op een kleine foto wordt geklikt er een grotere versie verschijnd. Dit doet hij niet bij de de tiende foto. dus alle foto's werken behalve foto nummer 10, 20, 30 enzovoort.
kan iemand me zeggen wat ik fout doe?
dit is mijn code
html:
HTML:
<div id="grotefoto" class="grotefoto">
<img name="groot" src="../EJCC 2009/origineel/(1).jpg" />
<p>
<a href="javascript:fotoweg('grotefoto');">sluiten</a>
</p>
</div>
<div id="main">
<a href="javascript:toonGrootBeeld('EJCC 2009','1','grotefoto');">
<img name="klein" src="../EJCC 2009/thumbs/(1).jpg" alt="Klik voor groter beeld"/>
</a>
<a href="javascript:toonGrootBeeld('EJCC 2009','2','grotefoto');">
<img name="klein" src="../EJCC 2009/thumbs/(2).jpg" alt="Klik voor groter beeld"/>
</a>
<a href="javascript:toonGrootBeeld('EJCC 2009','3','grotefoto');">
<img name="klein" src="../EJCC 2009/thumbs/(3).jpg" alt="Klik voor groter beeld"/>
</a>
<a href="javascript:toonGrootBeeld('EJCC 2009','4','grotefoto');">
<img name="klein" src="../EJCC 2009/thumbs/(4).jpg" alt="Klik voor groter beeld"/>
</a>
<a href="javascript:toonGrootBeeld('EJCC 2009','5','grotefoto');">
<img name="klein" src="../EJCC 2009/thumbs/(5).jpg" alt="Klik voor groter beeld"/>
</a>
<a href="javascript:toonGrootBeeld('EJCC 2009','6','grotefoto');">
<img name="klein" src="../EJCC 2009/thumbs/(6).jpg" alt="Klik voor groter beeld"/>
</a>
<a href="javascript:toonGrootBeeld('EJCC 2009','7','grotefoto');">
<img name="klein" src="../EJCC 2009/thumbs/(7).jpg" alt="Klik voor groter beeld"/>
</a>
<a href="javascript:toonGrootBeeld('EJCC 2009','8','grotefoto');">
<img name="klein" src="../EJCC 2009/thumbs/(8).jpg" alt="Klik voor groter beeld"/>
</a>
<a href="javascript:toonGrootBeeld('EJCC 2009','9','grotefoto');">
<img name="klein" src="../EJCC 2009/thumbs/(9).png" alt="Klik voor groter beeld"/>
</a>
<a href="javascript:toonGrootBeeld('EJCC 2009','10','grotefoto);">
<img name="klein" src="../EJCC 2009/thumbs/(10).jpg" alt="Klik voor groter beeld"/>
</a>
<a href="javascript:toonGrootBeeld('EJCC 2009','11','grotefoto');">
<img name="klein" src="../EJCC 2009/thumbs/(11).jpg" alt="Klik voor groter beeld"/>
</a>
.....
</div>
javascript:
function toonGrootBeeld(map, huidigBeeld,id){
document.images['groot'].src='../'+map+'/origineel/('+huidigBeeld+').jpg';
document.getElementById(id).style.visibility = 'visible';
}
function fotoweg(id)
{
document.getElementById(id).style.visibility = 'hidden';
document.images['groot'].src='../layout afbeeldingen/logo/wachten.gif';
}
css:
Code:
.grotefoto{
visibility:hidden;
background-image: url(../layout%20afbeeldingen/achtergrond/achtergrond%20hidden%20div.png);
color: #333;
width: 800px;
margin: auto;
margin-left:200px;
position:absolute;
padding:4px;
border:2px solid #333;
}
.grotefoto img{
margin-top: 50px;
margin-bottom: 20px;
}
Laatst bewerkt door een moderator: