par
AB » 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.
Le plus simple est de faire un truc dans le genre :
[code]<!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>[/code]
A toi de choisir le positionnement de "agrand" (ici fixé à 100px du haut et du bord gauche) pour l'affichage de tes photos agrandies.