18073 sujets

Questions générales et questions de débutants

Dreamweaver Roll-Over avec gif animé

Bonjour, je suis débutant et j'utilise Dreamweaver 8 sur Mac.
Est ce que c'est possible de faire un Roll-Over avec au départ une image gif et de faire l'action de Roll-Over avec un Gif animé. les deux de même surfaces.
Si oui comment faire?
Est ce que cela serait lisible sur les navigateurs principaux en version accèssible pour Win 98?
Merci Kidkodak. Smiley smile
Bonjour kidkodak et bienvenue sur ce forum. Smiley smile
kidkodak a écrit :

Est ce que c'est possible de faire un Roll-Over avec au départ une image gif et de faire l'action de Roll-Over avec un Gif animé. les deux de même surfaces.

Oui ça peut se faire en suivant ce tutoriel : Une image réactive (rollover) sans javascript.

Tu n'auras qu'à remplacer la deuxième image par ton gif animé. Smiley cligne
kidkodak a écrit :

Est ce que cela serait lisible sur les navigateurs principaux en version accèssible pour Win 98?

Fouille-moé Smiley biggol
Modifié par Stephan (06 Dec 2005 - 22:42)
Salut Kidkodak....

Personnellement, je ne sais pas si cela est faisable, mais je te conseillerais de tenter ... pour voir. Il existe une option sous Dream qui te permet de faire des roll-over au moyen de deux images et, à partir du moment où le gif est accepté, je ne pense pas qu'il soit fait de distinction avec le gif animé.

Edit : Ah, Stephan a été plus rapide, mais son opinion rejoint la mienne .... Smiley cligne
Modifié par Cygnus (06 Dec 2005 - 22:43)
@ Cygnus >
En effet, Dreamweaver permet de faire une permutation aisée de deux images. Toutefois, lorsque l'on voit un code comme ceci :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Document sans nom</title>

<script language="JavaScript" 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_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_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_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>
</head>

<body onLoad="MM_preloadImages('boulet.gif')">
<img src="ivrp.gif" alt="texte secondaire" name="Image1" width="352" height="100" id="Image1" onMouseOver="MM_swapImage('Image1','','boulet.gif',1)" onMouseOut="MM_swapImgRestore()">
</body>
</html>
(code édité car met en italique une partie du code et du topics)
Je me dis que la solution de Stéphane est certe meilleure. Si toutefois l'on veut rester dans le JavaScript, je peux alors fournir une solution plus... Heu... Lisible et moins lourde.

Il existe encore une solution que nous n'avons pas parlé, adopter le mode de fonctionnement du menu dynamique sans préchargement (malheureusement non disponible car dans le livre... Mais toutefois encore visible sur le site dans les sections générales sauf forums]).
Le principe (pour rappel) : définir une zone visible. Inclure une image du double de la taille visible (donc 50% qui correspondent au "hover" sont masqué). Sur une action de "hover", le positionnement de l'image fait que "l'invisible passe visible". Cela comme indiqué sur la balise ancre.

Smiley smile
Sujet clos
Aller à