2010-08-24 146 views
0

我有一個index.html LIK ethis:javascript代碼不能執行!

<!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> 

的JavaScript文件本身是:

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); 
     } 
    }; 
}(); 

當我把它叫做frmo的SVG:

onmouseover="tooltip.show('Testing 123 ');" onmouseout="tooltip.hide();" 

是絕對做沒有!

有誰知道爲什麼?

+0

沒有這工作得很好這裏http://sixrevisions.com/tutorials/javascript_tutorial/create_lightweight_javascript_tooltip/ – 2010-08-24 22:09:40

+0

後回到你的一條關於透明度 – 2010-08-24 22:10:57

回答

1
<embed src="usmap.svg" ... 
<script type="text/javascript" language="javascript" src="script.js"></script> 

您已將JavaScript包含在主HTML文檔中,但您的SVG位於單獨的嵌入式文檔中。嵌入式文檔無法訪問所有者HTML文檔;它不能從該文檔中的腳本調用方法,並且即使將腳本包含在SVG文檔中,也不會工作,因爲僅編寫此特定腳本(相當糟糕)才能與HTML文檔進行交互。

嵌入式SVG是老式的。它主要用於通過Adobe SVG插件支持IE,但該插件不再受支持,並且沒有人再使用它(幾乎沒有人使用過)。在用作application/xhtml+xml的XHTML + SVG文檔中,include your SVG as part of the document itself更好。目前唯一不支持的桌面瀏覽器是IE6-8。然後你可以一起使用HTML和SVG內容。

(你也可以失去的古老language="javascript"

3

您的XHTML無效,並且您嵌入SVG的非標準方法AFAIK作爲單獨文檔(與父文檔不共享相同的窗口對象)。

雖然腳本並不是爲SVG編寫的,但它具有IE特定的內容,而IE不支持SVG。

+0

林不知道我理解。我在SVG裏面有一個應該調用javascript函數的onmouseover事件。你的回答是錯誤的,因爲我可以用這種方式調用其他函數,只是這個函數根本不響應 – 2010-08-24 22:13:10