Je voudrais qu'au survol de la souris, l'image s'affiche via un zoom en dessous de l'image zoomée.
Pour le moment, j'arrive a zoomer l'image avec css, mais elle s'affiche non pas en dessous mais tout a gauche.
Je n'arrive pas a faire en sorte que la 3eme image en partant de la gauche se mette en dessous de la 3eme image(pour le moment, toutes les images zoomées se mettent sous la 1er image).
voici mon code:
Code : Tout sélectionner
#conteneur
{
width:700px;
height:520px;
background-color:#BFBFBF;
border:1px solid black;
}
#bande
{
float:left;
width:680px;
height:40px;
background-color:#111111;
border:1px solid white;
margin:5px;
text-align:center;
}
#bande img {
width:30px;
height:40px;
}
#imgover img{
width:60px;
height:70px;
}
#bande2{
float:left;
width:680px;
height:40px;
margin:5px;
}
<div id="bande">
<?php
array_multisort($tab_image, SORT_ASC);
for ($j=1;$j<$total;$j++)
{
echo '<img src="'.$nom_repertoire.'/'.$tab_image[$j].'" value="'.$nom_repertoire.'/'.$tab_image[$j].'" alt="'.$tab_image[$j].'" onMouseover="javascript:zoom(this.src)" onClick="javascript:affiche(this.src,'.$j.');" />';
}
?>
</div>
<div id="bande2">
</div>
function affiche(p,num)
{
var ext=p.split(".")
var photo=p.split("imagespetites")
var p2=photo[1].split("_");
p="images/"+p2[0]+"."+ext[1];
numero =num;
document.getElementById("photos").innerHTML = "<CENTER><IMG SRC="+p+" alt=title BORDER=0 name=image><BR>";
}
function zoom(src)
{
document.getElementById("bande2").innerHTML = "<IMG id=imgover SRC="+src+" alt=title BORDER=0 >";
