<!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. delphi基础篇之数据类型之二：2.字符串类型

    2.字符串类型 2.1.ShortStringShortString 又称为短字符串(相对的,Ansistring.widestring.unicodestring 称为长字符串),其实质上是一个编译 ...

  2. 数据科学工作者(Data Scientist) 的日常工作内容包括什么

    数据科学工作者(Data Scientist) 的日常工作内容包括什么 众所周知,数据科学是这几年才火起来的概念,而应运而生的数据科学家(data scientist)明显缺乏清晰的录取标准和工作内容 ...

  3. linux 创建多级目录 mkdir -p

    原文地址:http://www.dutor.net/index.php/2010/06/cmd-mkdir-p/ mkdir的-p选项允许你一次性创建多层次的目录,而不是一次只创建单独的目录.例如,我 ...

  4. Mysql 导入日文数据乱码问题

    做数据迁移后,通过ui发现有日文数据是乱码,通过ui直接修改日文则显示正常. 查了下资料,mysql字符集的作用如下: MySQL字符集设置 • 系统变量:– character_set_server ...

  5. log4j.properties的详细配置

    log4j.properties的详细配置 log4j.properties的maven配置 <dependency> <groupId>org.scala-lang</ ...

  6. 记录百度编辑器bug（在编辑框输入光标到达页面最底部时，功能区块会悬浮在页面最顶部并且与编辑框分离）

    解决方案: //加入这段CSS#edui1_toolbarbox { position: relative !important; }

  7. USACO2012 overplanting /// 矩阵切割 递归 oj21547

    题目大意: 在农场的任何一个“轴向对齐”的长方形区域(即垂直和水平方向)种植草坪. 现种植了N(1≤ N ≤10)个不同的矩形区域,其中一些甚至可能重叠. Input Multiple test ca ...

  8. velocity 相关

    Apache Velocity 是一个基于java的模板引擎(template engine) 应用场景1.Web 应用:开发者在不使用 JSP 的情况下,可以用 Velocity 让 HTML 具有 ...

  9. ros机器人导航设置原点，目标点

    之前利用movebase导航定位都是通过rviz用鼠标指来指去,实验时非常方便,但实际应用总不能也人工指来指去吧,这怎么体现智能呢 启动导航后,用以前使用的rviz设设置目标点来获取map坐标系下的位 ...

  10. Linux 进程间通信 无名管道（pipe）

    无名管道: 1)只能用于具有亲缘关系的进程之间的通信(无名管道是某一个进程创建的,不像普通文件有路径,在文件系统中是不可见的,其他进程要想打开,只能通过继承的方式去打开) 2)半双工的通信模式,具有固 ...