Faire défiler des images avec des flèches

Fermé

Html
Flèche

Utilisateur anonyme - 10 janv. 2014 à 19:58
Nhay Messages postés 838 Date d'inscription vendredi 2 novembre 2012 Statut Membre Dernière intervention 17 décembre 2015 - 11 janv. 2014 à 13:43

Bonjour, j'ai créer des petites vignettes et je voudrais les faire bouger avec des flèches.
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
Frédéric cherche à faire le buzz sur les réseaux sociaux. il a ajouté une image de manchots sur une image de plage. retrouvez l'image originale de la plage. que cachent les manchots ? ✓ - Forum Windows
Visualisez cette image avec un logiciel d'édition d'images. combien y a-t-il de pixels noirs sur le camion ? ✓ - Forum Python
Fleche indesign ✓ - Forum InDesign
Des images - Guide
Excel fleche ne fonctionne plus ✓ - Forum Excel

1 réponse

Réponse 1 / 1

Nhay Messages postés 838 Date d'inscription vendredi 2 novembre 2012 Statut Membre Dernière intervention 17 décembre 2015 126
11 janv. 2014 à 13:43

Bonjour,
Tu peut le faire en javascript et jouer avec le left pour le déplacer, mais le plus simple serait encore de prendre une solution déjà existante (bxslider fais ça assez bien je crois)

Discussions similaires

faire défiler des image avec des flèche

Comment agrandir une image en cliquant

Insérer un tableau avec images en html

Comment inserer une image dans notepad++ ?

l'image n'apparaît pas : HTML

Html 5 Positionner ses images