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

par **chrislabricole** » 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 !

par **uspy62** » 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;
}

par **uspy62** » 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;
	}

par **charabia** » 12 nov. 2008, 23:19

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

par **uspy62** » 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 ?

par **charabia** » 12 nov. 2008, 22:21

jquery obligatoirement ?

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

par **albat** » 12 nov. 2008, 20:25

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

par **uspy62** » 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.

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

Répondre

Étendre la vue Revue du sujet : Affichage d'une image plus grande au passage de la souris (Jquery)

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