28172 sujets

CSS et mise en forme, CSS3

Rollover un peu spécial

J'aimerais effectuer un rollover, voir image ci joint :
Je voudrais faire apparaitre du texte en image (je pense que plus simple) à coté d'une icone de menu quand on clique dessus.
J'aimerais avoir comme zone de clik seulement l'icone.
Mon code de départ est ca : (c'est à dire un rollover avec :hover, maiscela ne me plait pas car du coup la zone de séléction est trop importante) :
#menu1 {
	position:absolute;
	top:430px;
	left:120px;
	margin:0px;
	height: 104px;
	width: 197px;
}
#menu2 {
	position:absolute;
	top:480px;
	left:160px;
	margin:0px;
	height: 120px;
	width: 244px;
}
#menu3 {
	position:absolute;
	top:530px;
	left:430px;
	margin:0px;
	height: 101px;
	width: 96px;
}
#menu4 {
	position:absolute;
	top:510px;
	left:540px;
	margin:0px;
	height: 105px;
	width: 211px;
}
#menu5 {
	position:absolute;
	top:450px;
	left:650px;
	margin:0px;
	height: 105px;
	width: 242px;
}
#menu1:hover {
    background-image:url(images/hover_menu1.png);
	cursor:pointer;
	position:absolute;
	top:430px;
	left:120px;
	margin:0px;
	height: 104px;
	width: 197px;
}
#menu2:hover {
    background-image:url(images/hover_menu2.png);
	cursor:pointer;
	position:absolute;
	top:480px;
	left:160px;
	margin:0px;
	height: 120px;
	width: 244px;
}


-->
</style>
</head>

<body>
<div id="conteneur1">
<div id="menu1"><img src="images/menu1.png" alt="mobilier" />
</div>
<div id="menu2"><img src="images/menu2.png" alt="realisation" />
</div>

<div id="menu3"><img src="images/menu3.png" alt="projet" />
</div>
<div id="menu4"><img src="images/menu4.png" alt="mobilier" />
</div>
<div id="menu5"><img src="images/menu5.png" alt="contact" />
</div>

<div id="logo"><img src="images/logo.png" alt="Arch-FS" />
</div></div>
<div id="conteneur2">
</div>
</body>
</html>


AVEZ vous une idée ? css ou javascript ?
Modifié par dreadstock (21 Feb 2009 - 16:31)
dreadstock a écrit :
css ou javascript ?

Les deux mon capitaine. Positionnement et mise en forme en CSS. Gestion des évènements (survol, clic) et de la manipulation du contenu HTML (ajout de classe pour afficher/masquer un élément, modification d'un attribut src pour l'image centrale éventuellement...) en JavaScript. Normal, quoi.
Sujet clos
Aller à