Easy Mouse-Over

Auteur: BigTeddy - 23 oktober 2004 - 23:31 - Gekeurd door: Dennisvb - Hits: 8662 - 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:

php code - Bekijk de code zonder highlighting - Klap code in

<script type="text/javascript">
function init()
{
  if (!document.getElementById) return
  rtag = "rf";
  var imgOriginSrc;
  var imgTemp = new Array();
  var imgarr = document.getElementsByTagName('img');
  for (var i = 0; i < imgarr.length; i++) 
  {
    if (imgarr[i].getAttribute(rtag))
    {
      imgTemp[i] = new Image();
      imgTemp[i].src = imgarr[i].getAttribute(rtag);
      imgarr[i].onmouseover = function() 
      {
        imgOriginSrc = this.getAttribute('src');
        this.setAttribute('src',this.getAttribute(rtag))
      }
      imgarr[i].onmouseout = function(){this.setAttribute('src',imgOriginSrc)}
    }
  }
}
onload=init;
</script>

<script type="text/javascript">
function init()
{
  if (!document.getElementById) return
  rtag = "rf";
  var imgOriginSrc;
  var imgTemp = new Array();
  var imgarr = document.getElementsByTagName('img');
  for (var i = 0; i < imgarr.length; i++) 
  {
    if (imgarr[i].getAttribute(rtag))
    {
      imgTemp[i] = new Image();
      imgTemp[i].src = imgarr[i].getAttribute(rtag);
      imgarr[i].onmouseover = function() 
      {
        imgOriginSrc = this.getAttribute('src');
        this.setAttribute('src',this.getAttribute(rtag))
      }
      imgarr[i].onmouseout = function(){this.setAttribute('src',imgOriginSrc)}
    }
  }
}
onload=init;
</script>

Download code (.txt)

Stemmen

Niet ingelogd.

Reacties

Post een reactie

Lees de reacties (5)