Ouverture d'image au passage de la souris

[Dylav]

Je ne comprends pas le comportement que tu m'expliques. En effet, lorsque tu cliques sur une vignette, tu déclenches un script qui se contente de dévoiler une autre partie de la "page" : il n'y a donc pas enchaînement sur une "nouvelle" page. On sent bien, au fonctionnement, que la galerie de vignettes n'a pas été rafraîchie, et la page est restée parfaitement stable. D'ailleurs, chez moi, la flèche "page précédente" du navigateur reste grise : elle est inactive, il n'y a pas de pile historique.

 

Et ceci est vrai avec mes deux navigateurs, FF 1.5 et IE 6.0

Tu travailles avec quel navigateur, toi ?

[balltrap34]

re

 

sur firefox

je voie les vignettes et quand je clik dessus l image plus grande recouvre les vignette

 

sous ie

idem sauf que la j ai l emplacement des vignettes mais je les voie pas

j ai l emplacement pour mais elle sont pas visible

 

[Dylav]

Ah, OK ! Mais si tu cliques sur l'image en vraie grandeur, elle redevient invisible, et tu redécouvres ta galerie de vignette en-dessous.

 

Après, tu as plusieurs possibilités. La première, c'est d'avertir ton visiteur qu'il peut cliquer sur l'image pour l'escamoter. Tu peux également séparer ton écran en deux parties ne se recouvrant pas, l'une qui affiche la galerie, et l'autre destinée à accueillir l'image agrandie. Ensuite, tu peux laisser libre cours à ton imagination, ta créativité et tes goûts esthétiques...

[balltrap34]

non si je clik dessus la photo agrandi rien ne se passe je suis obliger de faire retour arrire avec la fleche du navigateur

 

se que je voudrais c est comme tu dit que la grande image apparaisse en dessous des vignettes

 

quelle boulet je fait

si tu en marre dit le je comprendrait

[Dylav]

Es-tu sûr de bien avoir ça, en fin de page HTML ? C'est la séquence qui précise que, si tu cliques sur la photo, tu déclenches la fonction JavaScript "StopPhoto", qui la rend invisible.

...
<div id="foto" style="visibility:hidden" onClick="StopPhoto()">
<img name="Photo" src="bidon.jpg">
</div>
</body></html>

Maintenant, pour que la grande photo s'affiche sous la galerie, il faut que tu la repositionnes verticalement plus bas. Dans le script Galerie.js, dans la fonction "VoirPhoto", tu vas lui dire qu'elle doit commencer à 100 pixels du haut de la page (top), au lieu de 0.

function VoirPhoto(img) {

if (document.Photo.src != img) {

ChargerPhoto(img);

document.Photo.src=img;

document.all("foto").style.top=100;

document.all("foto").style.left=0;

document.all("foto").style.position="absolute";

document.all("foto").style.width=document.Photo.width;

document.all("foto").style.height=document.Photo.height;

}

document.all("foto").style.visibility="visible";

}

[balltrap34]

j ai verifier et oui j ai bien ceci

HTML

...

<div id="foto" style="visibility:hidden" onClick="StopPhoto()">

<img name="Photo" src="bidon.jpg">

</div>

</body></html>

 

et ensuite pour le reste le changement de position de l image =idem

j ai bien mis 100 mais cela change rien

je devient fou lol

[Dylav]

Dis-moi, tu n'aurais pas paramétré le blocage des scripts JavaScript, par hasard, dans ton FireFox ? Parce que c'est souvent conseillé par sécurité. Mais ce ne doit pas être ça : puisque l'image en vraie grandeur apparaît, c'est que la fonction VoirPhoto s'exécute...

 

Je crois que je n'ai plus les yeux en face des trous, pour ce soir. Je vais réétudier le problème demain, si tu n'y vois pas d'inconvénient. Bonne nuit.

[balltrap34]

No soucis, je te remercie encore. A demain

a++

[Dylav]

Bonjour Balltrap34,

 

