Aller au contenu
  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

Ouverture d'image au passage de la souris


balltrap34
 Partager

Messages recommandés

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é par balltrap34
Lien vers le commentaire
Partager sur d’autres sites

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 ?

Lien vers le commentaire
Partager sur d’autres sites

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++

Lien vers le commentaire
Partager sur d’autres sites

  • Modérateurs

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). :P

 

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 -->

Lien vers le commentaire
Partager sur d’autres sites

  • Modérateurs

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). :P

Lien vers le commentaire
Partager sur d’autres sites

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é par balltrap34
Lien vers le commentaire
Partager sur d’autres sites

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

 Partager

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...