Problème galerie d'image
Utilisateur anonyme
-
Utilisateur anonyme -
Utilisateur anonyme -
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:
Code CSS:
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
- Reduire taille image - Guide
- Légender une image - Guide
1 réponse
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
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
Merci, animostab je vais l'essayer !