Texte visible au survol d'une image

Bonsoir,
J'ai vu le sujet "masquer des éléments sans javascript".
Je voudrais m'en inspirer pour que au survol d'une image, un texte (toujours placé à un endroit précis) soit visible ; il doit etre différent selon l'image (4 images prévue).
Ben, je m'en sort pas !
Pouvez-vous m'aider, SVP ?
Merci.

Salut,

Peut être que pour t'aider il faudrait commencer par nous aider :
- une explication détaillée du problème que tu rencontre dans ton cas de figure
- une page en ligne pour constater nous même ce que çà donne.
- éventuellement l'intégralité du code (html+css+js) si tu ne peux pas fournir une page en ligne.

Bonjour,

Merci de m'aider.
J'ai mis la page ici :
http://dadsurweb.free.fr/IN&OUT/musicos.html
A savoir que les problèmes sont différents sur IE et sur Firefox ! ..
@ +

Bonjour,

C'est quelque chose qui se fait relativement facilement avec Javascript (rha la la, c'est quoi cette flopée de tutoriels «Faire tel machin sans Javascript parce que Javascript çayleumal» ? N'importe quoi... ).

salut,

pouvez-vous me donner un site, un tuto, svp ?
Merci.

Salut,

Avec les events javascript vous pouvez utiliser onmouseover et onmouseout.

<img ... onmouseover="affiche('mon message');" onmouseout="efface();" />

<!-- plus un div aprés vos images -->

 <div id="divlegende" style="width:...px;height:...px"></div>

et par exemple

function efface() {
  div = document.getElementById("divlegende");
 div.innerHTML = "";

}

edit: c'est dommage quand même pour l'accessibilité. avec ma methode il n'y a plus l'info si JS desactivé.

ah et oui, pour les accents JS n'accepte pas les entités mais digere la forme octal par ex é->\351
Modifié par CPascal (02 May 2007 - 15:09)

Cette methode marche bien (je m'en sert pour mes menus) mais quelq'un ma dit sur ce forum que 10% des utilisateurs n'ont pas le javascript activé (surtout les entreprises). C'est pas énorme (surtout si ton site n'est pas destiné aux entreprises...).

CPascal a écrit :

c'est dommage quand même pour l'accessibilité. avec ma methode il n'y a plus l'info si JS desactivé.

! en fait, faut tenir compte de tout plein de choses :
Là ça marche pas avec Internet Explorer, Là c'est avec FireFox que ça marche pas ; ici ça marche pas avec Javascript désactivé ; sans compter ceux qu'ont pas Flash ; pi y'a aussi ceux qui sont en haute résolution alors que les autres sont en 800x600 ... ...
Bon, je vais voir ce que je peux faire en CSS...
J'espère qu'on peut pas désactiver le CSS
Merci à vous.

dadpub a écrit :

J'espère qu'on peut pas désactiver le CSS

Ben si. De nombreux agents utilisateurs (tous les non-graphiques par exemple) ne tiennent pas compte de CSS.

et oui on peut desactiver le CSS .

Mais jusqu'a il y a 2 jours je ne savais pas comment faire et je ne pense pas que ce soit une activité courante.

En fait, j'ai installé un add Web developer pour FF et je le trouve pas mal.

En autre il permet de desactivé rapidement un peu tous pour voir comment ça donne quand c'est desactivé.
Modifié par CPascal (02 May 2007 - 16:10)

...sans compter qu'un utilisateur peut demander que ses propres préférences de style supplantent celle que tu auras choisies

Ce qui est dommage avec la méthode javascript donnée, c'est qu'en effet, la légende n'est pas accssible sans javascript. Or, c'est tout à fait possible de faire une légende qui s'affiche quand on passe sur l'image tout à fait accessibles à tous.

Moi je ferai ca en CSS :

xtml

<a href="#" class="rolloverImage">
<img src="..." alt="...">
<span>Legene</span>
</a>

css

a.rolloverImage {
position: relative;
}

a.rolloverImage span {
position: absolute;
bottom: 0px;
width: 50px /* exemple  */
display:none;
}

a.rolloverImage:hover span {
display:block;
}

Je n'ai pas testé, donc pas sur que ca marche... Mais je pense que le principe est bon.

Un coup d'oeil sur la doc de nextSibbling() : ça permet de récupérer l'élement suivant. Attention cependant, IE ne tient pas compte des espaces dans le code source alors que Gecko/Firefox oui !

sinon pour une légende tu remplis la balise title mais je pense pas que tu puisses placer le texte ou tu veux.

Bon, on se calme un peu les gens, et on se reprend ?

La solution full Javascript est effectivement à proscrire. Parce que pas accessible sans Javascript. Et devinez quel est votre utilisateur préféré qui n'a pas Javascript ? Google. Et ses amis les robots d'indexation.

Yahrou a proposé un début de solution en proposant de revenir à un code HTML qui contiendrait naturellement l'information. C'est très bien. Mais si c'est pour utiliser une technique bancale d'interaction utilisateur-contenu à base de pseudo-classes CSS détournées de leur fonction, c'est pas terrible.

On va donc reprendre dans l'ordre :
- le contenu, c'est en HTML ;
- la mise en forme et le positionnement, c'est en CSS ;
- l'interaction de l'utilisateur avec le contenu, c'est en Javascript.

On peut commencer par le code HTML :

<p class="portrait"><img alt="..." src="..." /> <span id="legende1">La tête à toto</span></p>
<p class="portrait"><img alt="..." src="..." /> <span id="legende2">Cadet Rousselle a trois maisons</span></p>

En Javascript, on va :
- effacer les légendes avec un display: none (en JS et pas directement en CSS, histoire qu'elles soient affichées si Javascript est désactivé) ;
- au survol d'une image, appliquer une classe CSS à la légende correspondante, et la passer en display: block par exemple ;
- lorsqu'on quitte l'image, repasser en display: none.
En CSS, on aura déterminé cette classe pour un affichage du texte pile là où on veut.

Enfin, il devrait être possible de faire une fonction Javascript qui soit réactive aussi bien au survol qu'à la navigation au clavier.

Je ne détaille pas, je suis une bille en JS. Mais je suis persuadé qu'on peut l'utiliser de la manière que je décris (ou mieux encore).

Bonjour,

Etant nul en JS (entre autres) je m'en suis tenu au HTML + CSS.
J'ai utilisé la méthode de yahrou et j'espère que ça marchera pour la plupart des utilisateurs internautes.
@ +

Merci.