<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
<meta charset="utf-8" />
    <script>
        onload = function () {
            var al = document.getElementById('al');
            al.onmouseover = function () {
                if (document.getElementById('dv')) {
                    document.body.removeChild(document.getElementById('dv')); //防止重复添加
                }
                var dvObj = document.createElement('div');
                dvObj.id = 'dv';
                var imgObj = document.createElement('img');
                imgObj.src = '2.jpg';
                imgObj.width = '200';//不可以加px
                imgObj.height = '200';
                dvObj.appendChild(imgObj);
                dvObj.style.position = 'absolute';
                dvObj.style.left = this.offsetLeft + 'px';
                dvObj.style.top = this.offsetTop + this.offsetHeight + 'px';

                document.body.appendChild(dvObj);

            }
            al.onmouseout = function () {
                if (document.getElementById('dv')) {
                    document.body.removeChild(document.getElementById('dv'));
                }
            }
        }
    </script>
</head>
<body>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a id="al" href="http://www.baidu.com">百度一下</a>
    <!--<img src="2.jpg" width="200" height="200"/>-->
</body>
</html>

JS超链接动态显示图片的更多相关文章

  1. 22----2013.06.29---HTML--html介绍.超链接和图片,表格,表单,表单标签,meta,复习当天内容

    01 HTML HTML :Hypertext Markup Language   超文本标记语言(类似于 裸奔的人.) 作用:向用户展示信息. CSS: Cascading 层叠样式表(类似于 人的 ...

  2. js多种切换图片

    分享通过js实现多种图片切换特效,这里只有手动切换哦,自动效果需自写,效果地址:http://dwz.cn/1drD5u. 下载地址:http://***/download/index/52209 适 ...

  3. [js开源组件开发]js轮播图片支持手机滑动切换

    js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-ima ...

  4. js实现网页图片延时加载的原理和代码 提高网站打开速度

    有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...

  5. js基础进阶--图片上传时实现本地预览功能的原理

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...

  6. webpack下css/js/html引用图片的正确方式

    在webpack的处理下,为了使引用的图片被打包编译(以把src的图片文件编译到dist中或者对src的文件进行base64编码),应使用如下引用方式: 1. 在html/ejs等中引用图片: 借助r ...

  7. jq常用事件(on,blur,focus,change),js/jq等待图片(页面)加载完毕事件,js读取文件

    jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...

  8. 【js】【图片瀑布流】js瀑布流显示图片20180315

    js实现把图片用瀑布流显示,只需要“jquery-1.11.2.min.js”. js: //瀑布流显示图片 var WaterfallImg = { option: { maxWidth: 850, ...

  9. Viewer.js插件浏览图片

    https://www.jianshu.com/p/e3350aa1b0d0 Viewer.js插件浏览图片 Viewer.js插件浏览图片 Viewer.js插件浏览图片

随机推荐

  1. C# datatable增加行(datarow)数据为另一个datatable中某行

    两个表A和B,两表结构相同.现在需要将A表中部分行拷贝到B表中,直接用 DataTableB.rows.add(dataTableA.rows[0]) 这样的方法式会报"row已经属于A表& ...

  2. Centos6.5 VNC 配置

    VNC 配置 本教程配置说明 目的:实现Window下VNC登陆Linux服务器 本机是在root用户下操作完毕 两台主机已实现基本网络配置,且相互ping通 1. 检查图形界面 确保服务器端须要执行 ...

  3. Android MagicIndicator系列之一 —— 使用MagicIndicator打造千变万化的ViewPager指示器

    说到 ViewPager 指示器,想必大家都不陌生,绝大部分应用中都有这个.使用频率非常之高.但系统对它的支持并不好,自带的 PagerTabStrip 和 PagerTitleStrip 太弱,很难 ...

  4. PHP移动互联网开发笔记(4)——自定义函数及数组

    一.自定义函数 自定义函数就是我们自己定义的函数,在PHP中自定义函数格式如下: function funname(arg1, arg2, arg3......){ //TODO return val ...

  5. centos / Linux 服务环境下安装 Redis 5.0.3

    原文:centos / Linux 服务环境下安装 Redis 5.0.3 1.首先进入你要安装的目录 cd /usr/local 2.下载目前最新稳定版本 Redis 5.0.3 wget http ...

  6. java 线程排查问题流程

    1. 通过top命令查看当前系统CPU使用情况,定位CPU使用率超过100%的进程ID:2. 通过ps aux | grep PID命令进一步确定具体的线程信息:3. 通过ps -mp pid -o ...

  7. [Ramda] Refactor to Point Free Functions with Ramda using compose and converge

    In this lesson we'll take some existing code and refactor it using some functions from the Ramda lib ...

  8. [Redux] Avoid action type naming conflicts

    In redux, the action type is just a normal string type, it is easy to get naming conflicts in large ...

  9. 数组类型转换失败:NSMutableArray和NSArray的相互转换

    1.数组类型转换无效(错误) @property(strong, nonatomic) NSMutableArray *temp_Array; _temp_Array=(NSMutableArray ...

  10. XMPP之ios即时通讯客户端开发-配置XMPP基本信息之工程代码(五)

    登录功能完成以后包含以下代码文件: AppDelegate.h AppDelegate.m LoginViewController.h LoginViewController.m LoginUser. ...