javascript code not executing!
i have an index.html lik ethis:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript Tooltip Demo</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<embed src="usmap.svg" width="3000" height="1000"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
<script type="text/javascript" language="javascript" src="script.js"></script>
</body>
</html>
the javascript file itself is:
var tooltip=function(){
var id = 'tt';
var top = 3;
var left = 3;
var maxw = 300;
var speed = 10;
var timer = 20;
var endalpha = 95;
var alpha = 0;
var tt,t,c,b,h;
var ie = document.all ? true : false;
return{
show:function(v,w){
if(tt == null){
tt = document.createElement('div');
tt.setAttribute('id',id);
t = document.createElement('div');
t.setAttribute('id',id + 'top');
c = document.createElement('div');
c.setAttribute('id',id + 'cont');
开发者_开发问答 b = document.createElement('div');
b.setAttribute('id',id + 'bot');
tt.appendChild(t);
tt.appendChild(c);
tt.appendChild(b);
document.body.appendChild(tt);
tt.style.opacity = 0;
tt.style.filter = 'alpha(opacity=0)';
document.onmousemove = this.pos;
}
tt.style.display = 'block';
c.innerHTML = v;
tt.style.width = w ? w + 'px' : 'auto';
if(!w && ie){
t.style.display = 'none';
b.style.display = 'none';
tt.style.width = tt.offsetWidth;
t.style.display = 'block';
b.style.display = 'block';
}
if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
h = parseInt(tt.offsetHeight) + top;
clearInterval(tt.timer);
tt.timer = setInterval(function(){tooltip.fade(1)},timer);
},
pos:function(e){
var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
tt.style.top = (u - h) + 'px';
tt.style.left = (l + left) + 'px';
},
fade:function(d){
var a = alpha;
if((a != endalpha && d == 1) || (a != 0 && d == -1)){
var i = speed;
if(endalpha - a < speed && d == 1){
i = endalpha - a;
}else if(alpha < speed && d == -1){
i = a;
}
alpha = a + (i * d);
tt.style.opacity = alpha * .01;
tt.style.filter = 'alpha(opacity=' + alpha + ')';
}else{
clearInterval(tt.timer);
if(d == -1){tt.style.display = 'none'}
}
},
hide:function(){
clearInterval(tt.timer);
tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
}
};
}();
when i call it frmo the SVG:
onmouseover="tooltip.show('Testing 123 ');" onmouseout="tooltip.hide();"
it is doing absolutely nothing!
does anyone know why?
Your XHTML is invalid, and your non-standard method for embedding the SVG in it does so, AFAIK, as a separate document (which doesn't share the same window object as the parent document).
The script wasn't written for SVG in the first place though, it has IE specific stuff in it and SVG isn't supported by IE.
<embed src="usmap.svg" ...
<script type="text/javascript" language="javascript" src="script.js"></script>
You've included JavaScript in the main HTML document, but your SVG is in a separate embedded document. The embedded document does not have access to the owner HTML document; it cannot call methods from scripts in that document, and even if you included the script in the SVG document it wouldn't work as this particular script is written (quite poorly) to interact with an HTML document only.
Embedded SVG is old-fashioned. It was primarily used to support IE with the Adobe SVG plugin, but that plugin no longer supported and nobody uses it any more (hardly anyone ever did). Much better to include your SVG as part of the document itself, in an XHTML+SVG document served as application/xhtml+xml. The only current desktop browser that doesn't support this is IE6-8. Then you can use HTML and SVG content together.
(Also you can lose the archaic language="javascript".)
加载中,请稍侯......
精彩评论