Rollover texte progressif

**Molliug** · 23/10/2008, 17h20

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.

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 !

**bigboomshakala** · 25/10/2008, 01h33

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.

**Molliug** · 25/10/2008, 02h07

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

) la bloquent ?

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

**bigboomshakala** · 25/10/2008, 02h18

je suis vraiment trop geek...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Molliug** · 25/10/2008, 02h36

Non seulement c'est rapide mais en plus c'est complet

!

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

Good night !

**javatwister** · 25/10/2008, 07h50

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

Rollover texte progressif

JavaScript

Discussions similaires

Partager

Partager