18041 sujets

Questions générales et questions de débutants

Probleme pour differencier les area shape

Bonjour a tous ,
j'aimerai savoir comment faire pour différencier les "area shape" dans une map pour pouvoir leur appliquer un style en css.J'ai essayé en mettant un id="blabla" mais lorsque je test ma page rien ne se passe.Cela marche uniquement lorsque j'applique l'id a la map mais du coup toutes mes zones reactives sont forcément identiques.
Pour préciser je voudrai appliquer un :hover different sur chaque zone pour qu'une image s'affiche au survol.
Je vous donne mes codes avec le id="macuisine" placé a priori au mauvais endroit !!!
Je débute alors soyez indulgents!!!!!....et merci pour votre aide!!

voici mon code html:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>crea2d</title>
<link rel="stylesheet" media="screen" type="text/css" title="centrer" href="style2_2.css" />
</head>

<body>
<div id="logo"></div>
<div id="header">
<ul>
<li><a href="file:///Macintosh HD/Users/administrateur/Desktop/MlleS2/COM_MlleS/SITE_WEB/mlles.fr/index.html" class="accueil">accueil</a></li>
<li><a href="file:///Macintosh HD/Users/administrateur/Desktop/MlleS2/COM_MlleS/SITE_WEB/mlles.fr/crea2d.html" class="crea2d">crea 2d</a></li>
<li><a href="file:///Macintosh HD/Users/administrateur/Desktop/MlleS2/COM_MlleS/SITE_WEB/mlles.fr/crea3d.html" class="crea3d">crea 3d</a></li>
<li><a href="file:///Macintosh HD/Users/administrateur/Desktop/MlleS2/COM_MlleS/SITE_WEB/mlles.fr/photos.html" class="photos">photos</a></li>
<li><a href="#1" class="vide1"></a></li>
<li><a href="#2" class="vide2"></a></li>
<li><a href="file:///Macintosh HD/Users/administrateur/Desktop/MlleS2/COM_MlleS/SITE_WEB/mlles.fr/liens.html" class="liens">liens</a></li>
<li><a href="file:///Macintosh HD/Users/administrateur/Desktop/MlleS2/COM_MlleS/SITE_WEB/mlles.fr/contact.html" class="contact">contact</a></li>
</ul>
</div>
<table id="corps" border="0px";cellpadding="0px";cellspacing="0px";align="right";>
<tr id="titre1"><td>blabla</td></tr>
<tr id="texte"><td>blabla</td></tr>
<tr id="titre2"><td>blabla</td></tr>
</table>
<div id="rond";align="right"><img src="images/ronds_v.jpg" border="0" align="right" usemap="#Map"/></div>
<map name="Map">
<area shape="circle" coords="169,20,12" href="#" id="macuisine" />
<area shape="circle" coords="387,17,14" href="#" />
<area shape="circle" coords="118,44,13" href="#" />
<area shape="circle" coords="290,44,14" href="#" />
<area shape="circle" coords="358,40,13" href="#" /></map>
<div id="pied_de_page"></div>
</body>



et voici mon code css:




@charset "UTF-8";
/* CSS Document */

body
{
width: 880px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
color: white;
background-color: black;
font-family: myriadpro,myriad pro,trebuchet ms;
}
#logo
{
background-image: url("images/logo.jpg");
background-repeat: no-repeat;
width: 150px;
height: 667px;
margin-left: 0px;
float: left;
}
#header ul
{
width: 940px;
height: 47px;
background-color: transparent;
margin-left: 150px;
padding: 0;
list-style: none;
}
#header ul li
{
margin: 0;
}
#header ul li a
{
display: block;
float: left;
width: 85px;
height: 30px;
margin-top: 17px;
background-color: rgb(45,44,47);
font-size: medium;
font-weight: bold;
text-transform: uppercase;
/* Centrage horizontal du texte */
text-align: center;
/* Redefinition de la taille de la ligne */
line-height: 35px;
/* Positionnement du texte par rapport a la ligne */
vertical-align: middle;
text-decoration: none;
}
#header ul li a.vide1
{width: 80px}
#header ul li a.vide2
{width: 80px}
/* pour IE et opera */
#header ul>li
{
float:none;
}
#header ul li
{
float: left;
margin: 0;
}
#header ul li a.accueil:hover
{
color: white;
}
#header ul li a.crea3d:hover
{
color: white;
}
#header ul li a.photos:hover
{
color: white;
}
#header ul li a.liens:hover
{
color: white;
}
#header ul li a.contact:hover
{
color: white;
}
.accueil
{
color: rgb(75,75,77);
margin-right: 4px;
}
.crea2d
{
color: white;
margin-right: 4px;
margin-left: 4px;
}
.crea3d
{
color: rgb(75,75,77);
margin-right: 4px;
margin-left: 4px;
}
.photos
{
color: rgb(75,75,77);
margin-right: 4px;
margin-left: 4px;
}
.vide1
{
margin-right: 4px;
margin-left: 4px;
}
.vide2
{
margin-right: 4px;
margin-left: 4px;
}
.liens
{
color: rgb(75,75,77);
margin-right: 4px;
margin-left: 4px;
}
.contact
{
color: rgb(75,75,77);
margin-right: 4px;
margin-left: 4px;
}
#corps
{
margin-bottom: 0px;
margin-left : 520px;
margin-top: -12px;
}
#titre1
{
text-align: right;
font-size: 113%;
font-weight: bold;
}
#titre2
{
text-align: right;
font-size: 110%;
font-weight: bold;
}

#texte
{
text-align: left;
font-size: 75%;
margin-left: 480px;
}

#macuisine:hover
{
display: block;
background-image: url("images/macuisine.png");
position: absolute;
left: 600px;
top: 150px;
width: 210px;
height: 400px;
}

#pied_de_page
{
background-image: url("images/signature.jpg");
width: 182px;
height: 101px;
margin-left: 710px;
margin-top: 420px;
}

Modifié par Mamzell S (18 Nov 2009 - 10:41)
Administrateur
Bonjour et bienvenue, Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace) en ayant choisi le bon langage dans la liste déroulante de "Coloration syntaxique".

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

Felipe
Modifié par Felipe (17 Nov 2009 - 12:38)
Sujet clos
Aller à