Jquery SVG在Concrete 5中调用JavaScript
我在一个站点上有一个SVG图像地图——我将SVG内联。现在我想添加其他内容,因此决定使用该方法,并将SVG放在外部文件中,这样我就可以将图像标记放在外部文件中。问题是我正在从SVG的onmouseover、onmouseout参数调用JavaScript函数,而这些JS函数使用JQuery。函数可以很好地调用,但未定义I get$。正在加载JQuery 我在这里有一个测试页面: 如果您打开console,您将看到$is not defined错误,如果您滚动一个热点Jquery SVG在Concrete 5中调用JavaScript,jquery,svg,Jquery,Svg,我在一个站点上有一个SVG图像地图——我将SVG内联。现在我想添加其他内容,因此决定使用该方法,并将SVG放在外部文件中,这样我就可以将图像标记放在外部文件中。问题是我正在从SVG的onmouseover、onmouseout参数调用JavaScript函数,而这些JS函数使用JQuery。函数可以很好地调用,但未定义I get$。正在加载JQuery 我在这里有一个测试页面: 如果您打开console,您将看到$is not defined错误,如果您滚动一个热点 任何想法都值得赞赏。当然,
任何想法都值得赞赏。当然,您需要加载jQuery。将以下行添加到SVG:
<script type="text/javascript" xlink:href="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"/>
在我看来,更优雅的解决方案是使用CSS3动画而不是jQuery():
a>图像{
不透明度:0;
指针事件:无;
过渡:不透明度。25秒缓进缓出;
-moz过渡:不透明度。25秒缓进缓出;
-webkit过渡:不透明度。25秒易入易出;
}
a>多边形{
不透明度:0;
}
a:悬停>图像{
指针事件:自动;
显示:内联;
不透明度:1;
}
Opera有一个小问题,它不会使鼠标悬停时的图像过于敏感。但是用户仍然可以点击建筑来跟随链接。无法测试IE9(我的Win7笔记本有问题)。self.jQuery在ChromiumHanks中工作很多,但它不能。首先,我从JQuery中得到这个错误:UncaughtTypeError:无法将属性“display”设置为null,然后在滚动得到任何内容时:UncaughtTypeError:Object#没有方法“stop”
<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>