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: |
<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. |
|