图片切换onmouseover 事件

news/2024/5/10 1:01:59/文章来源:https://blog.csdn.net/weixin_38168728/article/details/99924976

http://www.w3school.com.cn/htmldom/event_onmouseover.asp

 

 

定义和用法

onmouseover 时间会在鼠标指针移动到指定的对象上时发生。

语法

οnmοuseοver="SomeJavaScriptCode"
参数描述
SomeJavaScriptCode必需。规定该事件发生时执行的 JavaScript。

支持该事件的 HTML 标签:

<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>,
<caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>,
<form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>,
<li>, <map>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>,
<sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>,
<tr>, <tt>, <ul>, <var>

支持该事件的 JavaScript 对象:

layer, link

实例 1

在下面的例子中,我们将在用户把鼠标指针移动到图像上时显示一个对话框:

<img src="/i/eg_mouse2.jpg" alt="mouse"
onmouseover="alert('您的鼠标在图片上!')" />

输出:(请把鼠标移动图片上):

Visit W3School!

实例 2

下面的例子中,我们将在网页上添加一个用作连接按钮的图像,然后我们会添加 onMouseOver 和 onMouseOut 事件,这样就可以在运行两个 JavaScript 函数来切换两幅图像:

<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.getElementById('b1').src ="/i/eg_mouse.jpg"
}
function mouseOut()
{
document.getElementById('b1').src ="/i/eg_mouse2.jpg"
}
</script>
</head>
<body>
<a href="http://www.w3school.com.cn"
onmouseover="mouseOver()" onmouseout="mouseOut()">
<img alt="Visit W3School!" src="/i/eg_mouse2.jpg" id="b1" />
</a>
</body>
</html>

输出:

Visit W3School!

TIY

onmouseover
如何使用 onmouseover。

转载于:https://www.cnblogs.com/291099657/archive/2009/04/27/1444568.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_791425.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

kotlin学习(2):android开发股票APP开发。先上github交友网站进行搜索,参考相关开源项目。然后进行二次开发、修改,不从零进行项目开发。

目录前言1&#xff0c;关于股票APP2&#xff0c;使用下载代码运行3&#xff0c;总结前言 本文的原文连接是: https://blog.csdn.net/freewebsys/article/details/108718819 未经博主允许不得转载。 博主地址是&#xff1a;http://blog.csdn.net/freewebsys 1&#xff0c;关于…

手机网站按住放大图片_动辄上千的手机稳定器值不值?魔爪手机稳定器mini mx 499不香么...

现在什么最火&#xff1f;当然是小视频vlog了。随着抖音等短视频App的火爆&#xff0c;短视频就风靡全球了。录制短视频也从兴趣爱好演变成了多种职业形式&#xff0c;不仅能够满足个人记录还能够带来经济收益。那么怎样才能像vlog创作者一样录制高质量的短视频资源呢&#xff…

2018洛奇英雄传永恒最新服务器,洛奇英雄传:永恒官方网站-这一次让经典成为永恒...

《洛奇英雄传&#xff1a;永恒》公会篝火玩法介绍2017年05月16日公会是洛英手游的特色系统&#xff0c;在洛英手游中&#xff0c;公会玩法众多&#xff0c;既有着公会饮酒&#xff0c;公会篝火等休闲玩法&#xff0c;还有着斗争之塔&#xff0c;征战英雄等公会副本战斗&#xf…

摄影分享网站之导航栏

一. 图片展示 二.内容构成 该导航栏由一个大div标签里面包裹三个小div&#xff0c;分别用来放置logo,和搜索框加按钮&#xff0c;最后一个放置导航链接 &#xff0c;链接里实现下拉菜单。 1.logo logo部分比较简单&#xff0c;把图片放入设定好大小的div中&#xff0c;使用flo…

python编程游戏用什么软件好,推荐4个 Python 的编程游戏网站

简说Python号主老表&#xff0c;自学&#xff0c;分享Python&#xff0c;SQL零基础入门、数据分析、数据挖掘、机器学习优质文章以及学习经验。135篇原创内容公众号↑↑↑关注后"星标"简说Python人人都可以简单入门Python、爬虫、数据分析简说Python推荐本文内容来源…

java线程睡眠的方法_「thread.sleep」Java Thread之Sleep()使用方法总结 - seo实验室

thread.sleep一、API简介Thread.sleep()是Thread类的一个静态方法&#xff0c;使当前线程休眠&#xff0c;进入阻塞状态(暂停执行)&#xff0c;如果线程在睡眠状态被中断&#xff0c;将会抛出IterruptedException中断异常。。主要方法如下&#xff1a;【a】sleep(long millis) …

计算机科学与技术导论 网站,计算机科学与技术导论

????张小峰、贾世祥、柳婵娟、邹海林编著的《计算机科学与技术导论》以启迪科学思想、培育创新精神为目标&#xff0c;以知识为起点&#xff0c;以知识发现、发展和应用为主线&#xff0c;构建 计算机科学技术导论 课程的内容体系。包括理论产生、研究的动因、思想方法和理…

服务器错误信息暴露URL,访问网站提示An error occurred on the server when processing the URL的解决方法...

大家看到这个信息不要怕&#xff0c;这个就说明了你的iis7或iis7.5的下的网站有错误。只要找到具体的信息就可以了&#xff0c;跟iis6下的经典提示错误一样的。解决方法:An error occurred on the server when processing the URL. Please contact the system administrator在W…

