Faire bouger les images en cliquant - Forum HTML / CSS / XHTML

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  Faire bouger les images en cliquant

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: Faire bouger les images en cliquant (Lu 2665 fois)

Faire bouger les images en cliquant
« sur: le 25-12-2013 a 00:03:28 »

fenneck
Invité

Bonjour, mon problème je me suis créer une galerie avec des grandes images et petits images, je voudrais savoir comment on fait pour faire bouger les images en cliquant sur les petites images.

Code HTML:
Code:

<!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" >
<head>
<title></title>
<script type="text/javascript" src="jquery-1.6.2.min.js" ></script>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>


<div class="thumb">
<a href="">
<img src="logo toucan.jpg" alt="oiseau" />
</a>
</div>
<div class="thumb">
<a href="#">
<img src="logo Game.jpg" alt="oiseau" />
</a>
</div>
<div class="thumb">
<a href="#">
<img src="logo toucan.jpg" alt="oiseau" />
</a>
<div class="thumb">
<img src="logo toucan.jpg" alt="oiseau" />
</div>
</body></html>

Code CSS:
Code:
body {
background: silver;
border: 1px solid black;
}

img {
border:0

}

.thumb a {
display:block;
}

.thumb a:hover {
position:absolute;
}

/*hack pour permettre le rollover
de gauche à droite avec mozilla*/

body > .thumb a:hover {
position:relative;
}

.thumb a img {
margin: 5px;
float: left;
width:200px;
height:100px;
}

Joyeux Noël à toutes et à tous !