Discussion :

[cedricbch]

Avec Dreamwaever CS4, j'ai utilisé la fonction "Rollover Image" pour avoir des boutons lien (qui mène à une autre page) composés d'une image de base et une autre image quand j'ai la souris dessus.
J'ai 30 boutons semblables, mais avec des images différentes.

Mon problème:
Je voudrais avoir une troisième image sur ces boutons qui devrait apparaître une fois que le lien a été utilisé.
Sur tous les forums, je vois que pour un lien visité il faut utilisé le CSS a:visited, mais soit je ne programme pas correctement ce style, soit ça ne fonctionne pas dans mon cas. Étant donné que ma troisième image doit remplacé la première, utilisé une image d'arrière-plan (ce que propose le CSS) ne fonctionne pas.

Je me disais qu'on doit pouvoir le faire avec une fonction javascript puisque c'est ce qui est utilisé pour le rollover, du coup j'ai essayé d'adapter le code, mais ça ne marche pas:

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
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
 
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_changeImage() { //v3.0
var i,j=0,x,a=MM_changeImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

Suite du code dans la partie html:

Code html :

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

<td><a href="ERO-S2.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image07','','images/HOME-ROLL_07.jpg',1)" onClick="MM_swapImage('Image07','','images/HOME-AFTER_07.jpg',1)"><img src="images/HOME-WEB_07.jpg" name="Image07" width="20" height="20" border="0"></a></td>

Je suis ouvert à toute solution, merci

[SpaceFrog]

Ne serait il pas plus simple d'utiliser le css avec les pseudo classes hover et visited en modifiant le background-image ?

[ABCIWEB]

Avec Dreamwaever CS4, j'ai utilisé la fonction "Rollover Image" pour avoir des boutons lien (qui mène à une autre page) composés d'une image de base et une autre image quand j'ai la souris dessus.
J'ai 30 boutons semblables, mais avec des images différentes.

Mon problème:
Je voudrais avoir une troisième image sur ces boutons qui devrait apparaître une fois que le lien a été utilisé.
Sur tous les forums, je vois que pour un lien visité il faut utilisé le CSS a:visited, mais soit je ne programme pas correctement ce style, soit ça ne fonctionne pas dans mon cas. Étant donné que ma troisième image doit remplacé la première, utilisé une image d'arrière-plan (ce que propose le CSS) ne fonctionne pas.

Ton problème vient du fait que tu as utilisé les fonctions de Dreamwaever CS4 alors qu'il fallait coder ça à la main en suivant la méthode de SpaceFrog qui te conseille la même méthode que tu vois employée dans le code source des forums : jouer sur les background.

Je ne vois pas d'autre solution que de refaire tes liens en css en jouant sur les background. Mais tu verras, c'est bien plus simple que d'employer les fonctions de dreamweaver et surtout au moins tu comprendras le code que tu fais.