A voir également:
- Cherche balise en html
- Editeur html - Télécharger - HTML
- Espace en html - Astuces et Solutions
- &Nbsp html ✓ - Forum Webmastering
- Br html ✓ - Forum Webmastering
- [HTML] - á et les autres - Forum HTML
4 réponses
Bonjour,
Personnellement, je n'utilise pas le JavaScript, donc, je cherche des astuces pour y arriver seulement avec le couple (x)html/css.
Introduction : J'ai deux images : img1.png et img2.png (elles ont la même taille, c'est TRÈS important)
Etape 1 : Je crée un block div dans ma page html et j'ajoute un attribut class afin de pouvoir le paramétrer en CSS. J'ai donc :
Etape 2 : Je mets une image dans ce block à laquelle j'ajoute un autre attribut :
Etape 3 : On va voir dans notre feuille de style CSS où on paramètre les deux attributs class :
ET LE TOUR EST JOUÉ ! On a maintenant un div qui a pour arrière-plan l'image 1, toujours visible, dans ce div, on a l'image 2 qui est invisible (opacity:0) et qui devient visible quand on met le curseur dessus (hover).
J'espère t'avoir aidé. Si tu n'as pas appris le CSS, je te conseille vivement le tutoriel du site du zéro http://www.siteduzero.com/tutoriel-3-13666-apprenez-a-creer-votre-site-web.html.
Personnellement, je n'utilise pas le JavaScript, donc, je cherche des astuces pour y arriver seulement avec le couple (x)html/css.
Introduction : J'ai deux images : img1.png et img2.png (elles ont la même taille, c'est TRÈS important)
Etape 1 : Je crée un block div dans ma page html et j'ajoute un attribut class afin de pouvoir le paramétrer en CSS. J'ai donc :
<div class="block"></div>
Etape 2 : Je mets une image dans ce block à laquelle j'ajoute un autre attribut :
<div class="block"><img src="img2.png" alt="image" class="image"></div>
Etape 3 : On va voir dans notre feuille de style CSS où on paramètre les deux attributs class :
.block {background-image: url("img1.png")}
.image {opacity:0}
.image:hover {opacity:1}
ET LE TOUR EST JOUÉ ! On a maintenant un div qui a pour arrière-plan l'image 1, toujours visible, dans ce div, on a l'image 2 qui est invisible (opacity:0) et qui devient visible quand on met le curseur dessus (hover).
J'espère t'avoir aidé. Si tu n'as pas appris le CSS, je te conseille vivement le tutoriel du site du zéro http://www.siteduzero.com/tutoriel-3-13666-apprenez-a-creer-votre-site-web.html.
Utilisateur anonyme
18 sept. 2011 à 17:31
18 sept. 2011 à 17:31
je ne connais rien au javascript -_-" mais merci bien, je vais me renseigner dessus
avion-f16
Messages postés
19249
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
15 juin 2024
4 505
18 sept. 2011 à 19:05
18 sept. 2011 à 19:05
Salut,
Voilà un tutoriel pour apprendre le Javascript :
https://openclassrooms.com/fr/courses/5543061-ecrivez-du-javascript-pour-le-web?archived-source=1916641
Et encore deux :
- https://www.w3schools.com/js/default.asp
- https://developer.mozilla.org/fr/docs/Web/JavaScript
Voilà un tutoriel pour apprendre le Javascript :
https://openclassrooms.com/fr/courses/5543061-ecrivez-du-javascript-pour-le-web?archived-source=1916641
Et encore deux :
- https://www.w3schools.com/js/default.asp
- https://developer.mozilla.org/fr/docs/Web/JavaScript
19 sept. 2011 à 14:20
19 sept. 2011 à 17:51
19 sept. 2011 à 17:59
19 sept. 2011 à 18:02
Dans ce cas, utilise l'outil DewSlider de Alsacréations http://www.alsacreations.fr/dewslider.html
il est entièrement paramétrable grâce à un formulaire (qui se trouve plus bas dans la page) et donne un résultat simple, léger, avec des transitions...
21 sept. 2011 à 19:48