转载：http://www.cnblogs.com/jack86514/archive/2009/04/01/1427584.html

当我们在写一个网页程序的时候，很多方法可以提供页面的动态显示，从而提高页面的视觉效果。 本例就是通过一个简单的Javascript代码动态显示图片的信息的，其实这样的例子很多，所以这里只做简单的说明了。

现在就创建一个页面，代码如下所示：

 <html>

<head>

 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

 <title>JS函数实现鼠标指向后带图片的提示效果</title>

 <script language="javascript">

 function showPic(sUrl){

  var x,y;

  x = event.clientX;

 y = event.clientY;

 document.getElementById("Layer1").style.left = x;

 document.getElementById("Layer1").style.top = y;

 document.getElementById("Layer1").innerHTML = "<img width=200 height=200 src=\""

 + sUrl + "\">";

 document.getElementById("Layer1").style.display = "block";

 }

 function hiddenPic(){

 document.getElementById("Layer1").innerHTML = "";

 document.getElementById("Layer1").style.display = "none";

 }

 </script>

 </head>

 <body>

 <div id="Layer1" style="display:none;position:absolute;z-index:1;"></div>

 <img src="100_0899.JPG" width=50 height=50 onmouseout="hiddenPic();"

 onmousemove="showPic(this.src);" />

 <p></p>

 <img src="100_0909.JPG" width=50 height=50 onmouseout="hiddenPic();"

 onmousemove="showPic(this.src);" />

 </body>

</html>

JavaScript函数实现鼠标指向后带图片的提示效果的更多相关文章

  1. HTML5鼠标hover的时候图片放大的效果展示

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. 关于原生js中ie的attacheEvent事件用匿名函数改变this指向后,不能用detachEvent删除绑定事件的解决办法？

    博客搬迁,给你带来的不便,敬请谅解! http://www.suanliutudousi.com/2017/11/28/%e5%85%b3%e4%ba%8e%e5%8e%9f%e7%94%9fjs%e ...

  3. CSS3特效----图片动态提示效果

    需掌握的知识点: 1.掌握两个HTML5新标签figure以及figcaption的用法 2.掌握transform的属性特点,并能熟练运用 3.学会通过transition及transform配合, ...

  4. EazyUI_Datagrid_行内编辑(editor)的combobox下拉框带图片

    1.业务需求: 商品的明细列表里面下拉框需要 [图片+文字 ] 显示 2.我们使用的是EazyUI,而我比较懒,不习惯用拼接html来显示列表页面,使用的是eazyui的数据网格(datagrid) ...

  5. 【Android代码片段之六】Toast工具类（实现带图片的Toast消息提示）

    转载请注明出处,原文网址:http://blog.csdn.net/m_changgong/article/details/6841266  作者:张燕广 实现的Toast工具类ToastUtil封装 ...

  6. Android开发系列（二十三）：实现带图片提示的Toast提示信息框

    Android中的Toast是非经常见的一个消息提示框.可是默认的消息提示框就是一行纯文本.所以我们能够为它设置一些其它的诸如是带上图片的消息提示. 实现这个非常easy: 就是定义一个Layout视 ...

  7. 如何在HTML中实现图片的滚动效果

    <MARQUEE onmouseover=stop() onmouseout=start() scrollAmount=3 loop=infinite deplay="0"& ...

  8. js中new函数后带括号和不带括号的区别

    用new创建构造函数的实例时,通常情况下new 的构造函数后面需要带括号(譬如:new Parent()). 有些情况下new的构造函数后带括号和不带括号的情况一致,譬如: function Pare ...

  9. JavaScript中函数的this指向!

    JavaScript的this的指向问题! 这是我自己敲的, 报错! <button>点击查看绑定事件的this指向!</button> <script> // 函 ...

随机推荐

  1. 微信支付v2开发(4) 交易通知

    本文介绍如何使用JS API支付时如何获得交易通知. 一.交易通知 用户在成功完成支付后,微信后台通知(POST)商户服务器(notify_url)支付结果.商户可以使用notify_url的通知结果 ...

  2. vue的使用（一）

    之前找了一个学前端的同学,给我免费做几个页面,但是后来也就杳无音信了,今天脑子发热自己学一下vue算了. 本节目标:      安装以及数据绑定 1.安装和运行 ·必须要安装nodejs,这个到网上写 ...

  3. echarts+百度地图+vue 填坑记（一）（百度地图、鼠标移入移出标注,信息框会产生闪烁）

    大概七月底开始实习,到现在经历了两个完整的项目(c2b). 因为开发时间紧,任务重,所以在开发过程踩到的坑都没时间去记录. 现在在开发一个某链运输监控系统,到了收尾阶段,有时间写博客了!开心! 一.鼠 ...

  4. Perl——正则表达式(四) 查找替换s///

    转自http://blog.csdn.net/blog_abel/article/details/40589227 侵删 一. 介绍 使用 s/regex/replacement/modifiers  ...

  5. 一起talk C栗子吧（第八回：C语言实例--素数）

    各位看官们,大家好,从今天開始.我们讲大型章回体科技小说 :C栗子,也就是C语言实例. 闲话休提, 言归正转. 让我们一起talk C栗子吧! 看官们.上一回中咱们说的是进制转换的样例,这一回咱们说的 ...

  6. mootools常用特性和示例（基础篇2）

    接着上一篇:mootools常用特性和示例(基础篇1) 1.表单操作 html: <form id="myForm" action="submit.php" ...

  7. 【例题5-8 UVA - 400】Unix ls

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 设n个字符串中出现的最长的为len; 最后一列能容纳len个字符,然后前面的列能容纳len+2个字符. 每行最多60个字符. 按照这 ...

  8. UI组件之AdapterView及其子类关系，Adapter接口及事实上现类关系

    AdapterView本身是一个抽象基类,它派生的的子类在使用方法上十分类似.AdapterView直接派生的三个子类:AbsListView.AbsSpinner,AdapterViewAnimat ...

  9. css3-11 网页如何使用自定义字体

    css3-11 网页如何使用自定义字体 一.总结 一句话总结:下载好字体文件,然后在网页中引入,用src: url('my.otf');来引入,使用的时候就使用自己定义的名字来使用这个字体. 1.网页 ...

  10. php重建二叉树（函数缺省参数相关的都写在后面，比如array_slice函数中的$length属性，故第一个参数是操作的数组）

    php重建二叉树(函数缺省参数相关的都写在后面,比如array_slice函数中的$length属性,故第一个参数是操作的数组) 一.总结 牛客网和洛谷一样,是真的好用 二.php重建二叉树 输入某二 ...