获取图片的路径,即src的值,并依据不同的样式在alt属性中显示
2011-05-16 22:15
435 查看
刘大伟
2011.05.09
浏览网页中图片的时候,根据网页的易用性要求,当鼠标放到图片上的时候需要显示该图片的相关信息,大多数情况下显示的都是该图片的名称,为了自动获取每一张图片的名称可以在js脚本中通过获取该图片的src的值实现。不过由于默认情况下,alt显示出来的效果,如字体、颜色、背景等等,并不尽人意,因此样式需要自己设计,这些也可以在脚本中实现。根据网上已有的一些方法,整理出以下的代码可以简单的实现这种功能:
<SCRIPT LANGUAGE="JavaScript">
function getAbsolutePosition(obj)
{
position = new Object();
position.x = 0;
position.y = 0;
var tempobj = obj;
while(tempobj!=null
&& tempobj!=document.body)
{
if(window.navigator.userAgent.indexOf("MSIE")!=-1)
{
position.x += tempobj.offsetLeft;
position.y +=
tempobj.offsetTop;
}
else
if(window.navigator.userAgent.indexOf("Firefox")!=-1)
{
position.x += tempobj.offsetLeft;
position.y +=
tempobj.offsetTop;
}
tempobj = tempobj.offsetParent
}
return position;
}
function showalt(e,s)
{
var object = document.getElementById(s);//s为img的ID
var m =
object.getAttribute('src', 2);//如果第二个参数为2,则显示的内容为绝对路径,和下面被注释行的结果一样
//var
m=document.getElementById(s).src;
e = e || window.event
var obj
= e.target||e.srcElement
var pos = getAbsolutePosition(obj)
var
div = document.getElementById("imgalt")
div.style.display=""
div.style.top = pos.y+e.offsetY+10+"px"
div.style.left =
pos.x+e.offsetX+10+"px"
div.innerHTML = m;
window.status =
e.clientY
}
function hide()
{
document.getElementById("imgalt").style.display="none"
}
</SCRIPT>
<img id="id1" src="pic1.jpg" width=50 onmousemove="showalt(event,'id1')"
onmouseout="hide()">
<img id="id2" src="pic2.jpg" width=150
onmousemove="showalt(event,'id2')"onmouseout="hide()">
<div id=imgalt
style="position:absolute;border:1px solid
black;background-color:yellow;display:none"></div>
相关文章推荐
- img标签src路径不变,读取不同图片时,图片不刷新甚至不显示
- php获取文件夹路径内的图片以及分页显示示例
- CSS样式中,background-image 背景图片居中显示并且在不同屏幕分辨率下始终居中
- Jquery获取背景图片src路径
- IE8.0 显示本地图片 img.src=本地图片路径无效的解决方案
- js在获取图片的src是相对路径
- java如何从一段html代码中获取图片的src路径
- js实现的鼠标放上和移开显示不同图片和文字,样式比较好看
- Android 获取屏幕尺寸与密度 遇到一个问题,我的地图浮标图片在WVGA手机上正好,在QVGA上就显的太大,所以我要根据屏幕的不同调整浮标的大小使其在QVGA大小合适。有的同事提出了依据
- SpannableString与SpannableStringBuilder(把字符串转换成图片等,字符串在textview 等控件显示不同的颜色,背景样式的方法)
- js/jq input file获取本地文件路径 将要上传图片显示到页面
- IE6/7中getAttribute获取href/src 属性(相对路径0值与其它浏览器不同
- 根据url路径获取图片并显示到ListView中
- Atitit. IE8.0 显示本地图片预览解决方案 img.src=本地图片路径无效的解决方案
- tomcat中jsp引用图片img的src属性带中文路径无法显示的解决
- 关于UIImageView显示图片的不同样式
- IE6/7中getAttribute获取href/src 属性(相对路径0值与其它浏览器不同
- Atitit. IE8.0 显示本地图片预览解决方案 img.src=本地图片路径无效的解决方案
- php获取文件夹路径内的图片以及分页显示示例
- Android——获取系统图片/拍照/获取图片路径并显示的Demo