[HTML] Image et zones réactives

Version imprimable

Bonsoir à tous. Débutante dans le développement de site web, je cherche à créer des zones réactives sur une image. J'ai consulté le site, suivi la documentation, mais ça ne fonctionne pas comme je le désire.:oops:

Voici mes quelques lignes de code HTML :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <html> <head> <link rel="stylesheet" type="text/css" href="Style1.css"> <title>index.htm</title> </head> <body leftmargin="0" topmargin="0" bottommargin="0" rightmargin="0"> <table width="100%" height="100%" cellpadding="0" cellspacing="0"> <tr> <td colspan="2"> <map name="bandeau"> <area shape="rect" coords="0,0,4258,730" href="./jeux.htm"> </map> <img src="../images/bandeau sup.jpg" width="100%" height="100%" usemap=#bandeau></td> </tr> </table> </body> </html>
Mon image (4258 pixels sur 730 pixels) s'affiche correctement, mais ma zone réactive s'affiche par dessus l'image. Elle se place au dessus de mon image sur une ligne.

Voila, mon problème est donc de placer ma zone réactive sur l'image et non là ou je ne le souhaite pas.
Merci de votre aide. Bonne soirée et bonne année.:mrgreen:

Code:

1
2
3
4
 
<body>
<a href="#"><img src="../images/bandeau sup.jpg" /></a>
</body>

pas besoin de plus....

Merci pour le coup de main. Sans doute à une prochaine. Pourquoi faire compliqué quand on peut faire simple ;)

[EDIT]
Désolé, encore moi ! ! ! Suite à mon premier post "Image et zones réactives" je pensais que ça fonctionnait. Mais en fait non :oops:

Je cherche à créer des zones réactives sur une image afin d'en faire des liens votre d'autres pages html. Si je crée une zone rectangulaire de la taille de mon image, ça fonctionne (<area shape="rect" coords="0,0,4256,728" href="./jeux.htm">). Par contre, si je définis plusieurs polygones, et bien ça ne fonctionne plus. Voici mon code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <html> <head> <link rel="stylesheet" type="text/css" href="Style1.css"> <title>index.htm</title> </head> <body leftmargin="0" topmargin="0" bottommargin="0" rightmargin="0"> <a href="#"></a> <table width="100%" height="100%" cellpadding="0" cellspacing="0"> <tr> <td colspan="2"> <map name="bandeau"> <area shape="poly" coords="4256,83,4256,216,2820,216,4256,83" href="./jeux.htm"> <area shape="poly" coords="2820,216,4256,216,2820,343,2820,216" href="./beauxlivres.htm"> <area shape="poly" coords="4256,216,4256,396,2283,396,4256,216" href="./jeunesse.htm"> <area shape="poly" coords="2283,396,4256,396,2283,572,2283,396" href="./bandedessinee.htm"> <area shape="poly" coords="4256,396,4256,728,649,728,4256,396" href="./litterature.htm"> </map> <img src="../images/bandeau sup.jpg" width="100%" height="100%" usemap=#bandeau></td> </tr> </table> </body> </html>
Quelqu'un aurait il une solution ? ? ?
Merci d'avance pour votre aide.

10/01/2007, 00h42
canfre

Même en ajoutant des guillemets à la valeur de usemap?

Code:

<img src="../images/bandeau sup.jpg" width="100%" height="100%" usemap="#bandeau">

Salut,

les area sont définies avec des coordonnées en pixel. Peut-être que le fait de définir la taille de ton image en % pose problème. Vu que tu définis 100% à chaque fois, je pense que tu peux t'en passer.

Si tu es en xhtml, tu peux éventuellement doubler tes attributs "name" par des attributs "id" de même valeur. en effet, l'attribut name tend à disparaitre. (tu peux valider ton code sur le site du w3c).

Si tu es en html4, j'ai trouvé cet exemple:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <HTML> <HEAD> <TITLE>The cool site!</TITLE> </HEAD> <BODY> <P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1"> <MAP name="map1"> <P>Navigate the site: <A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> | <A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> | <A href="search.html" shape="circle" coords="184,200,60">Search</A> | <A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">Top Ten</A> </MAP> </OBJECT> </BODY> </HTML>
http://www.w3.org/TR/html401/struct/...ml#adef-usemap

Si tu peux te contenter de zones réactives rectangulaires, alors dans ce cas, il est possible de faire ceci en pur css, ce qui simplifiera grandement le problème.