28173 sujets

CSS et mise en forme, CSS3

Menu css avec map

Bonjour, je souhaite faire un menu grace aux css et avec une map.

l'image de base est celle-ci :
http://www.veknalsace.info/cf2007/images/cartes_nb.gif

et lors du passage sur une carte on obtiendrais ça:
http://www.veknalsace.info/cf2007/images/pentex.gif

Alors, j'ai fait le mapage de l'image, mais apres, je ne sais plus quoi faire, etant donné que je ne souhaite utiliser que css et donc pas de js, ni de flash, est ce possible?

Merci d'avance
Modifié par rano96 (09 Apr 2007 - 18:50)
Bonjour,

Sans JS, j'aurais fait comme ça :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
			
<head> 
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <style type="text/css"> 
#conteneur {
	width: 500px;
	height:300px;
	background-color: lime;
	margin: auto;
	border: 1px solid black;
}

ul{
	List-style-type: none;
	overflow: hidden;
	margin: 100px auto;
	padding-left: 20px;/* en commentaire conditionnel pour IE6 padding-left: 40px;*/
	width: 320px;/* en commentaire conditionnel pour IE6  width: 300px */
}

li {
	width: 100px;
	height: 130px;
	float: left;
	text-align: center;	
	margin-left: -20px; 	
}

li a {
	display: block;
	text-decoration: none;
	color: #000;	
	width: 100px;
	height: 130px;
}

li a span{
	display: block;
	width: 100px;
	height: 100px;
	color: #000;	
	margin-top: 30px;	
}

li a:hover span{
	margin-top: 0px;
}

li a:hover{	/* pour IE6 */
	background: none;
}

#lien1{
	background: yellow;
}	

#lien2{
	background: red;
}

#lien3{
	background: blue;
}

#lien4{
	background: green;
}
  </style>
 
</head>

<div id="conteneur">
	<ul>
		<li><a href="#"><span id="lien1">lien1</span></a></li>
		<li><a href="#"><span id="lien2">lien2</span></a></li>
		<li><a href="#"><span id="lien3">lien3</span></a></li>
		<li><a href="#"><span id="lien4">lien4</span></a></li>	
	</ul>
</div>
</body>
</html>


A condition de bien gérer les découpes et la transparence...
Le probleme qu'il y a c'est que je n'ai pas les decoupes exactes, dans ta méthode.

Je me demandais, si il n'y a pas moyen de modifier le background image d'une map ou quelquechose dans le genre.
Bonjour,

Sans les découpes ça va être effectivement "hard", mais il ne me semble pas possible de faire un hover sur une map (??)
ca n'a pa l'air de fonctionner, en fait, de ce que j'ai essayé.

je me retrouve avec du javascript, tres simple en fait, le pb, c'est que IE7, fait sa barre de protection à chaque, et ça me soule grave...
Sujet clos
Aller à