Partage
  • Partager sur Facebook
  • Partager sur Twitter

Afficher une image avec hover

Sujet résolu
stargate pegasus
23 mai 2009 à 11:32:25

Bonjour,

J'aurais aimé afficher une image lorsqu'on pointe la souris dessus donc je me doute bien qu'il faut utiliser la balise hover mais pour afficher une image en css je ne vois pas trop comment faire.
  • Partager sur Facebook
  • Partager sur Twitter
zingwai
23 mai 2009 à 14:34:47

Salut,

Pour afficher une image, tu utilises simplement background-image: url('image.png'); .
Par exemple, tu as un paragraphe en html <p>Mon paragraphe</p> , du côté de ton CSS pour afficher une image au survol : p:hover { background: url('clock.png') no-repeat; } .
  • Partager sur Facebook
  • Partager sur Twitter
Pwaite.net > Transfert de crédit téléphonique et monétisation de site web                                                                                        « I am awesome »
stargate pegasus
23 mai 2009 à 14:38:48

ha oui zut j'avais pas vu mais je me suis mal exprimé, c'est un tout petit peu plus compliqué
en fait j'aimerais affiché une image lorsqu'on pointe un lien qui n'est pas au même emplacement que l'image
  • Partager sur Facebook
  • Partager sur Twitter
le noob du script
23 mai 2009 à 14:43:07

Bonjour,
Il faut utiliser du javascript :
va sur l'éditeur javascript.com et tu trouvera un effet comme sa .

Ciao
  • Partager sur Facebook
  • Partager sur Twitter
zingwai
23 mai 2009 à 14:44:17

Citation : stargate pegasus

en fait j'aimerais affiché une image lorsqu'on pointe un lien qui n'est pas au même emplacement que l'image


Je ne comprends pas ce que tu souhaites faire.
  • Partager sur Facebook
  • Partager sur Twitter
Pwaite.net > Transfert de crédit téléphonique et monétisation de site web                                                                                        « I am awesome »
stargate pegasus
23 mai 2009 à 14:44:23

je préférais rester en css mais si tu as un lien j'irais voir quand même

voilà un schéma j'espère que c'est clair ^^
Image utilisateur
  • Partager sur Facebook
  • Partager sur Twitter
le noob du script
23 mai 2009 à 20:38:13

Bonjour ,
Tu ne peux pas rester en css mais comme je suis de très bonne humeur , je te l'ai fait ;)

<html>
<head>
<!-- DEBUT DU SCRIPT -->
<SCRIPT LANGUAGE="JavaScript">
/*
SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
http://www.editeurjavascript.com
URL du script : http://www.editeurjavascript.com/scripts/scripts_textes_1_84.php
Ne copiez ce code qu'une fois dans votre page
*/

function ChangeMessage(message,champ)
  {
  if(document.getElementById)
    document.getElementById(champ).innerHTML = message;
  }
</SCRIPT>
</head>
<body>
<!-- CODE DU LIEN - VOUS POUVEZ EN PLACER PLUSIEURS SUR VOTRE PAGE -->
<A HREF="" onMouseOver="ChangeMessage('Texte !!!!!!!!!!','ejs_texte')" onMouseOut="ChangeMessage('','ejs_texte')"><img src="http://www.editeurjavascript.com/img/architecture/logo.gif"/></A>

<!--
CODE DU BLOC QUI VA AFFICHER LE TEXTE QUAND
LE LIEN SERA SURVOLE PAR LA SOURIS
NE COPIER CE CODE QU'UNE FOIS DANS LA PAGE
-->
<DIV ID="ejs_texte"></DIV><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><noscript><a href="http://www.editeurjavascript.com/">ajax</a></noscript>
</body>
</html>

Met ton sujet résolu stp
Ciao
  • Partager sur Facebook
  • Partager sur Twitter
stargate pegasus
24 mai 2009 à 17:50:05

merci beaucoup, je t'en suis très reconnaissant je vais essayé ceci même si le javascript ne me plait qu'à moitié. Mais je vais m'arranger pour que ça ne pénalise pas vraiment les personnes qui ont désactivé le javascript
  • Partager sur Facebook
  • Partager sur Twitter
redabenz
1 avril 2014 à 17:50:43

zingwai Bonjour,

Pourriez-vous m'écrire un exemple SVP ? J'aime bien cette méthode..

-
Edité par redabenz 1 avril 2014 à 17:52:22

  • Partager sur Facebook
  • Partager sur Twitter
JoanFernandez
1 juillet 2020 à 11:06:27

bonjour . voila j'aimerais mettre une image en hover lorsque je mes le curseur sur un texte , j'ai donc utiliser cette réponse(1). le résultat est parfait sauf que j'aimerais que le texte disparaisse lorsque l'image apparait . cela est-il possible ?

(1)zingwai a écrit:

Salut,

Pour afficher une image, tu utilises simplement background-image: url('image.png'); .
Par exemple, tu as un paragraphe en html <p>Mon paragraphe</p> , du côté de ton CSS pour afficher une image au survol : p:hover { background: url('clock.png') no-repeat; } .

l



  • Partager sur Facebook
  • Partager sur Twitter
AbcAbc6
1 juillet 2020 à 11:43:36

@JoanFernandez Bonjour, merci de ne pas déterrer d'ancien sujet résolu.

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

  • soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
  • soit de créer un nouveau sujet décrivant votre propre contexte
  • ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. En cas de désaccord, me contacter par MP.

  • Partager sur Facebook
  • Partager sur Twitter