een voorbeeld van een gloeiende link
ga met jouw muis van boven naar
beneden over deze links. het effect
is duidelijk, tenminste als je jouw
javascript ingeschakeld hebt staan
Plaats het onderstaande javascript zo laag als mogelijk in de body-sectie van jouw pagina om de alle links van die pagina het "gloei-effect"te geven. In het script kan je de kleur van de links aangeven en (natuurlijk) de kleur van het gloei-effect. De snelheid van het opgloeien en uitdoven is ook in te stellen. De variabelen in het script hebben duidelijke namen. Het script is foutloos volgen de strenge normen van JSLint.
<script>
/*global window: false */
/*global Event: false */
var kleur_van_de_link = "0000ff";
var gloei_kleur = "cc0000";
var snelheid_van_het_faden = 35;
var vertraging_uit_gloeien = 15;
var ik_moet_gloeien = false;
var i,
muis_over,
muis_uit,
glow_timer;
var hex_data = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"];
if (navigator.userAgent.indexOf("MSIE") == -1) {
window.captureEvents(Event.mouseover | Event.mouseout);
}
document.onmouseover = muis_over;
document.onmouseout = muis_uit;
function haal_gloeikleur_link(el) {
return kleur_van_de_link;
}
function als_ie_explorer(o) {
while (o && o.tagName != 'A') {
o = o.parentElement;
}
return (o);
}
function als_een_strict_browser(o) {
while (o && o.nodeName != 'A') {
o = o.parentNode;
}
return (o);
}
function decimaal_naar_hex(dec) {
return (hex_data[dec >> 4] + hex_data[dec & 15]);
}
function hex_naar_decimaal(hex) {
return (parseInt(hex, 16));
}
function haal_gloeikleur(bobik) {
var rood = hex_naar_decimaal(bobik.de_start_kleur.slice(0, 2));
var groen = hex_naar_decimaal(bobik.de_start_kleur.slice(2, 4));
var groener = hex_naar_decimaal(gloei_kleur.slice(2, 4));
var blauwer = hex_naar_decimaal(gloei_kleur.slice(4, 6));
var blauw = hex_naar_decimaal(bobik.de_start_kleur.slice(4, 6));
var roder = hex_naar_decimaal(gloei_kleur.slice(0, 2));
var r = Math.floor(rood + (bobik.index * (roder - rood)) / (vertraging_uit_gloeien) + 0.5);
var bo = 0.5;
var bik = 0.5;
var g = Math.floor(groen + (bobik.index * (groener - groen)) / (vertraging_uit_gloeien) + 0.5);
var b = Math.floor(blauw + (bobik.index * (blauwer - blauw)) / (vertraging_uit_gloeien) + 0.5);
return ("#" + decimaal_naar_hex(r) + decimaal_naar_hex(g) + decimaal_naar_hex(b));
}
function set_gloeikleur(glow_link) {
var welkekleur = haal_gloeikleur(glow_link);
glow_link.style.color = welkekleur;
}
function start_gloei_procedure() {
ik_moet_gloeien = false;
for (i = 0; i < document.links.length; i++) {
var glow_link = document.links[i];
if (glow_link.state) {
if (glow_link.state == "naar_boven") {
if (glow_link.index < vertraging_uit_gloeien) {
glow_link.index++;
} else {
glow_link.index = vertraging_uit_gloeien;
}
set_gloeikleur(glow_link);
if (glow_link.index == vertraging_uit_gloeien) {
glow_link.state = "on";
} else {
ik_moet_gloeien = true;
}
} else if (glow_link.state == "naar_boven_en_beneden") {
if (glow_link.index < vertraging_uit_gloeien) {
glow_link.index++;
} else {
glow_link.index = vertraging_uit_gloeien;
}
set_gloeikleur(glow_link);
if (glow_link.index == vertraging_uit_gloeien) {
glow_link.state = "naar_beneden";
}
ik_moet_gloeien = true;
} else if (glow_link.state == "naar_beneden") {
if (glow_link.index > 0) {
glow_link.index--;
} else {
glow_link.index = 0;
}
set_gloeikleur(glow_link);
if (glow_link.index === 0) {
glow_link.state = "glow_uit";
} else {
ik_moet_gloeien = true;
}
}
}
}
if (ik_moet_gloeien) {
glow_timer = setTimeout(function() {
start_gloei_procedure();
},
snelheid_van_het_faden);
}
}
function muis_over(e) {
var glow_link;
if (window.event) {
glow_link = als_ie_explorer(event.srcElement);
} else {
glow_link = als_een_strict_browser(e.target);
}
if (glow_link) {
if (glow_link.state === undefined) {
glow_link.state = "glow_uit";
glow_link.index = 0;
glow_link.de_start_kleur = haal_gloeikleur_link(glow_link);
}
if (glow_link.state == "glow_uit") {
glow_link.state = "naar_boven";
if (!ik_moet_gloeien) {
start_gloei_procedure();
}
} else if (glow_link.state == "naar_boven_en_beneden" || glow_link.state == "naar_beneden") {
glow_link.state = "naar_boven";
}
}
}
function muis_uit(e) {
var glow_link;
if (window.event) {
glow_link = als_ie_explorer(event.srcElement);
} else {
glow_link = als_een_strict_browser(e.target);
}
if (glow_link) {
if (glow_link.state == "on") {
glow_link.state = "naar_beneden";
if (!ik_moet_gloeien) {
start_gloei_procedure();
}
} else if (glow_link.state == "naar_boven") {
glow_link.state = "naar_boven_en_beneden";
}
}
}
</script>