html点击图片d出文字框

html点击图片d出文字框,第1张

html点击图片d出文字框的处理方法。

1、打开html编辑器,新建html文件。

2、在index.html中的body标签中,输入js代码。

3、浏览器运行index.html页面,点击按钮d出了提示框即可。

可以使用图片自带title属性,设置提示信息!

优点:简单,快捷。

缺点:提示信息样式单一,而且不明显。

如代码:

<img src="图片路径" title="提示信息文字" />

利用鼠标事件onmouseover,利用js,控制鼠标移入时候,上方会出现自己用CSS样式写出的想要表达的提示信息。

优点:提示信息样式可以自己定义,个性化。

缺点:比较复杂,需要web前端开发人员来做。没有html,css,js基础的人,不容易实现。

参考:可以参考W3C中的HTML,CSS,JavaScript,来帮助自己实现功能效果。

代码如下:

<!DOCTYPE html>

<html>

<head>

<script>

function bigImg(x)

{

x.style.height="180px"

x.style.width="180px"

}

function normalImg(x)

{

x.style.height="128px"

x.style.width="128px"

}

</script>

</head>

<body>

<img onmousemove="bigImg(this)" onmouseout="normalImg(this)" border="0" src="/i/eg_smile.gif" alt="Smiley" >

<p>函数 bigImg() 在鼠标指针移动到图像上时触发。此函数放大图像。</p>

<p>函数 normalImg() 在鼠标指针移出图像时触发。此函数把图像的高度和宽度重置为正常尺寸。</p>

</body>

</html>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7101209.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-01
下一篇 2023-04-01

发表评论

登录后才能评论

评论列表(0条)

保存