2012-12-04 65 views
0

我在网站上有一个SVG图像地图 - 我有SVG内联。现在我想添加备用内容,因此决定使用< object>方法,并将SVG放在外部文件中,这样我可以在<对象>中放置图像标记。问题是我从SVM的onmouseover,onmouseout参数调用JavaScript函数 - 而那些JS函数使用JQuery。函数得到很好的调用,但我没有定义$。 jQuery是加载中...SVG在混凝土中调用JavaScript 5

我有一个测试页面在这里: http://www.kollegetown.com/themes/kollegetown/test.htm

如果打开控制台,你会看到,如果你侧翻热点$没有定义的错误。

任何想法赞赏。

+0

self.jQuery在铬中工作 – philipp

回答

0

当然你需要加载jQuery。将以下行添加到SVG:

<script type="text/javascript" xlink:href="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"/> 

应该完成这项工作。

+0

非常感谢,但它不这样做。首先,我得到这个从JQuery产生的错误:Uncaught TypeError:无法设置属性'显示'为空,然后在任何我得到的翻转:Uncaught TypeError:Object# has no method'stop' –

0

在我看来,更优雅的解决方案是使用CSS3动画,而不是jQuery的(see Tinkerbin):

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="956px" height="745px" > 
    <style type="text/css"> 
    a > image { 
     opacity: 0; 
     pointer-events:none; 
     transition: opacity .25s ease-in-out; 
     -moz-transition: opacity .25s ease-in-out; 
     -webkit-transition: opacity .25s ease-in-out; 
    } 

    a > polygon { 
     opacity:0; 
    } 

    a:hover > image { 
     pointer-events:auto; 
     display:inline; 
     opacity: 1; 
    } 
    </style> 

    <image x="0" y="0" width="956" height="745" xlink:href="http://www.kollegetown.com/themes/kollegetown/images/img1.jpg" /> 

    <!-- stadium/team --> 
    <a xlink:href="/team" target="new"> 
    <image id="team" x="63" y="284" width="204" height="365" xlink:href="http://www.kollegetown.com/themes/kollegetown/images/homeRollover_team.jpg"/> 
    <polygon points="189 383, 185 345, 155 316, 209 281, 211 244, 289 210, 291 241, 348 245, 397 290, 391 299, 344 276, 345 369, 365 385, 330 404, 313 438"/>     
    </a> 

    <!-- corporate -->    
    <a xlink:href="/corporate" target="new"> 
    <image id="corp" x="33" y="29" width="356" height="221" xlink:href="http://www.kollegetown.com/themes/kollegetown/images/homeRollover_corporate.jpg"/> 
    <polygon points="18 126, 86 125, 186 180, 190 271, 99 327, 31 330, 18 321"/>      
    </a> 

    <!-- campus shops --> 
    <a xlink:href="/campusbooster" target="new"> 
    <image id="shops" x="423" y="186" width="497" height="213" xlink:href="http://www.kollegetown.com/themes/kollegetown/images/homeRollover_shops.jpg"/> 
    <polygon points="425 60, 427 209, 470 226, 469 246, 483 251, 506 235, 534 244, 595 214, 600 191, 612 188, 621 201, 633 196, 631 23, 624 17, 504 17"/>     
    </a> 

    <!-- art gallery/design --> 
    <a xlink:href="/designs" target="new"> 
    <image id="design" x="496" y="407" width="331" height="321" xlink:href="http://www.kollegetown.com/themes/kollegetown/images/homeRollover_gallery.jpg"/> 
    <polygon points="503 509, 438 547, 440 691, 481 710, 482 729, 647 729, 647 582"/> 
    </a> 

</svg> 

没有与歌剧毛刺,它不会使鼠标事件过于图像敏感悬停。但用户仍然可以点击该建筑物来关注该链接。无法测试IE9(我的Win7笔记本出现问题)。