首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使onmouseover图像大小相对于onmouseout img?

要实现onmouseover图像大小相对于onmouseout图像的效果,可以通过以下步骤来实现:

  1. 首先,在HTML中创建一个包含两个图像的容器,例如使用<div>元素。一个图像用于onmouseover事件,另一个图像用于onmouseout事件。
代码语言:txt
复制
<div onmouseover="changeImageSize(true)" onmouseout="changeImageSize(false)">
  <img id="image" src="image1.jpg" alt="Image 1">
  <img id="image" src="image2.jpg" alt="Image 2">
</div>
  1. 接下来,在JavaScript中定义一个函数changeImageSize(),该函数将根据传入的参数来改变图像的大小。
代码语言:txt
复制
function changeImageSize(isMouseOver) {
  var image = document.getElementById("image");
  
  if (isMouseOver) {
    // 设置onmouseover图像的大小
    image.style.width = "200px";
    image.style.height = "200px";
  } else {
    // 设置onmouseout图像的大小
    image.style.width = "100px";
    image.style.height = "100px";
  }
}

在这个函数中,我们通过使用document.getElementById()方法获取图像元素,并根据传入的参数来设置图像的宽度和高度。当鼠标悬停在图像上时,将设置onmouseover图像的大小为200px x 200px,当鼠标移出图像时,将设置onmouseout图像的大小为100px x 100px。

  1. 最后,可以根据需要自定义CSS样式来美化图像容器和图像。

通过以上步骤,当鼠标悬停在图像上时,图像的大小将相对于鼠标移出图像时的大小发生变化。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

EasyNVR H5无插件直播方案前端构建之:播放界面添加实时云台控制界面

如何在播放器上加一个云台控制界面 ---- 问题: 对于实时直播的视频播放, 由于播放页面客观样式要求(一个播放器占据了整个页面),因此很难找出很合理的空间来放置其他功能按钮的位置(比如配合实时的云平台控制界面...为了保持一个良好的用户体验,在保证不影响播放效果和播放界面的前提下,如何合理的添加云台控制界面成为一个问题。...="ptzout()" onmouseover="MM_swapImage('Image19','','images/add.png',1)" onmousedown="ptzcmdSubmit('zoomin...="ptzout()" onmouseover="MM_swapImage('Image20','','images/u.png',1)" onmousedown="ptzcmdSubmit('up')...="ptzout()" onmousedown="ptzcmdSubmit('home')" onmouseover="MM_swapImage('Image23','','images/h.png',

1K11
  • 让剁手党洞察物体细节,“放大镜”当之无愧

    从效果图中可以看出,无非就是操作两张内容相同,但大小不同的图片。通过控制比例来实现放大的效果。但是需要注意的是,两张照片的宽高比必须是成比例的。 原理结构图 ?...获取元素(含边框)自身高度 scrollLeft: 获取元素的左滚距离 scrollTop: 获取元素的上滚距离 event.clientX: 元素的X坐标 event.clientY: 元素的Y坐标 onmouseover...pic.offsetWidth - mov.offsetWidth; //设置move块的Y轴最大移动距离 var maxY = pic.offsetHeight - mov.offsetHeight; 5.根据move块相对于...box的占比与放大区相对于大图的占比进行比例计算,得到显示图片的显示位置。...var newX = 0, newY = 0, nowDisX = 0, nowDisY = 0; pic.onmouseover

    1.3K80

    HTML DOM Event 对象

    事件句柄(Event Handlers)   HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为,比如当用户点击某个 HTML 元素时启动一段 JavaScript。...onerror 在加载文档或图像时发生错误。 onfocus 元素获得焦点。 onkeydown 某个键盘按键被按下。 onkeypress 某个键盘按键被按下并松开。...onload 一张页面或一幅图像完成加载。 onmousedown 鼠标按钮被按下。 onmousemove 鼠标被移动。 onmouseout 鼠标从某元素移开。...onmouseover 鼠标移到某元素之上。 onmouseup 鼠标按键被松开。 onreset 重置按钮被点击。 onresize 窗口或框架被重新调整大小。 onselect 文本被选中。...x,y 事件发生的位置的 x 坐标和 y 坐标,它们相对于用CSS动态定位的最内层包容元素。 标准 Event 属性 下面列出了 2 级 DOM 事件标准定义的属性。

    1.3K20

    初识HTML之基础篇

    "#锚点名称">内容`` marquee 标签 可以创建一个滚动效果 <marquee direction="down" loop="4" onmousenver=this.stop( ) onmouseout...=this.stop( ) onmouseover=this.start( ) scrollamout="1"(滚动速度) ---- img标签的用法 img图片标签与路径 常用的图片格式 jpg png...gif gif (只支持全透明的) Jpeg / jpg png(半透明/全透明都支持) 图片四要素 src=" " 图片路径 alt=" " 图片含义 width=" " 图片宽度 尽量与图片大小保持一致...height=" " 图片高度 尽量与图片大小保持一致 图片标签的写法 关于路径的小知识 相对路径:(Relative...Path)相对于该文件的路径; 绝对路径:(Absolute Path)从磁盘出发的路径; / 开头表示根目录 ./ 表示当前目录; ../ 上级目录 直接用文件名不带 / 也表示同一目录 ----

    1.8K40

    修炼内功之JavaScript设计模式(二)

    2 适配器模式 Adapter 概念:将一个类(对象)的接口(方法或者属性)转化成另外一个接口,以满足用户需求,使类(对象)之间接口的不兼容问题通过适配器得以解决。...4 装饰者模式 Decorator 概念:在不改变原对象的基础上,通过对其进行包装拓展(添加属性或者方法)使原有对象可以满足用户的更复杂需求。...var spans = document.getElementsByTagName('span'); // 为用户名绑定特效 spans[0].onmouseover = function () {...通过这个匿名回调函数 // 我们将获取到的this传递到changeColor函数中,即可实现需求 spans[0].onmouseout = function () { changeColor(this...如果需求再有变化,只需要修改changeColor的内容就可以了 // 而不必去到每个事件回调函数中去修改,以新增一个桥接函数为代价 将实现层(如元素绑定的事件)与抽象层(如修饰页面UI逻辑)解耦分离,使两部分可以独立变化

    43320
    领券