获取图片的路径,即src的值,并依据不同的样式在alt属性中显示

本文介绍了一种使用JavaScript实现在网页上鼠标悬停于图片时显示其路径的方法。通过自定义显示样式,增强了用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

浏览网页中图片的时候,根据网页的易用性要求,当鼠标放到图片上的时候需要显示该图片的相关信息,大多数情况下显示的都是该图片的名称,为了自动获取每一张图片的名称可以在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>

 

 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值