使用CSS3和HTML在将鼠标放在图片上的时候发生变化，同样点击按钮改变图片

最新推荐文章于 2022-12-29 13:57:32 发布

呆呆侠

最新推荐文章于 2022-12-29 13:57:32 发布

阅读量1.6k

点赞数

分类专栏： css3&&Js

本文链接：https://blog.csdn.net/liuzhenghui666666/article/details/93526441

版权

css3&&Js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lzh</title>
    <script>
        function onmouseon(x) {
            x.src="../img/A.jpg";
        }
        function onmouseoff(x) {
            x.src="../img/B.jpg";
        }
        var pic=new Array();
        pic[0]="../img/1.jpg";
        pic[1]="../img/2.jpg";
        pic[2]="../img/3.jpg";
        pic[3]="../img/4.jpg";
        function change() {
            var x=Math.ceil(Math.random()*3)
            document.getElementById("pic").src=pic[x];
        }
    </script>

</head>
<body>
<!--开始是图片B，鼠标放上去变成图片A-->
<a id="2"><img onmouseover="onmouseon(this)" onmouseleave="onmouseoff(this)" src="../img/B.jpg"></a>
<!--放置一个图片-->
<img id="pic" width="960" height="540" src="../img/1.jpg">
<form>
<!--    制作一个点击按钮，点击后执行chang函数-->
    <input type="button" value="click"  onclick="change()" />
</form>

呆呆侠

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用CSS3和HTML在将鼠标放在图片上的时候发生变化，同样点击按钮改变图片

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>lzh</title> <script> function onmouseon(x) { x.src="../...
复制链接

扫一扫

专栏目录