Faire défiler des images avec des flèches
Utilisateur anonyme
-
Nhay Messages postés 838 Date d'inscription Statut Membre Dernière intervention -
Nhay Messages postés 838 Date d'inscription Statut Membre Dernière intervention -
Bonjour, j'ai créer des petites vignettes et je voudrais les faire bouger avec des flèches.
Comment faire ?
Code HTML:
Code CSS:
Comment faire ?
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" >
<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 id="banniere">
<footer>
<script language="JavaScript1.2">
function ejs_nodroit()
{
alert('Clic droit interdit');
return(false);
}
document.oncontextmenu = ejs_nodroit;
</script>
<center><img src="logolamy.jpeg"></center>
</footer>
</section>
</div>
<ul id="onglet">
<br>
<li><a href="Contact.html">Contact</a></li>
<li><a href="Portfolio.html">Portfolio</a></li>
<li><a href="Index.html">Accueil</a></li>
</ul>
</div>
<br>
<hr>
<script type="text/javascript" src="jquery-1.6.2.min.js" ></script>
<center><h1>Portfolio</h1></center>
<script language="JavaScript" type="text/javascript">
function AFFICHE(mon_texte){
document.getElementById('resultat').innerHTML ="<img src='" + mon_texte + "'/>";
}
</script>
<center>
<!--fleche gauche et droite-->
<script language="JavaScript1.2">
function ejs_nodroit()
{
alert('Clic droit interdit');
return(false);
}
document.oncontextmenu = ejs_nodroit;
</script>
<div class="vignette"><a href="" onmouseover="javascript:AFFICHE('logo toucan.jpeg');" onmouseout="javascript:AFFICHE('logo toucan.jpg');"><img src="logo toucan.jpeg" 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></center>
</div>
</ul></div>
<!--Fin des vignettes-->
</div>
<!--Fin de la galerie-->
</script>
</div>
<div id="resultat"></div>
<center><h3>©</h3></center>
</body>
</html>
Code CSS:
.vignette {
margin: auto;
width:150px;
height: auto;
display:inline-block;
}
.vignette img {
width: 40%; /*longueur*/
height:10%; /*largeur*/
text-align:center;
}
#resultat { /*centrer l'image*/
margin: 20px auto;
width:auto;
height: auto;
text-align:center;
}
h3 {
color: silver;
}
A voir également:
- Faire défiler des images avec fleche html
- Des images - Guide
- Fleche indesign ✓ - Forum InDesign
- Flèche indesign ✓ - Forum InDesign
- Editeur html - Télécharger - HTML
- Pointe de flèche - Forum InDesign
