Afbeelding wisselen in spry accordeon tab

[howywowy]

Afbeeldingswissel in spry accordeon

Hallo ik heb twee vragen:

1) Ik heb met dreamweaver CS3 een spryaccordeon (spry collapsible panel) gemaakt en in de panel tab een onmouseover gezet waardoor er een plaatje wisselt (image swap).
Dat werkt op zich goed, maar nu wil ik dat bij een opengeklapt panel ook het plaatje dat bij de betreffende inhoud hoort getoond blijft. Dat werkt nu niet goed.

Bij het wisselen in de accordeon wordt dus niet het bijbehorende plaatje weergegeven, maar blijft het plaatje van de eerste accordeon staan.
Probeer het even uit (http://screencast.howardwoei.nl) als je wilt. Dan zie je misschien beter wat ik bedoel.

Weet iemand wat ik waar moet aanpassen om ervoor te zorgen dat bij het openklappen van een panel het bijbehorende plaatje getoond blijft?

2) Daarnaast wil ik graag een driehoekje hebben in de panel tab, dat omlaag wijst als het panel geopend is en naar rechts wijst als het panel gesloten is.(zoals dat ook in Finder werkt). Weet iemand hoe ik dat in de panel tab krijg?

Bedankt alvast.

 

[csshunter]

Hoi HowyWowy,
Dreamweaver's swap-Img-functie gaat niet lekker samen met de Spry accordion. De swapper gaat uit van een vast plaatje dat moet wisselen, en niet van een wisselend plaatje dat moet wisselen! Oftewel: hij kan niet onthouden waar je gebleven was. Nadeel van die voorgebakken scipts: moeilijk naar je hand te zetten.
Maar met een andere (eenvoudiger) swap-functie kan het wel: recht op het doel af.
Eerst een ID geven aan het start-plaatje dat moet wisselen:

<img id="imgWissel" src="Jezus_en_maria.JPG" ... enz.

Nu kan je het script laten vertellen in welke gevallen er wat met dat plaatje moet gebeuren:

<script type="text/javascript">
    var jezus="Jezus_en_maria.JPG"; // even de src-locaties afkorten
    var ducky="VEP_voorstellen.JPG";
    var baby ="MariaGeel.JPG";
    var park ="Park_eend.JPG";
    var oldImg = jezus // bij opening van de pagina ~ bovenste accordion-tabje

function showImg(i) { // ipv de "i" ga je telkens het benodigde plaatje opgeven
    var show= document.getElementById('imgWissel'); // pak element ´imgWissel´
    show.src=i; // hup, naar de opgegeven locatie
    }
function backImg() { // als mouseout, dan oude plaatje oproepen
    var show= document.getElementById('imgWissel');
    show.src=oldImg;
    }
function newImg(i) { // als geklikt, nieuwe blijven tonen
    var show= document.getElementById('imgWissel');
    show.src=i;
    oldImg=i;  // en het nieuwe plaatje wordt het oude plaatje voor het vervolg
    }
</script>

De clou zit 'm dus in het toevoegen van de functie newImg(), want dan moet er juist niet terug-gewisseld worden naar het oude plaatje (wat anders door de mouseout in werking zou worden gezet), en in de opdracht oldImg = i, waardoor bij een nieuwe hover over de andere tabs bij de mouseout naar het "nieuwe oude plaatje" teruggegaan wordt. Daar zit z'n geheugen.
In de html gaat het oproepen telkens met:

<div class="AccordionPanelTab" 
     onmouseover="showImg(ducky)" 
     onmouseout="backImg()"
     onclick="newImg(ducky)">
     Ducky
</div>

En ten bewijze:

• een testpagina.

Bij vraag 2: de pijltjes zou je er in kunnen hangen als background-img in dezelfde <div>. De 4 opties kunnen dan elk een eigen ID meekrijgen, en met een aanvullend regeltje in het onclick-script moet de img-wissel van het pijltje te regelen zijn.

Succes!
CSShunter

PS:
Op www.screencast.howardwoei.nl werkt je link bij mij niet; wel op zonder de www: screencast.howardwoei.nl.

 

[howywowy]

Afbeeldingswissel in spry accordeon

Hee CSSHunter,

Ziet er goed uit en ik ga het uit proberen. In ieder geval alvast bedankt voor je reactie en de testsite.Ik meld nog hoe de echte implementatie verlopen is.

:d