Discussion :

[chloe5972]

Bonjour

Je souhaite obtenir cet effet : lorsque ma sourie passe sur une image un agrandissement de celle ci apparait immédiatement dans un cadre
cf exemple :
http://weedsandwildflowersdesign.com...facturers_id=6

J'ai cherché, j'ai trouvé quelques pistes qui n'ont pas abouties.
Je précise que je suis pas très douée en java script.
Ce que je cherche c'est carrément un exemple tout fait avec tous les fichiers qui vont bien

D'avance merci
A plus
Chloe
http://clofont.free.fr

[jln13]

Salut,

a premiere vue il me semble que tu peux assez facilement prendre leur code et l'adapter :

1) Tu inseres le fichier js qui fait les traitements pour cacher / afficher l'image. Il est situé la :

http://weedsandwildflowersdesign.com..._imagehover.js

2) Tu mets ta balise image dans ta page comme ceci :
En gros tu dois appeler la fonction showtrail avec en parametre l'image a afficher sur ton onmouseover et appeler la fonction hidetrail sur ton onmouseout.

Code :

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

1
2
 
<img src="bmz_cache/2/27cf0547655fc0079d878b023e48bab6.image.144x175.jpg" alt="" title="" onmouseover="showtrail('bmz_cache/7/73b2fdaf9fb749f3f144bab386f9650e.image.370x450.jpg','A Wildflower Holiday - Alpha',144,175,370,450,this,0,0,144,175);" onmouseout="hidetrail();"  />

Soit la declaration de la fonction showtrail (car il y a bcp de parametres a passer tout de meme ^^) :

Code :

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

1
2
 
function showtrail(imagename,title,oriwidth,oriheight,zoomimgwidth,zoomimgheight, image, startx, starty, startw, starth)

[chloe5972]

Vi je sais...je suis une bille...nan...même pas...un boulet carrément
J'ai fait tout comme tu dis...enfin j'ai essayé..mais ca ne donne pas le résultat escompté !!!
Voila le résultat : http://clofont.free.fr/test/test.htm
image : chat1.jpg chat2.jpg
et dans le répertoire le fichier jscript_imagehover.js

Dois surement y avoir quelque chose que je zappe...
Merci d'avance pour votre patience !!!
Chloe5972

[jln13]

Salut,

effectivement sympa l'effet de déplacement de l'image ^^

Par contre ton problème ne vient pas du javascript mais de la css. Si tu inclus ces lignes dans ton fichier ca marchera comme sur le site que tu avais mis :

Code :

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

1
2
3
4
5
6
7
8
 
<link rel="stylesheet" type="text/css" href="http://weedsandwildflowersdesign.com/shoppe/includes/templates/template_wwdesign/css/style_imagehover.css" />
<link rel="stylesheet" type="text/css" href="http://weedsandwildflowersdesign.com/shoppe/includes/templates/template_wwdesign/css/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="http://weedsandwildflowersdesign.com/shoppe/includes/templates/template_wwdesign/css/stylesheet_css_buttons.css" />
 
<link rel="stylesheet" type="text/css" href="http://weedsandwildflowersdesign.com/shoppe/includes/templates/template_wwdesign/css/stylesheet_lightbox.css" />
<link rel="stylesheet" type="text/css" href="http://weedsandwildflowersdesign.com/shoppe/includes/templates/template_wwdesign/css/stylesheet_template.css" />
<link rel="stylesheet" type="text/css" media="print" href="http://weedsandwildflowersdesign.com/shoppe/includes/templates/template_wwdesign/css/print_stylesheet.css" />

A toi d'adapter les images et les styles selon ta charte graphique maintenant..
Bon courage !

[chloe5972]

C'est toi le plus fort !!!
Merci ca fonctionne a merveille !!!

[jln13]

Aah si c'était vrai ...

Content de t'avoir aidé en tous cas

[F&TTT]

bonjour tlm,

comment far pour glisse-ajuter comme sur ce site, mais dans un cadre flotante que reste tououre en vue ?

http://www.rueducommerce.fr/Ordinate...Ecran-17.htm#2