Problème galerie d'image

Fermé

Utilisateur anonyme - Modifié par Fenneck901 le 2/01/2014 à 15:23
Utilisateur anonyme - 3 janv. 2014 à 12:10

Bonjour, à toutes et à tous.
Mon problème j'ai créer les 4 petites vignettes et sa marche et mettre autant de petites vignettes avec des flèches sans que sa dépasse horizontalement la grande image mais je veux quand je clique sur les petites vignettes que sa s'agrandit.

Code HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
        <head>
                <title>galerie photo</title>
                <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
              <link rel="stylesheet" type="text/css" href="style.css" media="all" />
                        @import url(galerie.css);
                </style>
        </head>
        <body>
                <div id="page">
                        <div id="galerie">
      <table class="vignette"><!--Petite vignette-->
                                        <tr>
                                                <td><a href=""><img src="logo toucan.jpg" alt="Unreal Tournament" /></a></td>
                                                <td><a href=""><img src="logo Game.jpg" alt="Lanfeust de Troy : Hebus" /></a></td>
                                                <td><a href=""><img src="pomme.jpg" alt="Décor héroïc fantasy" /></a></td>
                                                <td><a href=""><img src="pomme.jpg" alt="Les simpsons : le film" /></a></td>
                                        </tr>
                                </table>
       <div id="fond">Passez votre souris sur les vignettes pour agrandir les images dans ce cadre</div>
            
            <table class="vignette">
                                        <tr>
                                        </tr>
                        </div>
                </div>
                        </div>
                </div>
        </body>
</html>

Code CSS:

body{
font-family: verdana;
background-color: #333;
}

#galerie {
position: relative;
width: 700px;
margin: auto;
}

.vignette {
margin: auto;
}

.vignette a {
display: block;
width: 145px;
height: 112px;
border: solid 3px #999;
}

.vignette a img {
width: 145px;
height: 112px;
border: 0;
}

.vignette a:hover {
border-color: #ccc;
}

#fond{
width: 600px;
height: 250px;
margin: auto;
margin-top: 20px;
padding-top: 200px;
text-align: center;
color: #f60;
border: solid 3px #999;
margin-bottom: 40px;

}

A voir également:

Problème galerie d'image
Galerie photo en ligne gratuite - Guide
Image iso - Guide
Acronis true image - Télécharger - Sauvegarde
Faststone image viewer - Télécharger - Visionnage & Diaporama
Google recherche par image - Guide

1 réponse

Réponse 1 / 1

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
3 janv. 2014 à 00:23

Bonjour

Déja n'utilise pas la balise table mais des div

voici un code qui va faire ce que tu veux

le html

<script language="JavaScript" type="text/javascript">
function AFFICHE(mon_texte){
document.getElementById('resultat').innerHTML ="<img src='" + mon_texte + "'/>";
}
</script>

<div class="vignette"><a href="" onmouseover="javascript:AFFICHE('logo toucan.jpg');" onmouseout="javascript:AFFICHE('logo toucan.jpg');"><img src="logo toucan.jpg" alt="Unreal Tournament" /></a></div>
<div class="vignette"><a href="" onmouseover="javascript:AFFICHE('logo Game.jpg');" onmouseout="javascript:AFFICHE('logo Game.jpg');"><img src="logo Game.jpg" alt="Lanfeust de Troy : Hebus" /></a></div>
<div class="vignette"><a href="" onmouseover="javascript:AFFICHE('pomme.jpg');" onmouseout="javascript:AFFICHE('pomme.jpg');"><img src="pomme.jpg" alt="Décor héroïc fantasy" /></a></div>
<div class="vignette"><a href="" onmouseover="javascript:AFFICHE('pomme.jpg');" onmouseout="javascript:AFFICHE('pomme.jpg');"><img src="pomme.jpg" alt="Les simpsons : le film" /></a></div>

<div id="fond">Passez votre souris sur les vignettes pour agrandir les images dans ce cadre</div>
<div id="resultat"></div>

le CSS

.vignette {
margin: auto;
width:150px;
height: auto;
display:inline-block;
}

.vignette img {
width: 20%;
height:20%;

#resultat {
margin: 20px auto;
width:auto;
height: auto;
}

c'est du fait main alors un petit merci sera pas de refus

Utilisateur anonyme
3 janv. 2014 à 12:10

Merci, animostab je vais l'essayer !

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?

Discussions similaires

Newsletters