rollover sur les images

par **charabia** » 10 oct. 2006, 14:39

Ce code source fait appel à du javascript Sheryo.

Je te fourni le code javascript généré par Dreamweaver pour faire ce genre de rollover, c'est parfois assez pratique. A toi de voir si en CSS c'est plus adapté.

Code : Tout sélectionner

<!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>Rollover par Dreamweaver</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('adr_ch60.jpg','adr_ch79.jpg')">
<p><a href="javascript:;" onMouseOver="MM_swapImage('gros','','adr_ch60.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="adr_ch60.jpg" name="im1" border="0" id="im1"></a> <a href="javascript:;" onMouseOver="MM_swapImage('gros','','adr_ch79.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="adr_ch79.jpg" name="im2" border="0" id="im2"></a></p>
<p><img src="adr_ch85.jpg" name="gros" id="gros"></p>
</body>
</html>

par **Sheryo** » 10 oct. 2006, 13:15

Ok merci beaucoup graphistnet pour les explications, je vais explorer la piste css. D'ailleurs j'ai trouvé un exemple qui illustre parfaitement ce à quoi je veux arriver : http://www.solidpepper.com/tricotin/bou ... 1&couleur=
Vu le code source de la page, ça me semble être du CSS, j'ai bon

par **graphistnet** » 10 oct. 2006, 12:33

PHP ne se lance que côté serveur ce qui dans ton cas ne rentre pas en compte vu que l'action est faite par l'utilisateur par le biais de son navigateur. Il y a une autre solution en CSS, je te conseille d'aller faire un tour sur http://css.alsacreations.com/Tutoriels- ... age-unique

par **Sheryo** » 10 oct. 2006, 12:27

C'est tout à fait possible mais pas en php, le javascript est tout à fait adapté à cela.

Merci pour ta réponse rapide. Mais je cherche justement à contourner le javascript qui pose des problèmes de compatibilité et/ou de sécurité avec certains navigateurs...

C'est bien sûr que le php ne le permet pas ?

par **graphistnet** » 10 oct. 2006, 12:07

C'est tout à fait possible mais pas en php, le javascript est tout à fait adapté à cela.

par **Sheryo** » 10 oct. 2006, 12:05

Oups pardon j'ai oublié de me connecter pour poster mon message...

par **Invité** » 10 oct. 2006, 12:03

Bonjour
je débute en php et je cherche un script capable d'acomplir à peu près l'équivalent de cette fonction javascript : http://editeurjavascript.com/scripts/sc ... es_2_8.php

Je voudrais faire un rollover en préchargeant les images à afficher. Et faire en sorte que lors du survol d'une image miniature, l'image agrandie s'affiche sur la même page... Est-ce possible

Je vous remercie par avance de votre aide. [-o<

rollover sur les images

Répondre

Étendre la vue Revue du sujet : rollover sur les images

rollover sur les images