Bonjour, amis geeks.
Après avoir consciencieusement pillé ce site depuis un certain temps, je me suis enfin décidé à m'inscrire sur ce chouette forum. J'espère ne pas faire trop de bêtises (désolé...juste au cas où...)
Je vais commencer fort avec un problème qui me casse les pieds depuis quelques heures. J'essaie de réaliser une galerie d'image assez traditionnelles. Càd des miniatures, avec ouverture d'une fenêtre vers l'image en taille normale lors du clic. Pas de problème jusque là...
Par contre, j'aurais aimé qu'une prévisualisation de l'image apparaisse dans un fenêtre popup lorsque la souris passe sur la miniature. Pour vous donner une idée, allez voir ce qu'ils ont fait sur cette page :http://www.gameblog.fr/news_1388_maj-l-ile-des-singes-colporteurs
(à noter qu'il y a aussi une petite fonction pour "illuminer" l'image)
J'ai réussi à faire quelque chose de correct sur une page HTML isolée. Malheureusement, lorsque je tente d'importer le bouzin dans ma page, ça coince.
Je précise tout de suite que ma structure CSS est un peu "spéciale". En fait, j'ai créé de fausses frames en CSS. J'ai un bloc fixe sur toute la hauteur à gauche, de 150px de largeur, et un autre fixe sur toute la longueur en haut, de 100 px de hauteur. Le contenu de ma page s'affiche donc dans un div "contenu" qui occupe le reste de la page...
Le problème, c'est que lorsque je passe la souris sur ma miniature, le popup, au lieu de s'ouvrir 20px à droite et 20 px au dessous de mon curseur, se colle en haut et à gauche de mon div "contenu".
Du coup, lorsque la preview chevauche la miniature, j'ai un scintillement, puisque les deux div se chevauchent....
J'ai cru comprendre que dans ce cas, les coordonnées de la souris sont erronées : une histoire de position sur la page, et non dans mon "contenu"....mais je suis un peu rouillé en javascript, et j'ai tenté quelques trucs sans aucun résultat...Au secours !
Je vous donne une version light de mon code (celle qui marche bien sur une page isolée) :
A vot' bon coeur, messieurs dames...(pitié, j'en peux plus, j'ai les yeux qui piquent...)
Modifié par kea (29 Jul 2007 - 15:01)
Après avoir consciencieusement pillé ce site depuis un certain temps, je me suis enfin décidé à m'inscrire sur ce chouette forum. J'espère ne pas faire trop de bêtises (désolé...juste au cas où...)
Je vais commencer fort avec un problème qui me casse les pieds depuis quelques heures. J'essaie de réaliser une galerie d'image assez traditionnelles. Càd des miniatures, avec ouverture d'une fenêtre vers l'image en taille normale lors du clic. Pas de problème jusque là...
Par contre, j'aurais aimé qu'une prévisualisation de l'image apparaisse dans un fenêtre popup lorsque la souris passe sur la miniature. Pour vous donner une idée, allez voir ce qu'ils ont fait sur cette page :http://www.gameblog.fr/news_1388_maj-l-ile-des-singes-colporteurs
(à noter qu'il y a aussi une petite fonction pour "illuminer" l'image)
J'ai réussi à faire quelque chose de correct sur une page HTML isolée. Malheureusement, lorsque je tente d'importer le bouzin dans ma page, ça coince.
Je précise tout de suite que ma structure CSS est un peu "spéciale". En fait, j'ai créé de fausses frames en CSS. J'ai un bloc fixe sur toute la hauteur à gauche, de 150px de largeur, et un autre fixe sur toute la longueur en haut, de 100 px de hauteur. Le contenu de ma page s'affiche donc dans un div "contenu" qui occupe le reste de la page...
Le problème, c'est que lorsque je passe la souris sur ma miniature, le popup, au lieu de s'ouvrir 20px à droite et 20 px au dessous de mon curseur, se colle en haut et à gauche de mon div "contenu".
Du coup, lorsque la preview chevauche la miniature, j'ai un scintillement, puisque les deux div se chevauchent....
J'ai cru comprendre que dans ce cas, les coordonnées de la souris sont erronées : une histoire de position sur la page, et non dans mon "contenu"....mais je suis un peu rouillé en javascript, et j'ai tenté quelques trucs sans aucun résultat...Au secours !
Je vous donne une version light de mon code (celle qui marche bien sur une page isolée) :
<html>
<head>
<title>test images popups</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.popup { POSITION: absolute; VISIBILITY: hidden }
</style>
<script language="JavaScript">
function makevisible(cur,which)
{
if(document.getElementById)
{
if (which==0)
{
if(document.all)
cur.filters.alpha.opacity=100
else
cur.style.setProperty("-moz-opacity", 1, "");
}
else
{
if(document.all)
cur.filters.alpha.opacity=40
else
cur.style.setProperty("-moz-opacity", .4, "");
}
}
}
</script>
</head>
<body>
<div class="popup" id="popbox"></div>
<script type="text/javascript">
if (document.getElementById){
box = document.getElementById("popbox").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("popbox").innerHTML =
content;
box.visibility = "visible";
}
}
function pointer(e)
{
var x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.contenu.scrollLeft;
var y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
box.left = x+20;
box.top = y+20;
}
function closepopup()
{
if (document.getElementById)
box.visibility = "hidden";
}
</script>
<table align="center" style="text-align: center; 90%;" border="0" cellpadding="0" cellspacing="10">
<tbody>
<TR>
<td style="text-align: center; vertical-align: middle; background-color: white;">
<a href="" onMouseOver="poplink('<img src=\'groupe2.jpg\' alt=\'Big Img\' width=\'400px\'><P>bourrins</P>');" onmouseout="closepopup()" ><img src="smallgroupe2.jpg" border="0" alt="Little Img"
style="filter:alpha(opacity=40); -moz-opacity: .4;"
onMouseover="makevisible(this,0)"
onMouseout="makevisible(this,1)"></a>
</TD>
</TR>
</TBODY>
</TABLE>
</body>
</html>
A vot' bon coeur, messieurs dames...(pitié, j'en peux plus, j'ai les yeux qui piquent...)
Modifié par kea (29 Jul 2007 - 15:01)
Bouuuhouhouu...j'en ai marre...
)