11548 sujets

JavaScript, DOM et API Web HTML5

Rollover texte

Bonjour Smiley smile

J'ai un petit probleme

J'aimerais essayer de faire un rollover

Pour le moment vous allez me dore pas de probleme a trouver ce genre de chose la

Mais a tout ceux que j'ai trouvé on part d'une image vers une autre image

Mais ce que je recherche c'est d'un texte (genre Essai) pour arriver a une image et ca je ne trouve pas desole c'est peut-etre tout bête mais j'ai vraiment du mal a trouver

voila Smiley smile

Si quelqu'un pouvait m'aider se serait gentil merci
En faite j'aurais voulu que le texte serait comme un genre de lien et que quand le visisteur irait sur le site et mettra le curseur de la souris sur le texte l'image apparait

Si tu vois ce que je veut dire
Genre on voit un texte, et après on voit une image à la place du texte ?
Ben pourquoi pas une image de texte puis une image d'image ?

Ou alors, encore plus sympa :
(on dit que l'image du bouton fait 100×40px, ok ?)
---- XHTML ----
<a class="rollover"><span>Mon lien</span></a>

----- CSS -----
a.rollover {
	width: 100px;
	height: 40px;
	background: white;
}
a.rollover:hover span {visibility: hidden;}
a.rollover:hover {background: white url(monimage.png) no-repeat;}

Quelque chose comme ça ?
Stifler a écrit :
En faite j'aurais voulu que le texte serait comme un genre de lien et que quand le visisteur irait sur le site et mettra le curseur de la souris sur le texte l'image apparait

Si tu vois ce que je veut dire

Je vois que tu veux dire « En fait j'aurais voulu que le texte soit comme un genre de lien et que quand le visiteur va sur le site et met le curseur de la souris sur le texte, l'image apparait. »

Non, désolé, je le referais plus, promis Smiley confused (note : une faute s'est volontairement glissée dans cette phrase).

En fait, tu voudrais afficher une image en dehors de ta zone de lien, c'est ça ? On passe le curseur sur le lien, et ailleurs sur la page une image s'affiche ?
Oui c'est exactement ca Smiley smile

Si possible comme l'exemple cité au dessus Smiley rolleyes

desole pour les fautes Smiley confused
Modifié par Stifler (21 Apr 2006 - 23:59)
Stifler a écrit :
Rien ne vaut un exemple

http://www.wowdbu.com/7.html?m=3&pattern=assassin

Lol hier soir mon colloc m'a posé une question exactement sur ce truc là !

Si on regarde le code, le bloc de texte (que l'on peut très bien remplacer par une image) est compris dans le code HTML, à l'intérieur du lien que l'on survole. C'est le même principe que j'utilise dans le petit exemple que je donnais ci-dessus, pour cacher le texte. Ici c'est l'inverse, on l'affiche.

Sauf que dans leur cas il n'utilisent pas que du CSS, mais aussi pas mal de javascript un peu lourd à gérer je trouve. En pur CSS on peut sans doute faire quelque chose d'assez proche, mais on n'aura pas par exemple de déplacement du bloc pour suivre la souris lorsqu'elle se déplace sur le lien.

Petit exemple :
---- HTML ----
<a class="rollover">
	Mon lien
	<img alt="bla bla" src="monimage.png" />
</a>

----- CSS -----
a.rollover img {display: none;}
a.rollover:hover img {
	display: block;
	position: absolute;
	margin-top: 1.5em;
}

Un truc du genre.
Stifler a écrit :
desole pour les fautes Smiley confused

Non c'est moi, je devrais pas. Je sais que c'est pas toujours évident. Par contre, petit conseil : l'utilisation des majuscules et surtout des accents permet une meilleure lisibilité du texte. Au niveau du mot et de la phrase, c'est aussi important que le fait de faire des paragraphes pour aérer un texte un peu long, par exemple.

Je ne pense pas qu'il y ait une "honte" à avoir si l'on a du mal à écrire parfaitement (au passage, personne n'écrit parfaitement, et je commence à penser que dans mon petit exercice de correction de tout à l'heure j'ai fait une faute de concordance des temps…). Par contre, on peut affirmer ceci : plus une demande d'aide ou d'information sera bien rédigée (sur la forme : lisible ; sur le fond : claire et compréhensibe), plus elle aura de chance d'obtenir une réponse satisfaisante.
On appelle ça le pragmatisme linguistique Smiley lol
Stifler a écrit :
Merci pour ces réponses c'est tres gentil

et je vais vous montrer ce que je voudrait faire en faite

Rien ne vaut un exemple

http://www.wowdbu.com/7.html?m=3&pattern=assassin

Si tu met ton cursuer vert le texte en bleu il y a du texte qui apprait moi j'aurait preferé une image


Bonjour,
mpop a raison, cet exemple est une infobulle javascript dans laquelle tu peut mettre ce que tu veux, même une image toute seule.
comme ici, une version plus accessible.
voir plus bas dans la page :
Des popups qui s'affichent en survolant des liens (infobulles améliorées)
J'avais fait aussi un test d'infobulle css qui fonctionne sur Opéra
Bonjour,

J'essaie de résoudre un soucis similiaire : faire un menu rollover dans une cellule tableau (sic). Pensez-vous cela possible ?

Je m'explique : dans la partie haute où y'a les menus, j'aimerai que le menu soit du texte et non une image. Après, quand on passe la souris dessus, y'a le fond de la cellule ou le fond du bloc css peu importe qui change.

Est-ce possible ? Cela m'éviterai d'utiliser du javascript en fait...

Pages trouvées sur le web :
- http://www.search-this.com/website_design/css_rollover_buttons.aspx
- http://mammouthland.free.fr/cours/css/cours7.php

J'ai posté le même message dans le topic dédié au CSS vu qu'ici c'est pour JavaScript. Merci de me répondre là bas !
Modifié par stefhan (18 May 2006 - 13:37)
Sujet clos
Aller à