js图片框（鼠标事件）小例子

最新推荐文章于 2024-01-05 08:21:02 发布

命名不规范者

最新推荐文章于 2024-01-05 08:21:02 发布

阅读量340

点赞数

文章标签： css js onmouse事件

本文链接：https://blog.csdn.net/qq_42275455/article/details/82530917

版权

图片框功能（如使用请自行更改图片地址:本代码使用图片均为本地图片，如不更改图片地址则无法正常显示）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>

<div id="dt" style="width: 200px;height: 200px;left: 100px;top: 100px;position: absolute;border: 1px solid red;">
    <div id="bt1" style="width: 20px;height: 20px;margin-top: 150px;margin-left:20px;background-image: url(gou.jpg);float: left;border: 1px solid red;background-size:20px 20px;background-repeat:no-repeat;"></div>
    <div id="bt2" style="width: 20px;height: 20px;margin-top: 150px;margin-left:20px;background-image: url(ji.jpg);border: 1px solid red;float: left;background-size:20px 20px;background-repeat:no-repeat;"></div>
    <div id="bt3" style="width: 20px;height: 20px;margin-top: 150px;margin-left:20px;background-image: url(she.jpg);border: 1px solid red;float: left;background-size:20px 20px;background-repeat:no-repeat;"></div>
    <div id="bt4" style="width: 20px;height: 20px;margin-top: 150px;margin-left:20px;background-image: url(tu.jpg);border: 1px solid red;float: left;background-size:20px 20px;background-repeat:no-repeat;"></div>
</div>
<script type="text/javascript">
    var dt=document.getElementById('dt');
    var bt1=document.getElementById('bt1');
    var bt2=document.getElementById('bt2');
    var bt3=document.getElementById('bt3');
    var bt4=document.getElementById('bt4');
    bt1.onmouseover = function(){
        // this.style.borderBottomColor="yellow";
         // dt.style.backgroundImage='url(user2.jpg)'; 
         dt.style.backgroundImage='url(gou.jpg)';
         // bt2.style.borderBottomColor="red";
         // bt3.style.borderBottomColor="red";
         // bt4.style.borderBottomColor="red";
         // bt5.style.borderBottomColor="red";
            }
            bt2.onmouseover = function(){
         dt.style.backgroundImage='url(ji.jpg)';
            }
            bt3.onmouseover = function(){
         dt.style.backgroundImage='url(she.jpg)';
            }
            bt4.onmouseover = function(){
         dt.style.backgroundImage='url(tu.jpg)';
            }



</script>
</body>
</html>

命名不规范者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js图片框（鼠标事件）小例子

图片框功能（如使用请自行更改图片地址:本代码使用图片均为本地图片，如不更改图片地址则无法正常显示）&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt;&lt;/head&gt;&lt;body
复制链接

扫一扫