Fondu d'image
Fermé
kittyet
Messages postés
27
Date d'inscription
dimanche 24 février 2013
Statut
Membre
Dernière intervention
18 mai 2015
-
9 févr. 2015 à 19:28
kittyet Messages postés 27 Date d'inscription dimanche 24 février 2013 Statut Membre Dernière intervention 18 mai 2015 - 18 mai 2015 à 19:07
kittyet Messages postés 27 Date d'inscription dimanche 24 février 2013 Statut Membre Dernière intervention 18 mai 2015 - 18 mai 2015 à 19:07
A voir également:
- Fondu d'image
- Image iso - Guide
- Acronis true image - Télécharger - Sauvegarde
- Image iso windows 10 - Guide
- Faststone image viewer - Télécharger - Visionnage & Diaporama
- Comment agrandir une image - Guide
3 réponses
Salut,
Tout d'abord ni HTML ni CSS ne sont de la programmation. Ce sont des langages de balisages(on inique un élément par un repère) et ça n'a vraiment rien à voir, autant comparé un ours à une pomme.
Slideshow en anglais se traduirait par diaporama*(littéralement slide = glisser, show spectacle) et le moyen le plus efficace est effectivement d'utiliser la programmation; en l'occurrence javascript qui est une composante essentielle de HTML5 et qui le différencie des versions précédentes.
Il est facilement trouvable sur la toile des codes tout fait commentés et explicité de diaporama ou galerie défilante(une autre traduction de slideshow fréquemment utilisée). Ces codes sont facilement inclus dans la page pour peu qu'on sache comment inclure javascript, ce qui est la base.
J'ai trouvé ceci aussi faisant appel à CSS3 et utilisant les pseudo-classes after et before:
http://www.creativejuiz.fr/blog/tutoriels/css3-creer-slideshow-automatique-controlable-transition
Ami j'ai pas du chercher longtemps en tapant slideshow HTML5
à ta question (je te tutoie maintenant que nous sommes amis)vaut il mieux le faire en javascript ou utiliser uniquement CSS cela dépends de ton besoin bien sûr. Compare(encore une fois premier résultat de recherche pour slideshow javascript) ce que ça donne. javascript sert à tout et permet en tant que langage de programmation des fonctionnalités beaucoup plus avancées (tout ce que l'on veut en gros) tandis que CSS est pratique car rapide et simple à déployer mais aussi limité et borné. Donc pour une belle galerie de photos défilante avec des boutons de partout voire des effets digne du dernier Spielberg utilise Javascript/Jquery(voire flash mais celui ci est de moins en moins compatible avec les supports autres que l'ordinateur pour surfer le web). Pour un petit zigouigoui simple(peu amène aussi) et qui ne demande aucune ressource mémoire et ne risquera jamais de planter ni ralentir l'ordinateur de l'internaute utilise CSS(qui ne nécessite que quelques lignes et si tu veux faire par toi même ne demande aucune connaissance en programmation).
*synonyme aussi employé carrousel, en référence au cylindre contenant les diapos du projecteur.
Tout d'abord ni HTML ni CSS ne sont de la programmation. Ce sont des langages de balisages(on inique un élément par un repère) et ça n'a vraiment rien à voir, autant comparé un ours à une pomme.
Slideshow en anglais se traduirait par diaporama*(littéralement slide = glisser, show spectacle) et le moyen le plus efficace est effectivement d'utiliser la programmation; en l'occurrence javascript qui est une composante essentielle de HTML5 et qui le différencie des versions précédentes.
Il est facilement trouvable sur la toile des codes tout fait commentés et explicité de diaporama ou galerie défilante(une autre traduction de slideshow fréquemment utilisée). Ces codes sont facilement inclus dans la page pour peu qu'on sache comment inclure javascript, ce qui est la base.
J'ai trouvé ceci aussi faisant appel à CSS3 et utilisant les pseudo-classes after et before:
http://www.creativejuiz.fr/blog/tutoriels/css3-creer-slideshow-automatique-controlable-transition
Ami j'ai pas du chercher longtemps en tapant slideshow HTML5
à ta question (je te tutoie maintenant que nous sommes amis)vaut il mieux le faire en javascript ou utiliser uniquement CSS cela dépends de ton besoin bien sûr. Compare(encore une fois premier résultat de recherche pour slideshow javascript) ce que ça donne. javascript sert à tout et permet en tant que langage de programmation des fonctionnalités beaucoup plus avancées (tout ce que l'on veut en gros) tandis que CSS est pratique car rapide et simple à déployer mais aussi limité et borné. Donc pour une belle galerie de photos défilante avec des boutons de partout voire des effets digne du dernier Spielberg utilise Javascript/Jquery(voire flash mais celui ci est de moins en moins compatible avec les supports autres que l'ordinateur pour surfer le web). Pour un petit zigouigoui simple(peu amène aussi) et qui ne demande aucune ressource mémoire et ne risquera jamais de planter ni ralentir l'ordinateur de l'internaute utilise CSS(qui ne nécessite que quelques lignes et si tu veux faire par toi même ne demande aucune connaissance en programmation).
*synonyme aussi employé carrousel, en référence au cylindre contenant les diapos du projecteur.
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
737
Modifié par animostab le 10/02/2015 à 04:02
Modifié par animostab le 10/02/2015 à 04:02
salut
bien sur pas besoin d'un plugin de slider pour faire un truc aussi simple
un petit script suffit avec la bibliothèque jquery
la technique
une div (.image) dans laquelle il y a 2 div :
- la 1ere (.change) est en position relative
- la 2eme (.hover) est en position absolute et en display none (cachée) à la même place de la 1ere div
quand on fait hover sur la div parente (.image) le scipt fait apparaitre la 2eme et disparaitre la 1ere
au mouseout le contraire se fait
tout ca avec avec les fonctions hover(), fadeIn() et fadeOut() de jquery
voici un petit exemple qui vaut mieux qu'un grand discours
tu remplaces image1.jpg et image2.jpg par tes propres images et tu regles les width et height en fonction de tes images / site
dans le script (2000) c'est le temps de transition en millisecondes
et voila, un petit merci n'est pas de refus
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.
bien sur pas besoin d'un plugin de slider pour faire un truc aussi simple
un petit script suffit avec la bibliothèque jquery
la technique
une div (.image) dans laquelle il y a 2 div :
- la 1ere (.change) est en position relative
- la 2eme (.hover) est en position absolute et en display none (cachée) à la même place de la 1ere div
quand on fait hover sur la div parente (.image) le scipt fait apparaitre la 2eme et disparaitre la 1ere
au mouseout le contraire se fait
tout ca avec avec les fonctions hover(), fadeIn() et fadeOut() de jquery
voici un petit exemple qui vaut mieux qu'un grand discours
tu remplaces image1.jpg et image2.jpg par tes propres images et tu regles les width et height en fonction de tes images / site
dans le script (2000) c'est le temps de transition en millisecondes
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>petit script simple</title>
<style>
.image {
position:relative;
width: 100%;
height: 100px;
}
.change {
position:relative;
width: 100%;
height: 100px;
text-align:center;
}
.hover {
display:none;
position:absolute;
top:0;
left:0;
width: 100%;
height: 100px;
text-align:center;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class="image">
<div class="change"><img src="image1.jpg" /></div>
<div class="hover"><img src="image2.jpg" /></div>
</div>
<script>
$(".image").hover(function(){
$(".hover").fadeIn(2000);$(".change").fadeOut(2000);
},function(){
$(".hover").fadeOut(2000);$(".change").fadeIn(2000);
});
</script>
</body>
</html>
et voila, un petit merci n'est pas de refus
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.
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
737
15 févr. 2015 à 00:23
15 févr. 2015 à 00:23
dire merci ca t'aurais ecorché la gu... bouche ???
kittyet
Messages postés
27
Date d'inscription
dimanche 24 février 2013
Statut
Membre
Dernière intervention
18 mai 2015
18 mai 2015 à 19:07
18 mai 2015 à 19:07
Je trouve ta remarque un peu déplacé mais merci quand même.
10 févr. 2015 à 01:32
Il y a ça dans la bibliothèque graphique(implémenté dans HTML5) javascript nommé CANVAS , mais là ça devient un peu complexe pour un débutant en programmation.