Cherche balise en html
Utilisateur anonyme
-
Gaël -
Gaël -
Bonjour, je suis nouveau dans le monde du html et je ne connais pas beaucoup de balise et je souhaiterais pouvoir faire :
_lorsque je passe avec la souris sur une image1, elle disparait et laisse place a une image2
_Ou, lorsque je passe avec la souris sur une image1, une image2 disparait et laisse place a une image3
Si cela est possible, pouvez-vous me donner le code qui permet de le faire ?
Merci d'avance, Karbonne
_lorsque je passe avec la souris sur une image1, elle disparait et laisse place a une image2
_Ou, lorsque je passe avec la souris sur une image1, une image2 disparait et laisse place a une image3
Si cela est possible, pouvez-vous me donner le code qui permet de le faire ?
Merci d'avance, Karbonne
A voir également:
- Cherche balise en html
- Editeur html - Télécharger - HTML
- Espace en html - Astuces et Solutions
- Espace HTML ✓ - Forum HTML
- [**] Balise pour un espace vide en hml. Merci ✓ - Forum Webmastering
- /Var/www/html/index.html ✓ - Forum Linux / Unix
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.
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
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...