Rollover texte progressif

Version imprimable

23/10/2008, 17h20
Molliug

Rollover texte progressif

Hello tout le monde!

Je sais que le titre peut faire hurler des choses du genre "POUAHH ENCORE DES ROLLOVER" ou encore des "MATE SUR GOOGLE", mais impossible de trouver le simple (je pense) script que je désire. :mrgreen:

J'ai un menu avec du simple texte, un a:hover dans ma CSS qui change la couleur du lien au survol, et je voudrais que ce rollover se fasse progressivement et non pas directement.

J'ai lu des solutions compliquées et surtout adaptées à des images, mais rien de bien concret pour ce que je cherche. Et je ne pense pas qu'il y ai besoin de passer par des Framework du genre prototype .

Merci d'avance pour vos éclaircissements ! ;)
25/10/2008, 01h33
bigboomshakala

du coup pas de classe css pour la couleur. tu lui donnes une couleur de départ, au survol (mouseover) tu déclenches une fonction avec un timer et cette fonction incrémente (ou décrémente) la couleur. et tu peux faire l'effet inverse sur le mouseout.
25/10/2008, 02h07
Molliug

Merci bien pour ta reponse ;)

Si je comprends bien, fini le :hover dans la css, je dois gérer mon rollover entièrement en JS .

Je ne sais pas encore comment coder cette fonction, mais pense tu qu'il y aurait des risques que certains navigateurs ( dont un qui me répugne dont je ne citerais pas le nom :roll: ) la bloquent ?

Si quelqu'un connaît une sorte de tuto à ce sujet, je suis preneur !

:aie: je suis vraiment trop geek...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<HTML>
    <head>
        <style>
.vertical a {
  color: white;
  background-color: #000080;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  padding: 5px;
  border: 2px outset #c0c0c0;
  display: block;
  width: 100px;
}
.vertical a:hover {
  background-color: #6495ED;
  background-image: url(aqua.jpg);
  border: 2px inset #c0c0c0;
}
        </style>
    </head>
 <BODY>
  <SCRIPT><!--
 
var RED = {
    "1" : 0,
    "2" : 0,
    "3" : 0
};
var GREEN = {
    "1" : 0,
    "2" : 0,
    "3" : 0
};
var BLUE = {
    "1" : 128,
    "2" : 128,
    "3" : 128
};
 
var timer = null;
 
function over(id)
{
    RED[id] = RED[id]+5;
    BLUE[id] = BLUE[id]-5;
    var a = document.getElementById(id);
    a.style.backgroundColor = "rgb(" + RED[id] + "," + GREEN[id] + ", " + BLUE[id] + ")";
 
    if (BLUE[id]>-1)
        run("over('" + id + "')");
    else
        stop();
}
 
function out(id)
{
    RED[id] = RED[id]-5;
    BLUE[id] = BLUE[id]+5;
    var a = document.getElementById(id);
    a.style.backgroundColor = "rgb(" + RED[id] + "," + GREEN[id] + ", " + BLUE[id] + ")";
 
    if (RED[id]>-1)
        run("out('" + id + "')");
    else
        stop();
}
 
function run(x){
    timer = setTimeout(x,1);
}
 
function stop(){
    if (timer)
        clearTimeout(timer);
}
 
  --></SCRIPT>
<div id="roll" class="vertical">
  <p>
    <a href="#" id="1" onmouseover="over(this.id)" onmouseout="out(this.id)">1e Bouton</a>
    <a href="#" id="2" onmouseover="over(this.id)" onmouseout="out(this.id)">2e Bouton</a>
    <a href="#" id="3" onmouseover="over(this.id)" onmouseout="out(this.id)">3e Bouton</a>
  </p>
</div>
 </BODY>
</HTML>

25/10/2008, 02h36
Molliug

Non seulement c'est rapide mais en plus c'est complet :mrgreen: !

Vraiment royal, je teste ça demain et je te tiens au courant !

Good night !

ah oui, j'avais fait un truc comme ça autrefois; c'était pour des liens ou tout autre élément; une différence dans le principe est que la couleur d'origine revient dès qu'on quitte l'objet;

http://javatwist.imingo.net/decolo.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<style type="text/css">
a {
font-size:25px;
font-weight:bold;
text-decoration:none;
color:rgb(0,255,100);
}
</style>
 
 
<script type="text/javascript"> 
var couleur;
var b=0;var c=255;d=100;
var obj;
 
function on(e){
	if(!obj){obj=window.Event ? e.target : event.srcElement};
 
	couleur="rgb("+b+","+c+","+d+")";
 
	if(b<=245){b+=10}
	else if(b>245 && c>10){c-=10}
	else if(d>0){d-=10}
 
	obj.style.color=couleur;
 
	un=setTimeout("on()",10)
}
 
function off(){
	clearTimeout(un);
	obj=false;
 
	b=0;c=255;d=100;
 
	this.style.color='rgb(0,255,100)'
}
 
</script>
 
 
</head>
<body>
 
<div id="test" style="text-align:center;margin-left:150px;margin-top:50px">
	<a href="#">truc</a><a href="#">chose</a>
	<a href="#">bidule</a><br />
	<a href="#">machin</a>
</div>
 
 
<script type="text/javascript">
//pour que tous les liens soient concernés, var liens=document.links;
 
var liens=document.getElementById('test').getElementsByTagName('a');
	for(i=0;i<liens.length;i++){
		liens[i].onmouseover=on;
		liens[i].onmouseout=off;
	}
 
</script>