Page 1 sur 1

rollover sur les images

Posté : 10 oct. 2006, 12:03
par Invité
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 :?: :-k

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

Posté : 10 oct. 2006, 12:05
par Sheryo
Oups pardon j'ai oublié de me connecter pour poster mon message... :oops:

Posté : 10 oct. 2006, 12:07
par graphistnet
C'est tout à fait possible mais pas en php, le javascript est tout à fait adapté à cela.

Posté : 10 oct. 2006, 12:27
par Sheryo
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... :cry: C'est bien sûr que le php ne le permet pas ? :shock:

Posté : 10 oct. 2006, 12:33
par graphistnet
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

Posté : 10 oct. 2006, 13:15
par Sheryo
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 :?: #-o

Posté : 10 oct. 2006, 14:39
par charabia
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>