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>
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)