18041 sujets

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

Usemap="#Map" equivalence en css ??

Bonjours,j'ai cree un header que je vais installer dans un site (prestashop) mais je n'arrive pas a trouver l'equivalence du usemap en css car tout est gerer en css.

<title>Document sans nom</title>
</head>
<body>
<img src="header03.jpg" alt="" width="857" height="240" border="0" usemap="#Map" />

<map name="Map" id="Map"><area shape="rect" coords="1,215,87,239" href="/new-products.php" target="_top" alt="" />
<area shape="rect" coords="86,216,174,242" href="/order.php" target="_top" alt="" />
<area shape="rect" coords="173,215,265,242" href="/my-account.php" target="_top" alt="" />
<area shape="rect" coords="263,215,368,240" href="/contact-form.php" target="_top" alt="" />
<area shape="rect" coords="367,216,499,242" href="/about-us.php" target="_top" alt="" />
<area shape="rect" coords="498,214,609,242" href="/news.php" target="_top" alt="" />
<area shape="rect" coords="608,216,703,246" href="/newsletter.php" target="_top" alt="" />
<area shape="rect" coords="701,214,817,239" href="/favoris.html" target="_top" alt="" />
</map>
</body>
</html>


<img src="header03.jpg" alt="" width="857" height="240" border="0" usemap="#Map" />
doit etre gerer par le css

ca c'est la partie faite sous dreamweaver mais moi dans mon header.tpl je dois l'inclure ici

<div id="page">
ICI le header
<!-- Header -->
<div>
				
<div id="header">
{$HOOK_TOP}
</div></div>


mais comme y'a un usemap je n'y arrive pas.
Je ne sais pas si je suis bien clair dans mon explication.
Hello SmartiesKiller et bienvenue,

SmartiesKiller a écrit :
je n'arrive pas a trouver l'equivalence du usemap en css
C'est normal car ça n'existe pas. Smiley cligne

D'ailleurs il ne s'agit pas de simple décoration (du ressort des css) mais bel et bien d'un contenu essentiel (et donc du ressort de html).

A+
oki doki

bon je crois que je vais devoir faire mon header qu'en html sans css.

Merci encore pour cette reponse aussi vite.
Modifié par SmartiesKiller (18 Aug 2008 - 13:55)
Puisque tu ne fais que des rectangles, il y a une solution en full html/css :

<div id="header">
    <a href="##" id="lien1" title="titre"></a>
    <a href="##" id="lien2" title="titre"></a>
</div>




#header
{
    height:120px; /* hauteur de ton image */
    width: 500px; /* largeur de ton image */
    background: url(ton-image.png);
}
#header a
{
    position: absolute;
    display: block;
}
#lien1
{
    top: 12px; /* décalage par rapport au bord supérieur */
    left: 12px; /* décalage par rapport au bord gauche */
    height: 20px; /* hauteur */
    width: 100px; /* largeur */
}


Il y a plusieurs solutions, celle-ci est la plus simple. Si tu veux ajouter un roll-hover regardes ici :
http://css.alsacreations.com/modelesmenus/g05.htm
MERCI BEAUCOUP !!!!

TON TRUC EST GENIAL !!!!!!!

Smiley biggrin Smiley biggrin Smiley biggrin Smiley ravi Smiley ravi




warry a écrit :
Puisque tu ne fais que des rectangles, il y a une solution en full html/css :

<div id="header">
    <a href="##" id="lien1" title="titre"></a>
    <a href="##" id="lien2" title="titre"></a>
</div>




#header
{
    height:120px; /* hauteur de ton image */
    width: 500px; /* largeur de ton image */
    background: url(ton-image.png);
}
#header a
{
    position: absolute;
    display: block;
}
#lien1
{
    top: 12px; /* décalage par rapport au bord supérieur */
    left: 12px; /* décalage par rapport au bord gauche */
    height: 20px; /* hauteur */
    width: 100px; /* largeur */
}


Il y a plusieurs solutions, celle-ci est la plus simple. Si tu veux ajouter un roll-hover regardes ici :
http://css.alsacreations.com/modelesmenus/g05.htm
Super comme truc

Mais le lien ne fonctionne plus ... qq aurait-il un lien valide ?

Merci par avance
jo_colombe a écrit :
TON TRUC EST GENIAL !!!!!!!

Non, c'est de la merde.

Mais l'important c'est de participer.
Sujet clos
Aller à