28234 sujets

CSS et mise en forme, CSS3

Tranformation image -> texte lors de survol

Bonjour à tous,

pour mon 1er post sur ce forum, je vous pose la question suivante :

- j'ai un menu avec des images.
- lorsque je survole ces images, je voudrais qu'elles disparaissent et soient remplacées par du texte.

Soit avant/apres survol :
http://www.colographie.fr/travaux.png

Pendant survol :
Travaux

Pour l'instant, la partie HTML/CSS de mon menu ressemble à cela :

<ul id="menu">
	<li><a href="#"><img src="travaux.png" alt="travaux" /></a></li>
</ul>


ul#menu {
	float: left;
	margin: 0;
	margin-top: 20px;
	padding: 0;
	list-style-type: none;
}

#menu li {
	margin-bottom: 20px;
}
#menu a img {
	text-decoration: none;
	border: 0 none;
}


Comment puis-je faire pour réaliser cela ?

Merci à vous et au plaisir d'avoir quelques réponses Smiley cligne

Rémi

ps: autre chose ; quelle est la différence en CSS entre ul#menu et #menu ul ?
Modifié par remi_ (13 Nov 2006 - 23:33)
remi_ a écrit :

ps: autre chose ; quelle est la différence en CSS entre ul#menu et #menu ul ?

Salut Rémi,

Voilà déjà pour le post-scriptum :

- dans le 1er cas tu sélectionnes la liste non-ordonnée identifiée par "menu".
- dans le second cas tu sélectionnes une liste non-ordonnée inclue dans un conteneur identifié par "menu".

Rien à voir donc. Smiley cligne 


<ul id="menu">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<ul>


<div id="menu">
<ul>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<ul>
</div>

Modifié par 20cent (14 Nov 2006 - 00:17)
Bonjour,

ockonor, merci pour le lien, mais j'avais déjà vu cela Smiley cligne

En fait, mon problème n'est pas tout a fait le même, cela aurait été trop facile !

Dans mon menu, j'ai par défaut plusieurs images :
- toto.png
- coucou.png
- ...

quand je passe la souris sur ces images, je veux avoir affiché du texte, et que l'image disparaisse.

Avec la méthode donnée, on travaille avec une seule & même image de background lors du roll-over, ce qui n'est pas mon cas.

Je pourrai faire un truc qui lorsque je survole mes images, ça m'affiche une autre image avec du texte (et non pas du vrai texte), mais cela me pose probleme :
- les images sont toutes différentes
- ca m'obilgerai a faire une classe différente pour chaque item du menu.

++

Remi
Salut Remi_ ,

Et désolé j'avais mâl compris,

Voilà je t'ai réalisé quelque chose, mais je ne crois pas que se soit vraiment se que tu cherches, mais ça règle le problème d'une image textuelle.

J'ai biensûr essayé avec du display:none ou visibility mais sa ne donne pas le résultat voulu sur IE ( et oui notre bon vieux IE!!)

Voilà le lien * Lien *

Biensûr à toi d'ajuster la taille du texte, le padding et le Letter spacing Smiley langue
Sujet clos
Aller à