Bonjour sur mon site http://nekobarbare.free.fr dans travaux, j'ai fait une gallerie d'images , et je cherche à rajouter un tit plus , à savoir , lorsqu'on passe la souris sur une image un appercu de celle ci s'ouvre à coter du pointeur de la souris , et se ferme lorsqu'on ne survole plus l'image.
Voici par exemple un site sur lequel ils on fait cela :
http://www.gameblog.fr/news_1388_maj-l-ile-des-singes-colporteurs
j'ai trouver un code sur le net , plus précisement sur ce site :
http://www.editeurjavascript.com/forum/topic,1,35158,0.html
maisj e n'arrive pas a le mettre en application.
voila ce que j'ai fait
j'ai rajouter cela dans ma feuille de style, et ensuite dans mon index.php j'ai rajouter dans body cela :
Et enfin dans ma galerie au moment d'afficher mon image j'ai rajouter cela sur mes miniatures:
Et quand je passe sur ma miniature, l'image apparait bien en grand le seul soucis c'est qu'elle apparait dans sa taille original ( donc immense pour certaine photo) et en plus elle n'apparait pas a coté de mon curseur , et ne suis pas celui-ci , elle apparait carrément au-dessus de mon design...
Donc ne connaissant pas du tout le javascript... j'attend vos conseils qui comme toujours apportent de bonnes solutions.
Bonne soirée
Modifié par rockt13 (27 Dec 2007 - 19:42)
Voici par exemple un site sur lequel ils on fait cela :
http://www.gameblog.fr/news_1388_maj-l-ile-des-singes-colporteurs
j'ai trouver un code sur le net , plus précisement sur ce site :
http://www.editeurjavascript.com/forum/topic,1,35158,0.html
maisj e n'arrive pas a le mettre en application.
voila ce que j'ai fait
.pop { POSITION: absolute; VISIBILITY: hidden }j'ai rajouter cela dans ma feuille de style, et ensuite dans mon index.php j'ai rajouter dans body cela :
<DIV class=pop id=img></DIV>
<SCRIPT type="text/javascript">
if (document.getElementById){
box = document.getElementById("img").style;
if(navigator.appName.substring(0,3) == "Net")
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = pointer;
}
function poplink(contenu){
var content ="<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=#000000><TR><TD><TABLE WIDTH=1 CELLPADDING=3 CELLSPACING=1><TR><TD BGCOLOR=#FFFFFF><CENTER>"+contenu+"</CENTER></TD></TR></TABLE></TD></TR></TABLE>";
if (document.getElementById)
{
document.getElementById("img").innerHTML =
content;
box.visibility = "visible";
}
}
function pointer(e)
{
var x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
var y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
box.left = x+2;
box.top = y+2;
}
function closepopup()
{
if (document.getElementById)
box.visibility = "hidden";
}
Et enfin dans ma galerie au moment d'afficher mon image j'ai rajouter cela sur mes miniatures:
<a href="img/galerie/<? echo $nom_vignette;?>" target="_blank" onMouseOver="poplink('<img src=img/galerie/<? echo $nom_vignette;?>>')"; onmouseout="closepopup()";>
<img class="galerie" src="img/galerie/<? echo $nom_vignette;?>" />
</a>
Et quand je passe sur ma miniature, l'image apparait bien en grand le seul soucis c'est qu'elle apparait dans sa taille original ( donc immense pour certaine photo) et en plus elle n'apparait pas a coté de mon curseur , et ne suis pas celui-ci , elle apparait carrément au-dessus de mon design...
Donc ne connaissant pas du tout le javascript... j'attend vos conseils qui comme toujours apportent de bonnes solutions.
Bonne soirée
Modifié par rockt13 (27 Dec 2007 - 19:42)
