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

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

<!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>

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

猜你喜欢