popup Nr. 11 (van coderunner)-opgelost-

[astra]

Hallo,

Enkele maanden geleden ben ik geweldig geholpen geweest door Coderunner en Dave ivm popup Nr. 11.
En nu zijn we er weer met een nieuw probleempje.
Er zijn er wel meerdere, maar laat ons beginnen met het eerste :

Ik probeer de popup Nr. 11 van Coderunner te gebruiken in een andere pagina om bij "mouse over" een kleine afbeelding groter te tonen, maar lukt langs geen kanten om de grotere afbeelding tevoorschijn te laten komen.

http://www.powerpoint-effecten.be/tekenen.html
Het is de onderste afbeelding met libelle (met witte puntjes) die ik graag wil vergroten.

Mag ik nogmaals jullie hulp inroepen?
Alvast bedankt!
Astra

[coderunner]

Beste astra,

Er staan enkele fouten in waardoor het javascript niet kan werken en de grotere foto niet getoond kan worden nl.

1- Zoek in de broncode van pagina "tekenen.html" naar (regel 148-161)

<script type="text/javascript">
<script type="text/javascript">
<!--
<script type="text/javascript">
<!--
function hide(){
for (teller=1; teller<9; teller+=1) // 4 = aantal afbeeldingen + 1
document.getElementById('nr'+teller).style.display='none';}
function show(nr){
document.getElementById(nr).style.display='block';}
window.onload="hide()";
// -->

</script>

- Je hebt de javascript code geopend in een javascript en dan nog eens geopend ... zie rode tekst.
Dus de rode tekst mag al weg.
- Verder gaat het hier om 1 foto te vergroten. In jouw script staan er 8 (8+1=9) ... zie oranje tekst
Moet dus 1+1 = "2" zijn.

Dus de verbeterde code is dan

<script type="text/javascript">
<!--
function hide(){
for (teller=1; teller<2; teller+=1) // 4 = aantal afbeeldingen + 1
document.getElementById('nr'+teller).style.display='none';}
function show(nr){
document.getElementById(nr).style.display='block';}
window.onload="hide()";
// -->
</script>

2- Je hebt de div's niet geplaatst in je broncode daar waar de kleinde foto staat en daar waar de grotere foto moet komen maar ze staan wel gedefinieerd in de style zijnde "beeld" en "inhoud". Plaats de div op de juiste plaats. Zoek in de code naar (regel 224-225)

<a href="#" onmouseover="show('nr1')" onmouseout="hide();"><img src="afbeeldingen/libelle_groepen_groot.jpg" alt="afbeeldingen/libelle_groepen_klein.jpg" width="154" height="132" /></a></p>
<div id="nr1"><span class="stijl22"color: #990000;><img src="afbeeldingen/libelle_groepen_groot.jpg" alt="afbeeldingen/libelle_groepen_klein" /><br/>voorbeeld van tekening</span></div> </div>

en vervang deze door

<div id="beeld">
<a href="#" onmouseover="show('nr1')" onmouseout="hide();"><img src="afbeeldingen/libelle_groepen_groot.jpg" alt="afbeeldingen/libelle_groepen_klein.jpg" width="154" height="132" /></a></p>
<div id="inhoud">
<div id="nr1"><span class="stijl22"color: #990000;><img src="afbeeldingen/libelle_groepen_groot.jpg" alt="afbeeldingen/libelle_groepen_klein" /><br/>
voorbeeld van tekening</span>
</div>
</div>

De blauwe tekst werd er aan toegevoegd.

Ziezo, na bovenstaande verbeteringen te hebben aangebracht, moet het werken zoals hier en anders geef je maar een seintje, dan kijk ik je broncode terug na.

Succes!

mvg,
Coderunner

[astra]

Perfect Coderunner!
Heel hartelijk bedankt voor je vlugge reactie en aangebrachte oplossing.

En nu het volgend probleempje voorleggen in een nieuwe topic.

Met vriendelijke groetjes
Astra

[coderunner]

Beste astra,

Bedankt om dit hier te melden.

mvg,
Coderunner

@moderator: Probleem opgelost!