Image in spiegelbeeld tonen met selectmenu.

[yammaski]

Is het mogelijk om met javascript een image in spiegelbeeld te tonen via een selectmenu.
Het is niet de bedoeling dat de image vervangen wordt door een andere image, maar dezelfde image zou gewoon geflipt moeten worden.

Zie testpagina.

Als je "Ja, spiegelbeeld" selecteert, moet de image dus horizontaal geflipt worden.

Via Google heb ik tevergeefs niets bruikbaars gevonden, iemand een idee of voorstel ?


Alvast bedankt,
Yam.

 

[stefanz]

Dan zul je gebruik van css moeten maken, zie hier:

<style>
#spiegel
{
 -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}
</style>

<img id="normaal" src="http://www.stickers.be/X_Tests/Flip_Image/arend-1.gif" width="299" height="300">
<input type="button" onclick="document.getElementById('normaal').id = 'spiegel';" value="spiegel">
<input type="button" onclick="document.getElementById('spiegel').id = 'normaal';" value="normaal">

Die select box moet je zelf er maar in zetten

 

[yammaski]

Werkt goed zoals je ziet op de aangepaste testpagina ... thanks.

Maar niet in alle browsers zoals Chrome en IE 8. Chrome ondersteund normaal toch CSS3 dacht ik !?
Ik heb je css code dan eens getest met W3schools-CSS3 transform property, en daar werkt het wel. Bij mij in Chrome niet ... vreemd !?

Als het niet werkt in oudere browsers maakt zoveel niet uit. Ik kan een vermelding maken dat het enkel werkt met up to date browsers.

 

[yammaski]

Opgelost !