jQuery图像映射悬停效果 [英] jQuery Image Map Hover Effects
本文介绍了jQuery图像映射悬停效果的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
< 脚本 类型 =" src =" js/jquery.maphilight.min.js" ">< /script >
< 脚本 =" 文本/javascript" < /script >
< /HEAD >
< BODY =" bodybg" < div =" slideshow" < img #links1" class 地图" 边框 =" src 图片/technology1.png" >
< img #links2" 边框 =" src =" images/technology2.png" / >
< img #links3" 边界 =" src =" images/technology3.png" / >
< img #links4" 边框 =" src =" images/technology4.png" >
< /div >
解决方案
(function(){
('.map').maphilight({fade:true}) ; }); < /script > < /HEAD > < BODY =" bodybg" < div =" slideshow" < img #links1" class 地图" 边框 =" src 图片/technology1.png" > < img #links2" 边框 =" src =" images/technology2.png" / > < img #links3" 边框 =" src =" images/technology3.png" / > < img #links4" 边框 =" src =" images/technology4.png" > < /div >
我在这里看不到问题.您只在类中标记了第一个img元素，并且仅将其与jQuery描述符一起使用，为什么?
仅当某个类中只有一个元素或使用相同的处理程序处理所有元素时，类描述符才有用.
如果您需要对同一类的所有元素进行这种统一处理，请为所有img元素赋予属性class="map".
如果不是，请通过为每个img提供一些单独的id属性来使用ID选择器，或者使用子选择器来获取div元素的子元素的集合(因此，div元素将是父元素指示要使用选择器找到哪些子级，因此将找到此div下的所有img元素.).
请参阅:
http://api.jquery.com/category/selectors/ [ http://api.jquery.com/class-selector/ [ http://api.jquery.com/id-selector/ [ http://api.jquery.com/child-selector/ [ http://api.jquery.com/attribute-equals-selector/ [ img1 =
i m using jquery image map hover effect but it apply on only one image. i have 4 images i want to it apply on all four images how can i do this.below is my source code
<script type="text/javascript" src="js/jquery.maphilight.min.js"></script>
<script type="text/javascript">$(function() {
$('.map').maphilight({fade: true});
});
</script>
</HEAD>
<BODY class="bodybg">
<div class="slideshow">
<img usemap = "#links1" class="map" border="0" src="images/technology1.png" />
<img usemap = "#links2" border="0" src="images/technology2.png" />
<img usemap = "#links3" border="0" src="images/technology3.png" />
<img usemap = "#links4" border="0" src="images/technology4.png" />
</div> 解决方案
(function() {
('.map').maphilight({fade: true}); }); </script> </HEAD> <BODY class="bodybg"> <div class="slideshow"> <img usemap = "#links1" class="map" border="0" src="images/technology1.png" /> <img usemap = "#links2" border="0" src="images/technology2.png" /> <img usemap = "#links3" border="0" src="images/technology3.png" /> <img usemap = "#links4" border="0" src="images/technology4.png" /> </div>
I don''t see a problem here. You marked with the class only the firstimgelement and use only one with jQuery descriptors, why?
Class descriptor is only good when you have only one element of some class, or process all elements with the same handler(s).
If such uniform processing for all element of the same class is your case, give the attributeclass="map"to all of yourimgelements.
If not, either use ID selector by giving each of yourimgsome individualidattributes or use the child selector to get a collection of the children of yourdivelements (so thedivelement would be a parent indicating what children to find with the selector, so all theimgelements under thisdivwill be found).
Please see:
http://api.jquery.com/category/selectors/[^],
http://api.jquery.com/class-selector/[^],
http://api.jquery.com/id-selector/[^],
http://api.jquery.com/child-selector/[^].
[EDIT]
I just noticed that all yourimgelements are already uniquely identified withusemapattribute (right, otherwise how would you use them?), so you can also use the Attribute Equal Selectors to get the individual elements:
http://api.jquery.com/attribute-equals-selector/[^].
Here is how:
img1 =
这篇关于jQuery图像映射悬停效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
