Ouverture d'image au passage de la souris

balltrap34 · le 22 février 2007

salut a tous

voila mon probleme

je vous previent dans se domaine je suis nullllllllllllllllll

sur mon site je voudrait que lorsque l on passe la souris sur une de mes vignettes cela montre une image plus grande plus bas

sans%20titre.jpg

Modifié le 22 février 2007 par balltrap34

KewlCat · le 22 février 2007

dans ce domaine je suis nullllllllllllllllll

Meuh non, allons. Faut pas dire ça !

Tu sais déjà faire tout le reste ? (afficher les vignettes)

Tu as préparé sur ta page un espace pour afficher la "version grande" de tes images ?

Tu as tout fait en XHTML 1.0 Strict + CSS ?

balltrap34 · le 22 février 2007

salut

Tu as tout fait en XHTML 1.0 Strict + CSS ????????????????????????????????????

j ai fait une page en html sur laquelle j ai mis les vignettes

j arrive a le faire en image survoler sur la vignette mais cela me montre l image survoler au meme endroit et reduite a la taille de la vignette

se que je veut faire c est un peu dans se style quand tu te met sur le lien une image apparait a cote

mais moi je veut le faire pour mes vignettes

voila le site reference

www.sospc34.com

merci

a++

Dylav · le 22 février 2007

Tiens, inspire-toi de cet exemple dépouillé, dont voici le principe,

- tu définis un bloc <div>, que tu rends initialement invisible (visibility:hidden)

- au clic sur une vignette, tu remplis le bloc avec l'image grande taille et tu le rends visible (visibility:visible)

- au clic sur la grande image, tu rends à nouveau le bloc invisible.

Pour cela, il te faut bien entendu 2 versions de chaque image, la vignette et la grande taille.

Inconvénient : le mécanisme, certes simple, est activé en JavaScript, et ton visiteur peut refuser l'exécution de scripts JavaScript (sécurité).

Pour respecter ta consigne d'apparition au survol : tu remplaces la notion de clic sur le lien actif par une notion de survol (événement onMouseOver). Perso, je trouve ce déclenchement par survol fatigant (pour le visiteur) parce que difficile à maîtriser. C'est plus stable par clic. A toi de voir.

Juste un détail pour finir : ce code HTML n'est pas bien propre, ça manque de feuille de style (séparation des descriptions du contenu et de sa mise en forme).

La page HTML

<html><HEAD>
<title>Dispo pour galerie</title>
<script LANGUAGE="JavaScript" src="Galerie.js"></script>
</HEAD>
<BODY onUnload="java script:StopPhoto()">
<div align="center">
<TABLE BORDER="1" bordercolor="white" cellspacing=3 cellpadding=0 width=150>
<TR>
<TD width=50>
<A HREF="java script:VoirPhoto('Galerip1_big.jpg')" BORDER="1">
<IMG SRC="Galerip1_small.jpg" width=50 BORDER="0"></A>
</TD>
<TD width=50>
<A HREF="java script:VoirPhoto('Galerip2_big.jpg')" BORDER="1">
<IMG SRC="Galerip2_small.jpg" width=50 BORDER="0"></A>
</TD>
<TD width=50>
<A HREF="java script:VoirPhoto('Galerip3_big.jpg')" BORDER="1">
<IMG SRC="Galerip3_small.jpg" width=50 BORDER="0"></A>
</TD>
<TD width=50>
<A HREF="java script:VoirPhoto('Galerip4_big.jpg')" BORDER="1">
<IMG SRC="Galerip4_small.jpg" width=50 BORDER="0"></A>
</TD>
</TR><TR>
<TD colspan=4>
<DIV ALIGN="CENTER"><font size=2>
Clique sur une image pour la voir en taille réelle...</font></DIV>
</TD>
</TR></TABLE></div>
<div id="foto" style="visibility:hidden" onClick="StopPhoto()">
<img name="Photo" src="bidon.jpg">
</div>
</body></html>

et le script Galerie.js