html网站首页代码_如何在百度站长工具平台上进行“网站验证”

作为一名站长&#xff0c;在网站搭建以后&#xff0c;如果想要使用百度站长工具了解网站的相关数据&#xff0c;这时需要先到百度站长工具平台上验证您的网站。站长平台推荐站长添加主站(您网站的链接也许会使用www和非www两种网址&#xff0c;建议添加用户能够真实访问到的网址…

mysql 网页版管理工具_WP菜鸟建站25:怎样安装和打开phpMyAdmin数据库管理工具?...

wordpress程序是由PHP语言开发而的一个动态网站程序&#xff0c;所以&#xff0c;它拥有自己的mysql数据库。我们的wordpress网站的前端页面所展示的文字和图片信息&#xff0c;都是从这个mysql数据库中调用出来的。一般情况下&#xff0c;作为wordpress站长的我们&#xff0c;…

randint函数_静态网站利用云函数 SCF + API 网关访问自定义后端接口

本文介绍使用全静态页面的网站如何利用腾讯云的 SCFAPI 服务实现简单的后端接口&#xff0c;并提供了一个 Python 出题器的实例演示。相关服务介绍&#xff1a;云函数(Serverless Cloud Function&#xff0c;SCF)是腾讯云为企业和开发者们提供的无服务器执行环境&#xff0c;帮…

html 字加白色透明,如何给网站背景加一个白色的透明文字

如何给网站背景加一个白色的透明文字如何给网站背景加一个白色的透明文字&#xff0c;如果对你有帮助就看看吧。那么如何给网站背景添加呢?其实也很简单&#xff0c;只需要一些代码即可实现&#xff0c;这个代码呢也是站长在其他地方发现的&#xff0c;就感觉还不错就拿过来用…

基于SSM的模板项目运动网站(附源码链接)

基于SSM的体适能运动协会 基于SSM的体适能运动协会项目属于SSM的一个综合实例项目&#xff0c;很多类似的项目都可在上面进行扩展。整个项目包括前台与后台&#xff0c;它不仅包括前台资源的展示&#xff0c;也包含了后台数据的实时更新等。此项目适用于毕设也适用于地方机构网…

火狐firefox,IE,网站变灰变黑兼容代码

内容提要&#xff1a; 大家都知道在IE浏览器中&#xff0c;可以使用一段代码 body {filter: gray;} 用微软的滤镜代码将网站整体去色成为黑白灰色调效果&#xff0c;但是并不兼容firefox等其他非IE浏览器。大家都知道在IE浏览器中&#xff0c;可以使用一段代码 body {filter: g…

树莓派raspbian大小_想自己搭建服务器,永久运行网站?一个U盘大小的树莓派就够了!...

来自&#xff1a;https://urlify.cn/nqaQVfNo.1前言由于本人在这段时候&#xff0c;看到了一个叫做树莓派的东东&#xff0c;初步了解之后觉得很有意思&#xff0c;于是想把整个过程记录下来。No.2树莓派是什么&#xff1f;Raspberry Pi(中文名为树莓派,简写为 RPi&#xff0c;…

支付宝当面付扫码支付支付后不回调_对接支付宝当面付进行电脑网站和手机网站收款教程...

对接支付宝当面付进行电脑网站和手机网站收款教程第一步&#xff1a;风铃自动卡密发卡平台前端搭建第二步&#xff1a;对接支付宝当面付进行电脑网站和手机网站收款项目地址&#xff1a;https://github.com/Tai7sy/card-system该系统采用Laravel / Vue MuseUI Element &#…

建站篇——分享按钮

分享控件效果如下 创建步骤&#xff1a;1. 打开百度分享源码获取页面http://share.baidu.com/get-codes 2.选择一个样式&#xff0c;复制代码 3.放入你的网页。 转载于:https://www.cnblogs.com/tuyile006/archive/2012/06/28/2568725.html

【年度盛宴】2012年排名前20位的 CSS 网站作品

2012年涌现出众多独特的&#xff0c;令人印象深刻的 CSS 网站作品&#xff0c;要从中挑选出年度应用 CSS 的最佳网站列表一个严峻的挑战&#xff0c;因为 CSS 涵盖了媒体查询&#xff08;CSS3 Media Queries&#xff09;、CSS 动画和3D转换等众多特性。我根据过去 CSS 典型的应…

全中文配音!微软Halo版 Visual Studio 程序员“直面挑战”网站

微软真的是挺能搞的.做了一个 Visual Studio 程序员“直面挑战”网站的宣传站点,用Halo风格做的视频,全中文配音,配音挺幽默的推荐程序员朋友们访问,另外这个网页的技术也非常炫,值得大家去欣赏.访问:Visual Studio 程序员“直面挑战”转载于:https://www.cnblogs.com/AlphaWu/…

分享12套超酷的后台管理员界面网站模板

日期&#xff1a;2012-10-16 来源&#xff1a;GBin1.com 在上次的文章中我们介绍了一套超酷的黑色系单页面网站模板&#xff0c;今天我们带来了12套超棒的管理员专用网站模板&#xff0c;希望大家喜欢&#xff01; 在这些超棒的网站模板可以直接应用到其它的开源CMS &#xff…