<!DOCTYPE html>

<html lang="en">

<style>

ul{list-style: none;}

li{float: left;margin-left: 20px;

}

li a{display: block;border:2px solid #ccc;}

#tooltip2{

        position: absolute;

}

#tooltip{

    position: absolute;

    border:2px solid #ccc;

    width: 300px;height: 300px;

}

</style>

<head>

    <meta charset="UTF-8"> <script src="http://code.jquery.com/jquery-1.11.3.js"></script> 

    <title>Document</title>

    <!-- <script type="text/javascript">

    jQuery(document).ready(function($) {

        var x=10;

        var y=20;

        $('a.tooltip').mouseover(function(event){

            this.myTitle=this.title;

            this.title='';//取消a的title属性，从而不会显示默认的

       var tooltip='<div id="tooltip2">'+this.myTitle+'</div>';//把默认的赋值到鼠标移动上

       $('body').append(tooltip);

       $('#tooltip2').css({'top':(event.pageY+y)+'px',//event.pageY为当前鼠标的纵坐标

                 'left':(event.pageX+x)+'px'

   }).show('fast');

    }).mouseout(function(event){

        this.title=this.myTitle;

$('#tooltip2').remove();

//remove是删除节点，而removeAttr()是删除属性

    }).mousemove(function(event){

        $('#tooltip2').css({'top':(event.pageY+y)+'px',

                 'left':(event.pageX+x)+'px'

   });

    });

});

</script>

<body> -->

<script type="text/javascript">

jQuery(document).ready(function($) {

    var x=10;

    var y=20;

$('li a').mouseover(function(e){

    // this.myTitle=this.title;

    //         this.title='';

var ele=$('<div id="tooltip">'+this.title+'</div>');

$('body').append(ele);

$('#tooltip').css({'top':(e.pageY+y),'left':(e.pageX+x)}).show('fast');

}).mouseout(function(){

     // this.title=this.myTitle;

 $('#tooltip').remove();

}).mousemove(function(e){

$('#tooltip').css({'top':(e.pageY+y),'left':(e.pageX+x)}).show('fast');

});

});

</script>

</head>

<!-- <script type="text/javascript">

    jQuery(document).ready(function($) {

        var x=10;

        var y=20;

        $('a.tooltip').mouseover(function(event){

            this.myTitle=this.title;

            this.title='';//取消a的title属性，从而不会显示默认的

            var imgTitle=this.myTitle?'<br/>'+this.myTitle:'';

       var tooltip="<div id='tooltip2'><img src='"+this.href+"' alt='产品预览图'/>"+imgTitle+"</div>";

       //把默认的赋值到鼠标移动上

       $('body').append(tooltip);

       $('#tooltip2').css({'top':(event.pageY+y)+'px',//event.pageY为当前鼠标的纵坐标

                 'left':(event.pageX+x)+'px'

   }).show('fast');

    }).mouseout(function(event){

        this.title=this.myTitle;

$('#tooltip2').remove();

//remove是删除节点，而removeAttr()是删除属性

    }).mousemove(function(event){

        $('#tooltip2').css({'top':(event.pageY+y)+'px',

                 'left':(event.pageX+x)+'px'

   });

    });

});

</script> -->

<p><a href="#" class='tooltip' title='这是我的超链接提示1.'>提示1.</a></p>

<p><a href="#" class='tooltip' title='这是我的超链接提示2.'>提示2.</a></p>

<ul>

    <li><a href="javascript:void(0);" title='<img src="data:image/1.webp" alt="未显示" id="tooltip">'><img src="data:image/1.webp" alt="未显示"></a></li>

    <li><a href="javascript:void(0);" title='<img src="data:image/2.webp" alt="未显示" id="tooltip">'><img src="data:image/2.webp" alt="未显示"></a></li>

    <li><a href="javascript:void(0);" title='<img src="data:image/3.webp" alt="未显示" id="tooltip">'><img src="data:image/3.webp" alt="未显示"></a></li>

    <li><a href="javascript:void(0);" title='<img src="data:image/4.webp" alt="未显示" id="tooltip">'><img src="data:image/4.webp" alt="未显示"></a></li>

</ul>

</body>

</html>

<!-- 火狐不支持webp格式的图片 -->
在谷歌上可以运行，火狐和ie不支持webp格式，不能运行

