28172 sujets

CSS et mise en forme, CSS3

[RESOLU]Pb area shape dans une div

Bonjour à tous,
mon problème doit être super simple à résoudre, mais je ne suis pas un as du code

voilà j'ai une image déclarée dans mon styles.css

div#A8{ 
  background-image: url(img/directors.gif);
  position:absolute;
  background-repeat: no-repeat;
  top:417px;
  left:525px;
  width: 320px;
  height: 83px;
  padding: 0;
  z-index:4; 
  
}


j'aimerais que certaines zones de cette image renvoi vers des liens
ainsi j'appelle la balise ds ma page html :

<div id="A8">
<map name="cv">
<AREA SHAPE="RECT" COORDS="0,17,170,30" ALT="Quelques liens..." HREF="liens.html" TARGET="main">
</map>
</div>

dans le futur je compte mettre plusieur areashape (quand cela marchera)
là c'est encore qu'un test
bref mon image s'afffiche nickel mais par contre aucune zone ou je peux cliquer
quelqu'un aurait-il la réponse ? Smiley smile
Modifié par qmulonainbus (12 Jul 2008 - 19:50)
merci pour l'info
j'ai fait un test sur une page à part avec :
<body>


<map name="cv">
<area shape="rect" coords="0,17,170,30" href="http://www.test.fr/" alt="test">
</map>

<p><img src="img/directors.gif" width="323" height="83" border="0" alt="cv" usemap="#cv"></p>

</body>

et ça marche Smiley smile

MAIS j'ai trouvé le problème sur ma page en fait,
je ne vois pas où placer le usemap="#cv".
faut-il que je le place dans mon style.css
où dans l'appel de ma div sur la page html ?
Modifié par qmulonainbus (11 Jul 2008 - 22:36)
Salut.
Je n'avais encore jamais entendu dire qu'il était possible de "scinder" une image définie dans les feuilles de style.

tu es certain que cela est possible ?

Justin
qmulonainbus a écrit :
je ne vois pas où placer le usemap="#cv".
faut-il que je le place dans mon style.css
où dans l'appel de ma div sur la page html ?
En fait il n'y a pas trop le choix : d'une part l'image contient une information (sous-entendu : elle n'est pas purement décorative) et elle doit donc être placée dans le code html et pas en background dans les css, et d'autre part l'attribut usemap n'existe pas en css et doit donc obligatoirement être affecté à l'image.

Ce qui donne quelque chose comme :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Test</title>
	<style type="text/css" media="screen,projection"><!--
		/* Contenu du bloc CSS */
		div#A8 { 
			position: absolute;
			top: 417px;
			left: 525px;
			width: 320px;
			height: 83px;
			z-index: 4;
		}

		div#A8 img { 
			border: none;
		}


	--></style>
</head>
<body>
<div id="A8">
<map name="cv">
<area shape="rect" coords="0,17,170,30" alt="Quelques liens..." title="Quelques liens..." href="liens.html" />
</map>
<p><img src="img/directors.gif" width="320" height="83" alt="carte" usemap="#cv" /></p>
</div>
</body>
</html>

A+
Sujet clos
Aller à