28173 sujets

CSS et mise en forme, CSS3

Faire une zone cliquable sur une image en CSS

Salut à tous, voilà je vous explique mon probleme, le code est assez explicatif :
a écrit :
code css:
#img{
background-image: url('img/site.jpg');
background-position: center;
background-repeat: no-repeat;
width: 800px;
height: 519px;
margin-top:50px;
margin-left:auto;
margin-right:auto;
margin-top: auto;
padding-bottom: 20%;
}


et le code html :
a écrit :
<!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=iso-8859-1" />
<title>Conseil pc</title>
</head>
<link href="css.css" rel="stylesheet" type="text/css" />
<style type="text/css"></style>
</head>
<body>
<div id="img"></div>
</body>
</html>


Ma question est comment faire une zone cliquable sur l'image ?
en html on procede de cette façon :
a écrit :

<img src="monimage.jpg">
<map name="Map">
<area shape="rect" coords="56,23,166,82" href="http://www.exemple.com"> </map

Mais en CSS je seche.
j'avais trouvé ce lien :
a écrit :
http://css.alsacreations.com/Tutoriels-et-articles-divers/Faire-une-zone-reactive-image-map-en-CSS

Mais ne fonctionne plus !

Si vous avez une info là dessus je suis preneur!
Merci pour votre aide
Modifié par declink (22 Apr 2007 - 20:36)
quelque chose dans ce genre?


html

<div id="image">
 <a></a>
</div>


css

div#image{
background: url(ton_image.jpg)
}

div#image a{
display: block;
height: ...px;
width: ...px;
border: ...px ...px ...px ...px;
}


(surface de la zone cliquable définie par "height" et "width", positionnement avec les marges)

ou en positionnement absolu:

div#image a{
display: block;
position: absolute;
height: ...px;
width: ...px;
top: ...px;
left: ...px;
}
Le problème, c'est que la zone à cliquer comporte probablement une information : texte en image, pictogramme, etc. Il faut donc transmettre cette information autrement que par de la mise en forme, et en HTML il y a deux moyens de faire ça :
- une image map (penser à bien utiliser l'attribut alt pour fournir une alternative textuelle pertinente) ;
- une image HTML <img> (penser à bien utiliser l'attribut alt également).

S'il s'agit d'un seul lien à appliquer sur une zone rectangulaire, j'utiliserais pour ma part une image (balise <img> en HTML ou <img /> en XHTML) entourée d'un lien. Ensuite, on peut positionner le lien comme souhaité.
Mon problème est que j'ai 6 liens à mettre sur l'image, en html c'est tout bete avec les map et area, mais en CSS, je butte!!!
declink a écrit :
Mon problème est que j'ai 6 liens à mettre sur l'image, en html c'est tout bete avec les map et area, mais en CSS, je butte!!!

Mais c'est très bien map+area, pourquoi vouloir s'en passer absolument ?
Ce n'est pas parce qu'on a les CSS à disposition qu'il faut remplacer ce qui marche par des CSS qui ne marchent pas forcément... Smiley rolleyes

À tout hasard tout de même...
Pour faire une image map sans map+area, en positionnant des éléments graphiques avec les CSS, il faut :
- une image de fond (ne portant pas elle-même d'information textuelle mise en image), dans un bloc conteneur positionné en relatif ;
- une série de liens positionnés en absolu, par rapport aux limites du bloc conteneur positionné en relatif ;
- pour chaque lien, une image HTML (balise <img>) avec texte alternatif (attribut alt) pertinent.

Quelque chose du genre.

Suivant la complexité de ce que l'on veut faire, on aura intérêt à utiliser ce genre de technique ou alors plutôt une image map. Pour des choses avec beaucoup de liens, l'image map me semble plus appropriée. Et si on veut des zones réactives non rectangulaires, c'est indispensables.
Eh bien je vous remercie pour vos conseils.
@ florent, j'essayais de faire ca pour le fun ( comme le reste) et je me posais justement cette question !
En tous cas merci pour vos reponses.
Sujet clos
Aller à