Je ne comprends toujours pas pourquoi ce mécanisme ne fonctionne pas chez toi. J'en ai profité pour rendre le source un peu plus orthodoxe, en introduisant une feuille de style. Pour nous simplifier la vie, j'ai aussi réintégré le script dans la page. D'où un fichier unique.

 

Reprends le source par copier/coller, pour l'enregistrer par exemple sous le nom Galerie.html, et y modifier [éventuellement] les noms des 8 images. Ne change surtout rien d'autre, pour faire un premier test.

 

<html><head>
<title>Dispo pour galerie</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!-- Galerie.js -----------------------------------------------------------
//
//   Use this script to view full-size images from thumbnails.
//   The full-size images can be different sizes.
//   The pop-up window will change to the appropriate size.
//
//   This script and many more are available free online at
//   The JavaScript Source -> [url="http://javascript.internet.com"]http://javascript.internet.com[/url]
// ------------------------------------------------------------------------
//
function VoirPhoto(img) {
 if (document.Photo.src != img) {
     ChargerPhoto(img);
     document.Photo.src=img;
     document.all("foto").style.width=document.Photo.width;
     document.all("foto").style.height=document.Photo.height;
    }
 document.all("foto").style.visibility="visible";
}
function ChargerPhoto(img) {
 var Photo=new Image();
 Photo.width=0;
 Photo.height=0;
 Photo.src=img;
 ControlerPhoto(img);
}
function ControlerPhoto(img) {
 if ((Photo.width==0)||(Photo.height==0)) {
      Refresh="ControlerPhoto('"+img+"')";
      intervallo=setTimeout(Refresh,20);
     }
}
function StopPhoto() {
 document.all("foto").style.visibility="hidden";
}
// ---------------------------------------------------------------- End -->
</script>
<style type="text/css">
#galerie {
text-align:center;
font-size:11px;
}
.img {
border:0;
margin-right:2px;
}
#foto {
position:absolute;
visibility:hidden;
top:120px;
left:0;
}
</style>
</head>
<body onUnload="java script:StopPhoto()">
<div id="galerie">
<a href="java script:VoirPhoto('Galerip1_big.jpg')">
<img class="img" src="Galerip1_small.jpg" alt="" /></a>
<a href="java script:VoirPhoto('Galerip2_big.jpg')">
<img class="img" src="Galerip2_small.jpg" alt="" /></a>
<a href="java script:VoirPhoto('Galerip3_big.jpg')">
<img class="img" src="Galerip3_small.jpg" alt="" /></a>
<a href="java script:VoirPhoto('Galerip4_big.jpg')">
<img class="img" src="Galerip4_small.jpg" alt="" /></a>
<br />
Cliquer sur une image pour la voir en taille réelle...
</div>
<div id="foto" onClick="StopPhoto()">
<img name="Photo" src="bidon.jpg" alt="" />
</div>
</body></html>

Voici ce qu'il devrait se passer,

• lorsque tu double-cliques sur le source HTML, ton navigateur ouvre la page, où tu ne vois que les 4 vignettes, centrées côte à côte en haut de la page,
  
• lorsque tu cliques sur une première vignette, la photo en vraie grandeur correspondante apparaît, en-dessous de la ligne de vignettes,
  
• si tu cliques sur une seconde vignette, la photo en vraie grandeur correspondante vient remplacer automatiquement la précédente,
  
• si tu cliques sur la photo en vraie grandeur, elle disparaît.
  

Si ça ne se passe pas comme ça, je baisse les bras... mais j'ai horreur de ne pas comprendre !

 

P.S.: juste un petit truc, au début de la 4ème ligne, j'ignore pourquoi le < a été remplacé par < alors qu'il faut lire

<script type="text/javascript">

[balltrap34]

salut

merci de tere decarcasser

 

j ai pas mal bidouller et j ai fait ceci

 

je le met en ligne et dit moi si tu voit un soucis

et je voudrais quand j ouvre sous ie que l emplacement de l image agrandie on le voie pas

cela fait bizzard

voila le lien

 

http://perso.orange.fr/rginformatique/page/jobs.html

Modifié le 25 février 2007 par balltrap34