[POO] Création javascript de carte SVG et propriétés du SVG
Bonjour.
Je travaille sur des images svg, et je souhaite que l'affichage change, et donc soit dynamique, tout en gardant les propriétés de onmouseover...
Pour cela je crée mes objects svg pas l'intermédiaire du javascript, non de l'html de cette manière :
Code:
1
2
3
4
5
|
function config_carte(){
document.write("<object type='image/svg+xml' data='carte/frpmo_niv2_zone.svg' border='1' STYLE='position:absolute; left:50px; top:75px;width:890;height:450'> ");
document.write("<param name='src' value='carte/frpmo_niv2_zone.svg' >");
document.write("</object>"); } |
Cette fonction marche bien. Elle est appelé au moment du chargement du <body> :
Code:
<BODY LANG="en-US" DIR="LTR" onload="config_carte()">
Dans mon code svg, j'ai associé les fonctions onmouseover, onkeyup...
Cependant, quand ma souris passe sur l'image (ou action du clavier), j'ai un message d'erreur qui s'affiche : .
Si je crée mon objet svg directement dans mon html (donc sans passer par document.write), je n'ai plus d'erreur. Cependant je ne peux pas changer d'image dynamiquement, or c'est le but ici.
Avez vous une idée de l'erreur et de la solution pour la résoudre ?
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
25
26
27
28
29
30
31
32
33
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=windows-1252">
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
function voir(){
alert("voir");
}
function config_carte(){
document.write("<object type='image/svg+xml' data='carte/frpmo_niv2_zone.svg' border='1' STYLE='position:absolute; left:50px; top:75px;width:890;height:450'> ");
document.write("<param name='src' value='carte/frpmo_niv2_zone.svg' >");
document.write("</object>");
}
function info(evt) {
alert("load"); }
function appui_touche(evt){
var touche2 = evt.keyCode;
alert(touche2);
}
</script>
</HEAD>
<BODY LANG="en-US" DIR="LTR" onload="config_carte()">
</BODY>
</HTML> |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 10.0, SVG Export Plug-In . SVG Version: 3.0.0 Build 76) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
]>
<svg xmlns:x="&ns_extend;" xmlns:i="&ns_ai;"
xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
width="1474" height="3402" viewBox="0 0 1474 0" overflow="visible" enable-background="new 0.485 0.925 1474 3402"
xml:space="preserve">
<g zone="Carte" transform="scale(1)" onload="info(evt)" onmouseover="voir()" onkeyup="appui_touche(evt)">
</g>
</svg> |
