[quote="jibb"]J'ai pas mis en place celle avec hover car sous IE, cela ne fonctionnait pas.[/quote]

IE 7 implémente la pseudo-classe :hover pour n'importe quel élément (et pas seulement l'élément a).

Yep, j'ai tout refait et les miniatures s'affichent bien où je le souhaite.
J'ai utilisé la solution avec le css.
J'ai pas mis en place celle avec hover car sous IE, cela ne fonctionnait pas.
J'ai testé sous firefox et IE mon script et c'est bon(mis à part que les miniatures s'affichent un peu plus bas sous mozilla contrairement à IE, mais ce n'est pas très grave).


Merci à tous

Pour le survol de la souris, n'hésite pas à explorer les possibilités de la pseudo-classe :hover. :wink:

Normal qu elles se mettent a gauche -> float:left

une solution est de jouer avec les proprietes absolute ,relative et z-index en css

[url]http://openweb.eu.org/articles/initiation_absolue/[/url]

ca devrait t aider.. :D

Bonjour,

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]
#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 >";



[/code]

merci