[HTML] Image et zones réactives

**Malie** · 09/01/2007, 19h22

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.

Voici mes quelques lignes de code HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**blueice** · 09/01/2007, 19h41

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

pas besoin de plus....

**Malie** · 09/01/2007, 21h29

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

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**canfre** · 10/01/2007, 00h42

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**MasterOfChakhaL** · 10/01/2007, 09h33

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[HTML] Image et zones réactives

HTML

Discussions similaires

Partager

Partager