Mettre des flèches sur les vignettes pour défiler les images
Fermé
Utilisateur anonyme
-
6 janv. 2014 à 12:46
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 7 janv. 2014 à 00:46
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 7 janv. 2014 à 00:46
A voir également:
- Faire défiler des images avec fleche html
- Editeur html - Télécharger - HTML
- Des images - Guide
- Copiez l'image dans un logiciel d'édition d'images ou un outil en ligne comme js paint ou pixlr e. remplissez les cases en suivant le code couleur. des cases supplémentaires vont se remplir automatiquement. que représente le dessin ? ✓ - Forum Windows
- Espace en html - Astuces et Solutions
- Html download - Télécharger - HTML
4 réponses
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
738
Modifié par animostab le 6/01/2014 à 16:07
Modifié par animostab le 6/01/2014 à 16:07
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.
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.
Utilisateur anonyme
Modifié par Fenneck901 le 6/01/2014 à 20:26
Modifié par Fenneck901 le 6/01/2014 à 20:26
Bonjour, je voudrais des flèches pour faire défiler les petites vignettes. Voici le code html:
Code css:
<!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;
}
jjaco
Messages postés
529
Date d'inscription
dimanche 20 janvier 2008
Statut
Membre
Dernière intervention
15 mars 2024
45
6 janv. 2014 à 22:48
6 janv. 2014 à 22:48
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...
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
738
Modifié par animostab le 7/01/2014 à 01:06
Modifié par animostab le 7/01/2014 à 01:06
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.
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.
