(2012-02-03 老物搬运)去除图片热区焦点框
来源:互联网 发布:android网络定位权限 编辑:程序博客网 时间:2024/06/10 07:58
去除图片热区焦点框
如果用图片热区做超链接,在FF下当鼠标指向热区的时候是会显示手型的,而在IE和Chrome下均没有反应。同样,对<area>标签的CSS设置cursor="pointer"或者别的什么指针类型,仍然是只有FF起反应,IE和Chrome还是普通的指针。
想要在所有情况下都让鼠标变成手,只有在area标签中增加href属性,比如:
<area shape="poly" href="javascript:;" coords="32,51,103,84,97,106,21,91,11,65" onclick="doSth();"/>
但是在增加href之后,IE下就会沿着热区出现实线的焦点框,很难看,试了一下网上说的IE专属的hidefocus="true"以及还有outline=none均无效。唯一有用的是onfocus="this.blur()",但是在标签中增加这句话之后,IE确实是没有边框了,FF下却出现了虚线焦点框。
最后妥协的办法是先判断一下浏览器决定要不要加onfocus,在JS的初始化函数中加入
function init(){
//初始化的一些其他函数
if(getOs()=='MSIE'){
$('area').focus(function(e) {
$('area').blur();
});
}
}
//获取浏览器类型的一个简单函数
function getOs()
{
if(navigator.userAgent.indexOf("MSIE")>0) {
return "MSIE";
}
if(navigator.userAgent.indexOf("Firefox")>0){
return "Firefox";
}
if(navigator.userAgent.indexOf("Chrome")>0) {
return "Chrome";
}
if(navigator.userAgent.indexOf("Safari")>0) {
return "Safari";
}
if(navigator.userAgent.indexOf("Camino")>0){
return "Camino";
}
if(navigator.userAgent.indexOf("Gecko")>0){
return "Gecko";
}
return "unKnow";
}
这样写还有一个好处就是看起来干净,因为代码放到了JS文件里而不是直接写在HTML标签中,否则每个area标签都要加一行onfocus事件。"this.blur()"原理其实就是当这个元素获得焦点的时候把焦点丢失掉,也就达到了消除焦点框的墓地,但是存在的缺陷是这个链接就必须用鼠标点,想通过按tab键就永远选择不到这个按钮了
- (2012-02-03 老物搬运)去除图片热区焦点框
- (2012-04-03 老物搬运)初识Robotlegs
- (2012-01-14 老物搬运)N1真题 错题汇总1
- (2012-01-14 老物搬运)N1真题 错题汇总2
- (2012-4-12 老物搬运)如何去写mediator
- (2012-01-08 老物搬运)[EssentialActionScript3.0中文版]无责任翻译-23章屏幕更新(3)
- 去除input焦点框
- HTML 图片热区(img usemap)
- 图片热区链接
- 图片热区应用
- 去除input边框 input去除边框 去除input获取焦点时的蓝色外边框
- 回家老热
- 图片热区应用实例
- QT去除控件被选中后的焦点虚线框
- QT去除控件被选中后的焦点虚线框
- 搬运树苗(move)
- 移动端图片上传裁切(版权归秒为所有,仅为搬运)
- 老毛桃去除内置广告
- 【JQuery】右键菜单插件——contextmenu
- (2012-01-08 老物搬运)[EssentialActionScript3.0中文版]无责任翻译-23章屏幕更新(3)
- (2012-01-14 老物搬运)N1真题 错题汇总1
- (2012-01-14 老物搬运)N1真题 错题汇总2
- linux下mysql5.7.11的源码安装入门
- (2012-02-03 老物搬运)去除图片热区焦点框
- 谈谈一些感受吧
- 分享 Java 数据库连接器
- 求任意大小矩阵两点之间的最短路径(回溯)
- yacc和lex的林林总总
- python多线程之Queue
- 几种常见的排序算法
- 推荐系统之矩阵分解
- (2012-04-03 老物搬运)初识Robotlegs