<!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. linux 内核驱动编程 简单例子 与_IO, _IOR, _IOW, _IOWR 宏解析

    一._IO, _IOR, _IOW, _IOWR 宏的用法与解析 在驱动程序里, ioctl() 函数上传送的变量 cmd 是应用程序用于区别设备驱动程序请求处理内容的值.cmd除了可区别数字外,还包 ...

  2. 百度地图坐标之间的距离php

    function GetDistance($lat1, $lng1, $lat2, $lng2){ define('PI',3.1415926535898); define('EARTH_RADIUS ...

  3. 【24.91】【Tsinsen 1302】&【BZOJ 2626】JZPFAR

    时间限制:5.0s   内存限制:256.0MB   总提交次数:547   AC次数:137   平均分:40.31 将本题分享到:        查看未格式化的试题   提交   试题讨论 试题来 ...

  4. hadoop集群安装（多机，非伪集群）

    1. 创建用户 创建hadoop用户组:sudo addgroup hadoop 创建hadoop用户:sudo adduser -ingroup hadoop hadoop 为hadoop用户分配r ...

  5. pycharm highlight

    https://www.jetbrains.com/help/pycharm/2017.1/highlighting-usages.html Highlighting usages in the cu ...

  6. 【oracle11g ，19】索引管理

    一.索引的分类: 1.逻辑上分为:  单列索引和复合索引  唯一索引和非唯一索引  函数索引 domain索引 2.物理上分:  分区索引和非分区索引 b-tree  bitmap 注意:表和索引最好 ...

  7. 【hdu 3951】Coin Game

    Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submission(s) ...

  8. java十五个常用类学习及方法举例

    <code class="language-java">import java.util.Scanner; import java.util.Properties; i ...

  9. jws 问题总结

    问题1.wsimport不是内部或外部命令 今天执行wsimport时报了wsimport报了不是内部或外部命令的错误,第一反应是检查环境变量,没发现什么问题,执行java  -version也正常, ...

  10. Mina、Netty、Twisted一起学习（三）：TCP前缀固定大小的消息(Header)

    于以前的博文于,有介绍切割消息换行的方法. 但是有一个小问题,这样的方法,设消息中本身就包括换行符,那将会将这条消息切割成两条.结果就不正确了. 本文介绍第二种消息切割方式,即上一篇博文中讲的第2条: ...