火狐不支持webp格式的图片的更多相关文章

  1. Linux下php+imagemagick支持webp格式的图片

    摘要 ImageMagick是一款功能强大的图片处理工具包,很多互联网应用中都会涉及到图片处理工作,比如切割.缩放.水印.格式转换等.ImageMagick就是一个理想的工具包. 安装基础依赖 先检查 ...

  2. SDWebImage支持WebP格式图片

    SDWebImage本身就已经支持了webp格式的图片 1.下载libwebp https://github.com/webmproject/libwebp 然后你需要先安装好有homebrew或者m ...

  3. 将jpg压缩成webp格式的图片

    cwebp名称 cwebp -压缩图像文件为的WebP文件概要 cwebp [选项] INPUT_FILE -o output_file.webp描述 cwebp压缩使用的WebP格式的图像.输入格式 ...

  4. 在html中如何兼容使用WebP格式的图片【图片升级到WebP】

    把已有的图片转换为WebP格式 要使用WebP格式,需要将你网站用到的图片都制作一份WebP格式的版本,如果你使用CDN服务商,它们一般都会提供转码到WebP格式的选项.如又拍云: 增加这样的配置后, ...

  5. 一般源码安装添加的GD库 是不支持 jpeg 格式的图片的

    一般源码安装添加的GD库 是不支持 jpeg 格式的图片的,只支持如下格式 GD Support enabled GD Version bundled (2.0.34 compatible) GIF ...

  6. 让photoshop cc 支持 webp格式

    下载WebP.8bi文件,看PS cc 是32位还是64位,找到对应的文件. brushes8.com-2017-11-03_08-29-21_654098.7z 把  WebP.8bi 复制到pho ...

  7. Call to undefined function imagecreatefromjpeg() 让GD支持JPEG格式的图片扩展

    安装扩展支持jpeg格式: 第一步:首先下载文件: 版本v8: wget http://www.ijg.org/files/jpegsrc.v8b.tar.gz 版本v9: wget http://w ...

  8. 浏览器支持webp格式

    使用插件http://www.etherdream.com/WebP/WebP.js

  9. 批量将webp格式的图片转成png的图片 https://cn.office-converter.com/WEBP-to-PNG

    https://cn.office-converter.com/WEBP-to-PNG

随机推荐

  1. docker核心技术(2)

    鸟瞰容器生态系统 一谈到容器,大家都会想到 Docker. Docker 现在几乎是容器的代名词.确实,是 Docker 将容器技术发扬光大.同时,大家也需要知道围绕 Docker 还有一个生态系统. ...

  2. TeleportArea可瞬移的目标位置

    TeleportArea.png 1.可以自定义mesh ,想要什么区域就可以设置什么区域的mesh网格.2.Collider 组件必须有,否则无法进行位置移动,它用来检测激光笔是否打到该区域.3.M ...

  3. 记Selenium HTMLTestRunner 无法生成测试报告的总结

      使用Python ,HTMLTestRunner 生成测试报告时,遇到很奇怪的问题,明明运行的结果,没有任何报错,就是不生成测试报告,纠结好久.google+baidu搜索结果也不满意,最后终于解 ...

  4. Gerrit Handbook for Commercial Project

    前注:常见‘坑’ 不要使用 2.14 版本 gerrit.conf 中 [sendemail] 部分必须有 from = ... 字段,否则无法添加邮箱 gerrit 以用户组为单位划分权限,先将用户 ...

  5. MySQL数据库（五）—— 用户管理、pymysql模块

    用户权限管理.pymysql模块 一.用户管理(权限管理) 在MySQL中自带的mysql数据库中有4个表用于用户管理的 # 优先级从高到低 user > db > tables_priv ...

  6. 【转】手机web页面制作时的注意事项

    一.手机页面的标准头规范 字符编码使用utf-8:指定页面手机内存缓存中的存储时间段 device-width:通知浏览器使用设备的宽度作为可视区的宽度 initial-scale - 初始的缩放比例 ...

  7. GP下CalculateField的用法

    以前用过这个类做字段计算,许久不用有些忘却,记录一下使用方式 public static void CalculateField(IFeatureLayer featureLayer,IField f ...

  8. [HDU3333]Turing Tree

    莫队模板题... 不过树状数组也可以做...跟HH的项链几乎一模一样,离线询问,然后记录前缀,更新的时候把前缀删掉就好了,然而这题开long long,卡空间 //hgs AK IOI,IMO,ICH ...

  9. ubuntu 16.04 pecl 不能安裝 mcrypt

    vagrant@ubuntu-xenial:/etc/apt$ sudo pecl install mcrypt-1.0.1 downloading mcrypt-1.0.1.tgz ... Star ...

  10. 【BZOJ 3569】DZY Loves Chinese II

    题面 Description 神校XJ之学霸兮,Dzy皇考曰JC. 摄提贞于孟陬兮,惟庚寅Dzy以降. 纷Dzy既有此内美兮,又重之以修能. 遂降临于OI界,欲以神力而凌♂辱众生. 今Dzy有一魞歄图 ...