Mettre des flèches sur les vignettes pour défiler les images
Utilisateur anonyme
-
animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention -
Bonjour, j'ai besoin d'aide je voudrais mettres des flèches sur les petites vignettes pour faire défiler les images.
4 réponses
-
Bonjour
la seule chose que l'on peut te repondre sans plus de précision et sans adresse url de la page ou code c'est : prends un arc et des flèches et tires sur les vignettes en visant bien.
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus. -
Bonjour, je voudrais des flèches pour faire défiler les petites vignettes. Voici le 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>LAMY C'reation</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>
<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-->
<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></center>
</div>
</ul></div>
<!--Fin des vignettes-->
</div>
<!--Fin de la galerie-->
</script>
</div>
<div id="resultat"></div>
</body>
</html>
Code css:#vignette { top:50px; } .vignette { margin: auto; width:150px; height: auto; display:inline-block; } .vignette img { width: 40%; height:10%; } #resultat { margin: 5px auto; width:auto; height: auto; text-align:center; top: 30px; } h3{ font-style: italic; color:silver; bottom:50px; } #myform{ bottom: 600px; } -
quel cafouillage! je te conseille avant de lancer dans le java script de revoir tes codes html et css et de faire une mise en page convenable...
-
c'est vrai le html est incongru
balise footer en haut de page ???
un </ul> et des </div> posés on se demande pourquoi
balise center obsolète
etc ....
dans le css bottom: 600px; !!! ca va te poser des problèmes !!!
petit précision on ne peut pas mettre une image (flèche) par dessus une autre image (vignette)
à la limite tu fais une image en forme de fleche que tu nomme fleche.gif et que tu met dans ton dossier images
Puis tu rend img un peu transparente pour voir la fleche en background.
.vignette {
margin: auto;
width:150px;
height: auto;
display:inline-block;
background-image: url(images/fleche.gif);
background-size:100%;
}
.vignette img {
width: 100%;
opacity:0.5;
filter:alpha(opacity=50);
}
sérieusement va voir cette page et suis les tutos avant de te lancer et faire des erreurs inutiles
https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
