JavaScript FAQ(十三)——图片

简介: 十一、图片 1. OnMouseOver效果(OnMouseOver Effects)Q:我如何在用户鼠标放到图片上时更改这个图片?A:这里一个简单的例子:鼠标移到文件上,它就会打开。鼠标移走,它就会关闭。

十一、图片 

1. OnMouseOver效果我如何在用户鼠标放到图片上时更改这个图片?

A:这里一个简单的例子:This image changes when you point at it!

鼠标移到文件上,它就会打开。鼠标移走,它就会关闭。

在这个例子中,图像是2.gif,而图片是1.gif。它们都保存在../hi-icons文件夹中。为了实现“mouseover”效果,标记被嵌入到一个超链接中,由这个超链接来处理onMouseOveronMouseOut事件:

function handleOver() { if (document.images) document.imgName.src=img_on.src; } function handleOut() { if (document.images) document.imgName.src=img_off.src; } //-->

这里还有一个包含了几个图片的复杂一些的例子:This image changes when you point at it! This image changes when you point at it! This image changes when you point at it! This image changes when you point at it! This image changes when you point at it! This image changes when you point at it!

代码和上面的很相似,除了这个事件处理器将图片的编号作为了输入参数。(要查看实际的代码,可以查看本页源代码。)

 

2. OnMouseDown效果(OnMouseDown Effects

Q:我如何在用户点击图片时改变它?

A:这个非常类似与onMouseOver效果。然而这个页面介绍的技术,只能在Netscape 4.x或者Internet Explorer 4.x(或者更新的浏览器中)实现,因为3.x版本的浏览器都不支持onMouseDownonMouseUp事件。

这是一个简单的例子:This image changes when you press the mouse button!

当鼠标指向文件夹时按下鼠标,它就会打开。放开鼠标,它就会关闭。

这个例子中标签被嵌入到一个包含了onMouseDownonMouseUponMouseOut事件处理器的超链接中:


This image changes when you press the mouse button!



这里有一个包含了几个图片的复杂一些的例子:This image changes when you point at it!

代码和上面的很相似,除了这个事件处理器将图片的编号作为了输入参数。(要查看实际的代码,可以查看本页源代码。)

 

3. 图片按钮(Buttons with Images

Q:我能创建可按下的图片按钮吗?

A:可以。每一个按钮需要两个图片:一个是“按下的按钮”,另一个是“释放的按钮”。试一下下面的例子:将鼠标指针放到下面的按钮上,按下鼠标左键——按钮图片会变为“按下”状态。观察按钮变回“释放”状态时按钮图片的变化,将(按下的)鼠标移出图片,然后释放鼠标。

Index Home

在这个例子中,“按下的按钮”图片是btn1down.gifbtn2down.gif;“释放的按钮”图片是btn1up.gifbtn2up.gif。为了让按钮“可以按下”,每一个标记都包含在了有onMouseDownonMouseUponMouseOutonClick事件处理器的超链接中:

Index
Home


目录
相关文章
|
5月前
|
前端开发 JavaScript 容器
制作b超单生成器, 假怀孕b超单图片制作, p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具,效果逼真,仅供学习参考与娱乐。包含前端技术学习要点:语义化布局、响应式设计、Flexbox、图片自适应
|
前端开发 JavaScript API
使用 JavaScript 实现图片上传
使用 JavaScript 实现图片上传
390 1
|
前端开发 JavaScript
杨老师课堂之JavaScript案例手动切换轮播图片
杨老师课堂之JavaScript案例手动切换轮播图片
97 2
|
前端开发 JavaScript
杨老师课堂之JavaScript案例之自动切换轮播图片
杨老师课堂之JavaScript案例之自动切换轮播图片
64 1
|
10月前
|
移动开发 JavaScript 前端开发
【Html.js——图片折叠效果】折叠手风琴(蓝桥杯真题-1763)【合集】
本项目实现了一个图片折叠手风琴效果,使用jQuery完成。主要包括以下部分: - **介绍**:任务是通过点击图片实现折叠和展开的效果。 - **准备**:内置初始代码,包含 `css/style.css`、`images/` 文件夹、`js/` 文件夹及 `index.html` 等文件。启动 Web Server 服务可运行项目。 - **目标**:完善 `index.js` 文件,使页面达到预期的折叠效果。 - **规定**:严格按步骤操作,保持默认文件结构不变,并在完成后保持 Web 服务正常访问状态。 - **通关代码**:使用 jQuery 实现点击事件,为选中元素添加 `act
220 19
|
11月前
|
JavaScript 容器
带方向感知功能的js图片遮罩层插件
带方向感知功能的js图片遮罩层插件
|
JavaScript 前端开发
【原创】用JavaScript动态获取网页中缩放图片的长度、宽度和显示比例
【原创】用JavaScript动态获取网页中缩放图片的长度、宽度和显示比例
|
Web App开发 JavaScript 前端开发
使用 JS 实现在浏览器控制台打印图片 console.image()
在前端开发过程中,调试的时候,我们会使用 console.log 等方式查看数据。但对于图片来说,仅靠展示的数据与结构,是无法想象出图片最终呈现的样子的。 虽然我们可以把图片数据通过 img 标签展示到页面上,或将图片下载下来进行预览。但这样的调试过程实在是复杂,何不实现一个 console.image() 呢?
347 1
使用 JS 实现在浏览器控制台打印图片 console.image()
|
JavaScript 前端开发 安全
80 行 JS 代码实现页面添加水印:文字水印、多行文字水印、图片水印、文字&图片水印
80 行 JS 代码实现页面添加水印:文字水印、多行文字水印、图片水印、文字&图片水印 1. 信息标识: 水印可以用于标识文档的所有者、保密级别、状态或其他相关信息,帮助用户更好地理解文档内容的属性。 2. 版权保护: 在文档中添加水印可以帮助保护内容的版权,防止他人未经授权地复制、转载或篡改内容。 3. 安全保护: 对于敏感信息或机密文档,添加水印可以帮助防止信息泄露,提高文档的安全性。 4. 提升专业性: 在一些场景下,如商业报告、合同文件等,添加水印可以增加文档的专业性和正式性。 5. 防止截屏或拷贝: 在网页中添加水印可以防止用户通过截屏或复制粘贴等方式非法获取文档内容。
402 1
80 行 JS 代码实现页面添加水印:文字水印、多行文字水印、图片水印、文字&图片水印
|
前端开发 JavaScript
杨校老师课堂之JavaScript案例之跑马灯左右无缝连接图片自动轮播
杨校老师课堂之JavaScript案例之跑马灯左右无缝连接图片自动轮播
80 2

热门文章

最新文章