Bonjour,
C'est mon premier post sur ces forums, donc vous l'avez deviné : je suis loin d'être un développeur chevronné. Un peu d'indulgence serait du coup la bienvenue. En effet, mon problème doit sûrement avoir une solution toute simple, mais que je n'arrive pas à voir.
Plutôt que de longs disours, voici mon problème en image :
Comment faire fonctionner la zone en rouge pour que lors du passage du pointeur de la souris, l'image s'affiche ?
Important : j'ai déjà réussi à faire correctement fonctionner la zone en vert avec du javascript. J'ai évidemment essayé le même code(en l'adaptant avec les coordonnées de la zone rouge)...sans succès.
Mon code HTML:
Mon CSS :
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
25
26
27
28
29
30
31
32
33
34
35
36
37 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <title>Ma page</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" /> </head> <body> <p class="fond"> <img src="images/fond.jpg" width="800" height="695" border="0" usemap="#map" /> <p class="image_javascript"> <img src="images/transparent.png" width="100" height="100" name="trans"/> </p> </p> <map name="map"> <!-- La zone "verte" --> <area shape="rect" coords="128,301,581,350" onmouseover="document.trans.src='images/monimage.png'" onmouseout="document.trans.src='images/transparent.png'" href="#" /> <!-- La zone "rouge" --> <area shape="rect" coords="479,76,763,140" onmouseover="document.trans.src='images/monimage.png'" onmouseout="document.trans.src='images/transparent.png'" href="#" /> </map> </body> </html>
D'après vous, c'est un problème de javascript ? De mise en page HTML/CSS ?Un problème tout autre ? (je savais pas trop où poster du coup...)
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
25
26 body { width: 800px; margin:auto; margin-bottom: 20px; background-image: url("background.jpg"); background-attachment: fixed; background-color: #72E2E9; background-position: center; background-repeat: no-repeat; margin-top:0px; } .fond { position: absolute; top:0px; } .image_javascript { position:relative ; top: 1px; left: 1px; }
Merci de vos réponses.![]()
Partager