[Résolu] Enlever le "rectangle virtuel" d'une image?

Bonjour à tous,

J'ai beau chercher je ne trouve pas. Je n'ai pas vu de sujet qui ressemble non plus dans le forum... J'hésitais à poster dans le CSS et le HTML donc je suis venu ici.

J'explique mon problème : Le principe serait un peu le même que pour la recherche par région du site leboncoin.fr. Je dois faire une carte interactive mais en HTML et CSS. La france serait séparé en 3 zones... J'ai mit 3 images dans 3 DIV (zone_est, zone_ouest, et zone_centre), j'ai superposé les div, pour que les 3 parties se rassemble et que l'on devine la france. J'ai joué avec les Z-index, float, margin... Tout se place bien. Le problème c'est que l'image en elle même est rectangulaire bien que la zone de lien ai la forme quasi exacte de la zone en question.
(Accrochez-vous, je vais essayé d'être claire dans mon explication ) --> Donc quand je sors de la zone cliquable, je n'atterrît pas sur la zone d'à coté, il faut que je sorte du "rectangle" de l'image pour pouvoir avoir accès au lien de la zone d'à coté.

L'idéal serait la possibilité de mettre le mapping sur la DIV (j'ai essayé au cas où mais ça ne marche pas)

Il existe des solutions en Javascript (Map Highlight) mais je voudrais savoir si quelqu'un connait une solution en CSS et HTML....

Merci beaucoup pour votre aide.
Bonne journée

Bonjour,

Regarde du côté des image map.

Bonjour, il existe la balise html area qui permet de faire ce que tu souhaites. Elle permet de définir des «zones sensibles» pour des liens. Il est possibles de générer le code à partir de certains programmes de dessin vectoriel.

Sinon tu peux faire une carte en svg avec du javascript. Mais si ton cas est basique, je te conseille plutôt la première solution qui est plus compatible à l'heure actuelle.

J'ai déjà utilisé les images maps et les balises area.

Voici mon code HTML :

<div id="zone_ouest">
		<img border="0" height="300" src="http://www..../images/zone_ouest.png" usemap="#Map2" width="209" /> <map id="Map2" name="Map2"> <area coords="147,5,147,29,134,43,111,50,115,56,103,61,89,58,84,47,69,47,76,83,56,84,38,78,3,83,9,96,3,103,14,110,52,126,64,141,59,153,81,170,75,238,66,271,93,293,119,296,118,284,127,274,134,275,142,264,128,254,143,217,128,192,134,178,115,177,109,162,110,141,114,124,130,112,132,98,134,82,147,74,148,89,161,99,182,102,193,88,198,71,202,60,207,40,208,25,194,23,188,8,178,8,168,3,148,4" href="#" shape="poly" /> </map></div>
	<div id="zone_centre">
		<img border="0" height="239" src="http://www.../images/zone_centre.png" usemap="#Map" width="137" /> <map id="Map" name="Map"> <area coords="40,4,24,13,27,21,23,25,26,36,11,51,5,67,0,93,8,96,7,104,30,106,21,119,39,142,35,152,22,175,26,189,31,193,23,204,20,201,12,212,18,218,38,229,43,238,66,235,88,237,79,222,109,195,101,182,88,185,85,174,104,174,96,155,116,125,128,111,117,97,123,88,134,92,135,70,120,72,108,69,100,55,109,42,96,36,83,20,73,32,63,36,60,27,51,27,41,17,40,3" href="#" shape="poly" /> </map></div>
	<div id="zone_est">
		<img border="0" height="290" src="http://wwwIII/images/zone_est.png" usemap="#Map3" width="193" /> <map id="Map3" name="Map3"> <area coords="55,4,60,13,72,3,73,17,92,24,124,34,149,43,138,58,132,96,101,149,123,137,127,150,124,160,137,173,116,184,130,190,128,210,152,215,124,249,98,255,87,249,61,242,54,228,42,230,39,220,56,221,53,201,71,174,67,161,80,160,72,150,78,133,88,136,87,118,78,119,57,110,62,88,50,83,37,68,41,49,42,33,52,32,55,4" href="#" shape="poly" /> </map></div>

Et le code CSS :

#zone_ouest {
float:left;
z-index:0;
position:absolute !important;
margin-left:300px;
height:300px;
}

#zone_centre {
float:left;
z-index:2;
position:absolute !important;
margin-left:405px;
margin-top:75px;
height:239px;
}

#zone_est {
float:left;
position:absolute !important;
z-index:1;
margin-left:454px;
margin-top:30px;
height:290px;
}

#zone_ouest area{
z-index:1;
position:relative !important;
}

#zone_ouest area:hover{
z-index:1;
position:relative !important;
}

#zone_ouest img:hover{
opacity:0.5;
}


#zone_centre area{
z-index:1;
position:relative !important;
}

#zone_centre img:hover{
opacity:0.5;
}

#zone_centre area:hover{
z-index:1;
position:relative !important;
}

#zone_est area{
position:relative !important;
z-index:1;
}

#zone_est area:hover{
position:relative !important;
z-index:1;
}

#zone_est img:hover{
opacity:0.5;
}

Je vous montre la france que j'ai créé et les 3 zones pour que vous compreniez bien ce que je fais

Salut

Pourquoi 3 images différentes? Tu n'en fais qu'une et tu y place les map areas correspondant à chaque région et le tour est joué.

J'étais sur que je cherchais trop compliqué. Je vais essayé cette après midi et je vous tiendrais au courant si ça a marché. Merci en tout cas

Bon ce n'était pas exactement ce que je souhaitais, mais en tout cas mettre 4 balise Aera pour une seule image, cela fonctionne. Je ne savais pas que c'était possible ! (je dormirais moins bête
Le seul problème que je vais devoir régler, c'est que je voulais que lorsque l'on passe sur la zone en question, la zone (et non l'image entière) s'éclaircisse...

Je verrais bien.
De toute manière survoler cette zone doit me faire apparaitre une information, je ne vais pas le faire en CSS3 à cause de IE, donc je vais me le tenter en Javascript ^^souhaitez moi bonne chance ! LOL

Merci pour votre aide ! à bientôt

Le survol se gèrera en JavaScript. Comme tu n'as que 3 zones, tu peux faire 4 images et changer l'image complète au survol.

Ha oui bonne idée ! Merci

ice_tea12,

j'ai réalisé ceci dernièrement où mon tutoriel propose des tooltips par javascript simplissime :

-http://sentrais.fr/florence_map/florence-map.htm#florence

Modifié par zebulin (13 Apr 2012 - 18:44)

Bonjour Zebulin,

C'est très aimable à toi de vouloir aider, mais serait-il possible de le faire sans flooder le forum de liens (identiques) vers ton site ?

Bonjour Laurie-Anne,
dois-je comprendre qu'il est interdit de proposer ce que l'on a réalisé par soi-même ?
Bon, si c'est ça flooder alors j'ai floodé !
Quant à viander mes liens, tu viandes depuis deux ans.
Modifié par zebulin (13 Apr 2012 - 19:01)

Merci, je regarderai comment tu as procédé la semaine prochaine

Bon weeekend