18073 sujets

Questions générales et questions de débutants

[Résolu] Texte qui apparait au survol d'une image

D'après ce que j'ai compris, on appelle ça un rollover...

Bon, j'ai 5 images côte à côte. Ce sont en fait des liens. J'aimerais faire apparaitre un texte au survol de chaque image: une légende rapide annonçant la page qui va suivre.

Le texte devra apparaitre sous les images, toujours au même endroit.

Comment puis-je m'y prendre ?

Merci.
Modifié par vokuro (26 Aug 2005 - 23:40)
Bonjour.
Il faut que tu fasses ça en javascript, parce qu'en CSS seul, avec IE, tu n'es pas sorti de l'auberge...

Donc.
Code javascript : 


function afficherMessage (message) {
var obj = document.getElementById('madiv');
if (!message) 
obj.style.display = "none";
else {
obj.style.display = "block";
obj.innerHTML = message;
}
}



Code XHTML :

<img ...... onmouseover="afficherMessage('Bonsoir, cliqez iic pour découvrir cette rubrique super géniale !');" onmouseout="afficherMessage(null);" />
[/code]
Administrateur
QuentinC a écrit :
Bonjour.
Il faut que tu fasses ça en javascript, parce qu'en CSS seul, avec IE, tu n'es pas sorti de l'auberge...

Donc.
Code javascript :

Hmm sans JavaScript, tout à fait fonctionnel sous IE :
http://forum.alsacreations.com/faq/#item11
Rien n'empêche d'appliquer le principe à une image.

Taper sur IE c'est rigolo, mais en abuser, cela devient moins drôle.

vokuro a écrit :
J'aimerais faire apparaitre un texte au survol de chaque image: une légende rapide annonçant la page qui va suivre.
D'ailleurs, pourquoi ne pas utiliser une infobule classique (title) tout simplement ?

EDIT : au fait, Bonjour à toi aussi Vokuro Smiley ohwell
Modifié par Raphael (26 Aug 2005 - 22:18)
Bonsoir ! Smiley ohwell

J'ai trouvé une solution qui me plait bien en utilisant une solution en Javascript trouvée (empruntée) sur le site http://www.slconstantia.com/.

<SCRIPT LANGUAGE="JavaScript">
  <!--
    function ChangeMessage(message,champ) {
      if(document.getElementById)
        document.getElementById(champ).innerHTML = message;
    }
  --> 
  </SCRIPT>


<img src="..." alt="..." onMouseOver="ChangeMessage('...','rollover')" 

onMouseOut="ChangeMessage('...','rollover')"/>


Merci de votre aide et bonne soirée.
Modifié par vokuro (26 Aug 2005 - 23:39)
Administrateur
vokuro a écrit :
J'ai trouvé une solution qui me plait bien en utilisant une solution en Javascript trouvée (empruntée) sur le site http://www.slconstantia.com/

Tiens par curiosité, comment as-tu trouvé ce site ?

Question subsidiaire : pourquoi vouloir utiliser des scripts lorsqu'on peut faire sans ?
Héhé : j'ai trouvé ce site dans ton cv ! Smiley confused

Et pourquoi le javascript ?

Le solution "infobulle" personalisée ne me plait pas.
J'avais trouvé une solution en CSS pure (en jouant avec display) qui marchait avec Safari et Firefox mais pas du tout avec IE : malgré la position absolute, il décalait la posistion du texte en fonction de l'image survolée... Donc, javascript. Le résultat est exactement celui que je veux et passe bien sur les 3 navigateurs.

Voilà. Il existe surement des solutions plus élégante mais pour mon ptit site perso, ça ira bien. Smiley cligne

Merci.
Sujet clos
Aller à