Probléme image décalé

15 août 2008, 15:00

Bonjour,

J'ai un code qui permet d'agrandir une image au survol de la souris. Mais le probléme c'est que les images sont cote a cote donc dés que je survole l'une dentre elle, elle s'agrandit mais du coup ça décale l'autre images. Il n'y a pas un moyen que l'autre image ne bouge pas quand l'image d'a coté s'agrandit ?
Voici mon code :

Code : Tout sélectionner


<img onMouseOut="src='images/payspetit.jpg'" onEvenement="affichageZoneTexte(this)" onMouseOver="src='images/paysgrand.jpg'" src="images/payspetit.jpg" border="0"/>

<img onMouseOut="src='images/payspetit2.jpg'" onEvenement="affichageZoneTexte(this)" onMouseOver="src='images/paysgrand2.jpg'" src="images/payspetit2.jpg" border="0"/>

Merci d'avance

16 août 2008, 01:04

Le plus simple est de faire un truc dans le genre :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>

<style type="text/css">
#affich_images img, #agrand {
border:0;
}
#agrand {
position:absolute; 
top:100px;
left:100px;
display:none;
z-index:100;
}
</style>

<script type="text/javascript">
function affiche(img) {
var cible = document.getElementById('agrand');
cible.src = img;
cible.style.display = 'block';
}
function efface() {
document.getElementById('agrand').style.display = 'none';
}
</script>

</head>
<body>

<p id="affich_images">
<img onmouseout="efface()" onmouseover="affiche('images/paysgrand.jpg')" src="images/payspetit.jpg"  />

<img onmouseout="efface()" onmouseover="affiche('images/paysgrand2.jpg')" src="images/payspetit2.jpg" />
</p>

<p><img id="agrand" /></p>

</body>
</html>

A toi de choisir le positionnement de "agrand" (ici fixé à 100px du haut et du bord gauche) pour l'affichage de tes photos agrandies.

16 août 2008, 01:34

Ah oui en complément du code ci-dessus il serait peut-être bon que tu jette un oeil sur le topic ci-dessous
http://www.phpfrance.com/forums/voir_su ... -asc-0.php

Probléme image décalé

Qui est en ligne