Afbeelding veranderen met klikken

Status
Niet open voor verdere reacties.
nuffie11

nuffie11

Gebruiker
Lid geworden
1 jul 2011
Berichten
62
Hallo,

Ik zoek een manier om een afbeelding te laten veranderen als je er op klikt. Het zelfde als de mobiele website van Google, het menu logootjes (drie streepjes) veranderd als je er op klikt, het wordt donkerder, en als je er weer een keer op klikt, wordt het weer lichter. (Een beetje duidelijk zo?) Dit wil ik ook graag. Iemand een idee?

Alvast bedankt!

Groetjes, Daan
 
Dat werkt met verschillende plaatjes en mouseover en onclick.

MouseOver Button Wizzard is een handig programmaatje die de code maakt voor je.

Hier te downloaden: http://www.mobw.net/
 
Laatst bewerkt:
Bedankt voor de reactie! Onclick is toch enkel als je er op klikt, hij moet het plaatje vasthouden als je er weer met je muis vanaf gaat. En als je er dan wéér een keer op klikt moet het oude plaatje weer komen... En dat gaat niet met dat programmaatje?
 
Nee, het programmaatje houdt het plaatje niet vast, alleen MouseOver en OnClick.
 
Het kan waarschijnlijk ook wel met CSS, maar het makkelijkste is het met twee verschillende plaatjes (in dit voorbeeld pr1.jpg en pr2.jpg):
HTML: 
<html>
<head>
<script type="text/javascript">
function veranderPlaatje(img)
{
  if(img.getAttribute('src') == 'pr1.jpg')
  {
    img.src = 'pr2.jpg';
  }
  else
  {
    img.src = 'pr1.jpg';
  }
}
</script>
</head>
<body>
<img src="pr1.jpg" onClick="veranderPlaatje(this)">
</body>                                                                                                  
</html>
 
Laatst bewerkt:
Hoi-hoi!
Ja, deze code werkt feilloos in Firefox, Chrome, Opera en Safari.
Maar in elk geval in Internet Explorer 7 werkt het bovenstaande niet, als je in de html een relatief pad voor het image gebruikt.
IE7 geeft namelijk het complete pad van het image terug ("http://www.domeintjesnaam.nl/.../pr1.jpg"), en niet het opgegeven relatieve pad. Dan gaat de vergelijking niet op, en gebeurt er niets...

  • Test: toggleClick-a.htm
  • (IE8 en IE9 niet getest, dus of die het er beter van af brengen, weet ik niet)

Oplossing 1
... is natuurlijk om alle verwijzingen in de functie met absolute paden te doen, dan kan er nooit iets fout gaan. D.w.z. als je niet vergeet dat het altijd het complete pad moet zijn; wat bij een aanpassing over een half haar wel eens uit het geheugen weggezakt kan zijn (of wat vergeten kan worden te melden aan een opvolgende webmaster).
Lijkt me geen duurzame oplossing!

Oplossing 2
Controleren of in de src van het image de naam van het image wordt aangetroffen, met indexOf(...).
Zowel bij het absolute pad als bij een relatief pad is dat het geval (voor het getoonde image), en dan kan de functie verder:
[JS]<script type="text/javascript">
function veranderPlaatje(img)
{
if (img.src.indexOf('images/handje-up.gif')!=-1)
{
img.src = 'images/handje-down.gif';
}
else
{
img.src = 'images/handje-up.gif';
}
}
</script>[/JS]
Oplossing 3
Je kan er ook een flip-flop van maken met een variabele die om en om aan/uit gezet wordt:
[JS]<script type="text/javascript">
var flipflop=0;

function veranderPlaatje(img)
{
if (flipflop==0)
{
img.src = 'images/handje-down.gif';
flipflop=1;
}
else
{
img.src = 'images/handje-up.gif';
flipflop=0;
}
}
</script>[/JS]
Met vriendelijke groet,
CSShunter
________
PS: Met css kan het niet. Css kan prima gebruikt worden voor een (tijdelijke) image-wissel bij een hover, maar verder ben je op javascript aangewezen: een onclick is een interactie van de bezoeker en daar is javascript-functionaliteit voor nodig.
 
Ik heb hier geen Internet Explorer (ik gebruik Linux), dus heb ik het niet kunnen testen in die browser.

Wat betreft CSS heb ik me wat ongelukkig uitgedrukt. Wat ik bedoelde was eigenlijk de combinatie van CSS en Javascript (element.style). De TS had het over donkerder en lichter worden van de plaatjes en dat kan je bereiken met CSS (en Javascript) zonder dat je twee verschillende plaatjes nodig hebt (door met Javascript de "opacity" aan te passen).
 
Ah, inderdaad, je hebt gelijk: als het alleen om het donkerder of lichter maken gaat, dan kan met een onclick-javascript de css-eigenschap opacity aangepast worden.

  • Het is dan wel even oppassen voor Internet Explorer 8, die twee IE-only filters nodig heeft om de opacity-eigenschap te ondersteunen (zie hier op quirksmode). De cross-browser methode wordt dan:
    [JS]function setOpacity(obj, opacity) { // opacity in te stellen tussen 0 en 100
    obj.style.MSFilter = "progid:DXImageTransform.Microsoft.Alpha(Opacity="+opacity+")"; // IE8
    obj.style.filter = "alpha(opacity:"+opacity+")"; // older IE/Win & IE8 as IE7
    obj.style.KHTMLOpacity = opacity/100; // Safari<1.2, Konqueror
    obj.style.MozOpacity = opacity/100; // older Mozilla and Firefox
    obj.style.opacity = opacity/100; // modern browsers
    }[/JS]
  • Om dit te omzeilen, kan één van bovenstaande scripts met 2 plaatjes gebruikt worden.
  • Of ook met één plaatje: je kunt een css-sprite maken met de twee plaatjes naast elkaar, die er als background-img in gezet worden. Dan kan je met javascript de background-position aanpassen en het benodigde gedeelte tonen.
Alweer: vele wegen naar Rome! :)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan