login  Naam:   Wachtwoord: 
Registreer je!
 Scripts:

Scripts > JS > Afbeelding effecten > Easy Mouse-Over

Easy Mouse-Over

Auteur: BigTeddy - 23 oktober 2004 - 23:31 - Gekeurd door: Dennisvb - Hits: 8663 - Aantal punten: 3.63 (4 stemmen)




Wel dit scriptje kan gebruikt worden om een mouse-over effect te maken.
Het is vrij eenvoudig te gebruiken.

1) Plaats de javascript code op je pagina tussen de <head> tags
2) Kies een tag die je wilt gebruiken om je mouse-over img mee aan te duiden. vb hscr, over, vernieuw, ....
3) Verander de waarde van rtag in de waarde van je gekozen tag in je script

Voor je <img> tag wordt het dan het volgende.

Als je vernieuw hebt gekozen =>
<img border="0" src="een_plaatje.gif" vernieuw="een_ander_plaatje.gif" />

Als je over hebt gekozen =>
<img border="0" src="een_plaatje.gif" over="een_ander_plaatje.gif" />

Als je koffie hebt gekozen =>
<img border="0" src="een_plaatje.gif" koffie="een_ander_plaatje.gif" />

Je ziet dus dat je kan kiezen welk attribuut je gebruikt.

Code:
  1. <script type="text/javascript">
  2. function init()
  3. {
  4. if (!document.getElementById) return
  5. rtag = "rf";
  6. var imgOriginSrc;
  7. var imgTemp = new Array();
  8. var imgarr = document.getElementsByTagName('img');
  9. for (var i = 0; i < imgarr.length; i++)
  10. {
  11. if (imgarr[i].getAttribute(rtag))
  12. {
  13. imgTemp[i] = new Image();
  14. imgTemp[i].src = imgarr[i].getAttribute(rtag);
  15. imgarr[i].onmouseover = function()
  16. {
  17. imgOriginSrc = this.getAttribute('src');
  18. this.setAttribute('src',this.getAttribute(rtag))
  19. }
  20. imgarr[i].onmouseout = function(){this.setAttribute('src',imgOriginSrc)}
  21. }
  22. }
  23. }
  24. onload=init;
  25. </script>
Download code! Download code (.txt)

 Stemmen
Niet ingelogd.

 Reacties
Post een reactie
Lees de reacties (5)
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.022s