Affichage d'une image plus grande au passage de la souris (Jquery)

Eléphant du PHP | 117 Messages

12 nov. 2008, 20:22

Salut à tous, est-ce que quelqu'un connait jquery ?
J'aimerai trouver une fonction jquery qui me permettrai au passage de la souris sur une image d'afficher celle ci en un peu plus grand comme sur ce site :

http://www.animalerie-reduc.com/chat/jo ... 403-1.html

Merci d'avance.

Administrateur PHPfrance
Administrateur PHPfrance | 11457 Messages

12 nov. 2008, 20:25

Modération :
Afin d'obtenir plus de réponses, le sujet est déplacé dans le forum "Javascript, AJAX".

Avatar du membre
ViPHP
ViPHP | 3008 Messages

12 nov. 2008, 22:21

jquery obligatoirement ?

Tu peux étudier le système du site que tu as mis en lien.

Eléphant du PHP | 117 Messages

12 nov. 2008, 22:28

Euh non pas forcément jquery mais j'ai vu que jquery possédait un certains nombre de fonctions mais je n'ai pas trouvé celle ci.

Et comment fait-on pour récupérer le script du site :
Je telecharge le js et après ?

Avatar du membre
ViPHP
ViPHP | 3008 Messages

12 nov. 2008, 23:19

Bé tu regardes au niveau de l'image comment ça se passe et tu essaies de reproduire l'effet.

Eléphant du PHP | 117 Messages

12 nov. 2008, 23:43

Bon j'ai récupérer le fichier js et j'ai testé, ça fonctionne mise à part le fait que l'image qui apparait apparait toujours au même endroit, elle bouge horizontalement mais pas verticalement, ce qui est embetant puisque si je suis en bas de la page, l image agrandie est en haut ...

Voici le bout de code JS pour IE :
// POUR I.E
	//bulleWidth=0;
    element=document.all['tip'];												//ON RECUPERE LE DIV 
	bulleWidth=element.style.width;
    xfenetre = evt.x + 750;											//On recupere la position de la souris et on ajoute 50
	yfenetre = evt.y + 500;														//pour la fenetre est la position du div
    xpage=xfenetre -250 ; 															//
	ypage=yfenetre;													            //	
    if (document.body.scrollLeft) xpage = xfenetre + document.body.scrollLeft;	//on ajoute les barre de scroll
    if (document.body.scrollTop) ypage = yfenetre  + document.body.scrollTop;	//
	if (xfenetre > bulleWidth+offset){
		xpage=xpage-bulleWidth-offset;
	}

Eléphant du PHP | 117 Messages

14 nov. 2008, 12:52

En fait ca y est j'ai compris pourquoi le zomm restait au même endroit c'est un problème avec mes div, quand je met des table ça fonctionne mais avec des div ça ne fonctionne pas.

Quelqu'un aurait t-il une idée, voici mon code :
while($article=mysql_fetch_array($result)){					
?>
<div id="articleproduits">
	<div class="ligne"></div>	
	<div class="image"><table cellspacing="0" cellpadding="0" border="0" width="60" height="60"><tr><td><a href="monsite.fr" title="$article['titre'];?>"><img src="images/<?php echo $article['image'];?>" alt="<?php echo $article['titre'];?>" border="0" onMouseOver="bulle('<img  src=/images2/<?php echo $article['image'];?>>',event,600)" onMouseOut="couic()"/></a></td></tr></table></div>
			
	<div class="text1"><a href="monsite.fr" title="<?php echo $article['titre'];?>" class="lien_desc_titre"><?php echo stripslashes($article['titre']);?></a></div>
			
	<div class="text2"><a href="monsite.fr" title="<?php echo $article['titre'];?>" class="lien_desc"><?php echo $article['description'];?></a><br/><br/></div>
			
	<div class="ajouter"><a href="monsite.fr" title="<?php echo $article['titre'];?>"><img src="images/carre.jpg" border="0"></a></div>
	<div class="prix1">Prix</div>
	<div class="prix2"><?php echo $article['prix_ttc'];?> &euro;<br></div>
	<div class="livraison">&nbsp;</div>
	</div>
<?php
}//fin de while
Voila voila, je ne comprends pas pourquoi avec des tables ça fonctionne mais pas avec des div.

Et quand j'enlève juste le <div id="articleproduits">, ça fonctionne mais ça me fout en l'air l'interface.

Voici le css de articleproduits :
#articleproduitst {
width:592px;
height:80px;
background-color:#ffffff;
padding-left:10px;
}

Mammouth du PHP | 959 Messages

15 nov. 2008, 01:29

Dans le même genre, se n'est pas au passage de la souris mais moi je te recommande de regarder du côté de LightBox, je trouve ça super beau et design :) Très très facile à mettre en œuvre en plus ! :)