PDA

View Full Version : [HTML] link lampeggianti mouseover

sarais
05-01-2007, 03:18
ciao,
qualcuno potrebbe spiegarmi come far lampeggiare un link solo quando ci si passa sopra con il mouse? mi basterebbe una cosa semplice semplice, da bianco a nero a bianco ecc.
ho provato con:

<style type="text/css">
<!--
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: blink;
color: #00FFFF;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
body {
background-image: url();
background-color: #FFFFFF;
}
.style6 {
font-size: 14px;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
.style11 {
font-size: 16px;
font-family: "Times New Roman", Times, serif;
}
.style15 {font-size: 12px; font-family: Arial, Helvetica, sans-serif;}
.style20 {font-size: 12px}
.style21 {font-family: Arial, Helvetica, sans-serif}
-->
</style></head>

ovvero aggiungendo ' blink' a 'text decoration' in hover ma non funziona su nessun browser (i link si comportano normalmente, non lampeggiano)

grazie

matteo
Pro7on
05-01-2007, 08:19
mmm per esperienza personale ti dico che il blink nn è che sia molto supportato dai vari borwser e da parecchi probblemi cmq

mi sembrerebbe corretto il pezzo di codice che da style a <a>... :)


cmq booo lascia un hover normale senza il lampeggio e meglio secondo me ;)

Ciauz
andbin
05-01-2007, 09:40
Se si vuole si può realizzare una soluzione basata su Javascript. Ecco un esempio che ho appena scritto:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Prova Blink</title>
<script type="text/javascript">
<!--
var blinkObj;
var blinkState;
var blinkTimeoutID;

function startBlink (a)
{
blinkObj = a;
blinkState = 1;
toggleBlink ();
}

function stopBlink ()
{
window.clearTimeout (blinkTimeoutID);
blinkObj.style.color = "";
}

function toggleBlink ()
{
blinkObj.style.color = (blinkState ^= 1) ? "" : "white";
blinkTimeoutID = window.setTimeout (toggleBlink, 250);
}
//-->
</script>
</head>
<body>

<p>
<a href="http://www.google.com" onmouseover="startBlink(this)" onmouseout="stopBlink()">Google</a>
<br>
<a href="http://www.altavista.com" onmouseover="startBlink(this)" onmouseout="stopBlink()">Altavista</a>
</p>

</body>
</html>Testato con Firefox 2, IE 6, Opera 7 e 8.
sarais
05-01-2007, 10:21
grazie mille andbin, è perfetto!
su mac funziona con safari 1.3.2, firefox 2.0.0.1, camino 1.0a1, opera 8.5 ma non su explorer 5.2 (non è un problema, non lo usa più nessuno).
qualcuno con firefox 1, se ha tempo e voglia, può dirmi se funziona?
una sola domanda: il tempo del lampeggio


blinkTimeoutID = window.setTimeout (toggleBlink, 100);


in che unità è espresso? millisecondi?
mi serve per coordinare il lampeggio di alcune gif animate.

matteo
andbin
05-01-2007, 10:48
su mac funziona con safari 1.3.2, firefox 2.0.0.1, camino 1.0a1, opera 8.5Bene. :)

non su explorer 5.2 (non è un problema, non lo usa più nessuno).Non ho un mac quindi non potrei neanche testarlo meglio. Comunque su IE 5.5/Win funziona.

qualcuno con firefox 1, se ha tempo e voglia, può dirmi se funziona?Funziona anche su un vecchio Mozilla 1.7, quindi presumo che funzioni bene pure con Firefox 1.x.

una sola domanda: il tempo del lampeggio in che unità è espresso? millisecondi?Quel tempo specificato nella setTimeout è in millisecondi. Per come ho gestito il blink, è il tempo di durata di uno stato. Se metti 100, allora starà 100ms visibile e 100ms non visibile.
sarais
05-01-2007, 11:16
ok, ho coordinato anche le gif.
grazie ancora! :)

quando tra qualche settimana avrò finito vi posterò il link per vedere il risultato.

matteo