<!-- 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 -> http://javascript.internet.com
// ------------------------------------------------------------------------
//
function VoirPhoto(img) {
 if (document.Photo.src != img) {
  ChargerPhoto(img);
  document.Photo.src=img;
  document.all("foto").style.top=0;
  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";
}
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 -->

balltrap34 · le 22 février 2007

merci

l adresse du site que j ai mis n est pas le mien

c etais pour exemple

et le mien j ai fait sans feuille de style donc dur dur

je croit que je devrait prendre des cours depuis le debut lol

merci

Dylav · le 22 février 2007

Pour les cours, une excellente piste, les tutos du Site du ZerO

balltrap34 · le 22 février 2007

merci

dans le script et la page html que tu ma mis

tu peut preciser ou je doit mettre le nom des photos et les liens

quand je dit que dans se domaine je suis nul je suis en dessous de la veriter

merci

Dylav · le 23 février 2007

Pas de problème. On va détailler un peu. Tout d'abord, au niveau du nommage des images, tout se passe dans la page HTML (le script JavaScript reçoit un nom d'image en paramètre, dans la variable img, donc rien à changer).

Dans cet exemple simple, la page est constitué d'un tableau (balise <TABLE>) ne contenant qu'une seule ligne (balise <TR>), cette ligne comportant 4 colonnes (balise <TD>), qu'on va appeler des cases. Faisons un zoom sur la première case.

<TD width=50>
<A HREF="java script:VoirPhoto('Galerip1_big.jpg')" BORDER="1">
<IMG SRC="Galerip1_small.jpg" width=50 BORDER="0"></A>
</TD>

La case (balise <TD>) contient une ancre (balise <A>) qui délimite une zone active contenant une image (balise <IMG>). Cette image, la vignette, est identifiée par son attribut SRC, ici sous le nom Galerip1_small.jpg. Lorsque tu cliques sur cette vignette, le script JavaScript VoirPhoto est lancé, avec en paramètre le nom de l'image en grandeur réelle, ici Galerip1_big.jpg.

Ici donc, tu dois ranger, dans le même répertoire que la page HTML, 8 images dont les noms de fichiers seront Galerip1_small.jpg, Galerip2_small.jpg, Galerip3_small.jpg, Galerip4_small.jpg pour les vignettes, et Galerip1_big.jpg, Galerip2_big.jpg, Galerip3_big.jpg, Galerip4_big.jpg pour les images en vraie grandeur.

Je te laisse découvrir le détail du fonctionnement du code après avoir étudié les langages HTML et JavaScript (cf. les tutoriels du Site du ZérO, par exemple). Et, pour bien faire, il faudrait que je prenne le temps de réécrire cette page, en prenant soin de séparer contenu [X]HTML et mise en forme (feuille de style CSS).

balltrap34 · le 23 février 2007

salut

merci pour ces details c est vraiment sympa de ta part

je regarde tous cela se soir et je te tient au courant

a++

balltrap34 · le 23 février 2007

re

cela marche pas

j ai bien la vignette sur la page et quand je clik dessus cela me dit qu il ne trouve pas

Firefox ne peut trouver le fichier à l'adresse /C:/Documents and Settings/gerard.O1AVYNPPPAZIB3O/Bureau/page/java script:VoirPhoto('Galerip1_big.jpg').

cela marche mais une fois que cela m affiche l image agrandi si je clik dessus je revient pas sur les vignettes

je suis obliger de faire retour arriere avec le navigateur

merci

Modifié le 23 février 2007 par balltrap34

Connexion

Pas encore inscrit ?

Ouverture d'image au passage de la souris

Messages recommandés

balltrap34

Lien vers le commentaire

Partager sur d’autres sites

KewlCat

Lien vers le commentaire

Partager sur d’autres sites

balltrap34

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

balltrap34

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

balltrap34

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

balltrap34

Lien vers le commentaire

Partager sur d’autres sites

balltrap34

Lien vers le commentaire

Partager sur d’autres sites

Rejoindre la conversation

En ligne récemment 0 membre est en ligne

Zebulon

Outils en ligne

Naviguer