Cherche balise en html

karbonne -  
 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

4 réponses

  1. Gaël
     
    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 : 
    <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.
    4
    1. forkshovel
       
      C'est du CSS, justement l'intérêt c'est de pas avoir à utiliser du javascript.
      0
    2. karbonne
       
      Merci beaucoup, mais est-ce que tu sais si on peux en mettre plus que deux superposée ?
      0
    3. Gaël
       
      Oui, le couple HTML 5 / CSS 3 fonctionne très bien, c'est pour cela que je l'utilise, il est plus propre est plus moderne que le javascript.
      0
    4. Gaël
       
      Je ne comprends pas très bien ce que tu veux faire en superposant 3 images... Tu veux un genre de diaporama ?
      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...
      0
    5. karbonne
       
      MERCI BEAUCOUP Gaël, c'est exactement ce que je cherchais et j'avais presque abandonné l'idée. =)
      0
  2. karbonne
     
    je ne connais rien au javascript -_-" mais merci bien, je vais me renseigner dessus
    0
  3. avion-f16 Messages postés 19182 Date d'inscription   Statut Contributeur Dernière intervention   4 511
     
    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
    0
    1. karbonne
       
      ok merci, je vais optimiser pour le site de zero
      0
  4. gasg
     
    c'est du javascript avec l'evenement onmouseover()
    -1

Discussions similaires

Apache2 accès à autre que /var/www/html/index.html
merithes -
mamiemando -

3 réponses
Couleur du texte en html
Womack -
telliak -

9 réponses
&nbsp ; Quelle Fonction ?
-Jeff- -
Helif -

15 réponses
Espace en HTML
baissaoui -
baissaoui -

0 réponse
Faire passer du texte SOUS une image HTML / CSS
Mihai -
animostab -

2 réponses