<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        img {
            width:100px;
            height:100px;
        }
    </style>
    <script>
        var list = {
            'zg': ['中国', '北京', '牡丹', '世界第二大经济体'],
            'mg': ['美国', '华盛顿', '玫瑰', '白人与黑人一起劳动，却想到仇视'],
            'rb': ['日本', '东京', '樱花', '世界文明的两样东西：忍者和A片'],
            'hg': ['韩国', '首尔', '无穷', '民族意识超强']
        };
       
        onload = function () {
            var dv = document.createElement('div');
            
            dv.style.display = 'none';
            dv.style.width = '200px';
            dv.style.height = '100px';
            var body = document.getElementsByTagName('body')[0];
            body.appendChild(dv);

            var imgs = document.getElementsByTagName('img');
            for (var i = 0; i < imgs.length; i++) {
                imgs[i].onmouseover = function (e) {
                    for (var key in list) {
                        if (key == this.id) {
                            dv.innerHTML = list[key];
                            dv.style.position = 'absolute';
                            dv.style.left = e.clientX + 'px';//style下面都是小写的
                            dv.style.top = e.clientY + 'px';
                            dv.style.display = 'block';
                        };
                    }

                };

                imgs[i].onmouseout = function () {
                    dv.style.display = 'none';
                }
            }
        }
    </script>
</head>
<body>
    <img src="hg.jpg" id="hg"/>
    <img src="rb.jpg" id="rb"/>
    <img src="mg.jpg" id="mg"/>
    <img src="zg.jpg" id="zg"/>
</body>
</html>

js 看图识国家的更多相关文章

  1. JS前端图形化插件之利器Gojs组件（php中文网）

    JS前端图形化插件之利器Gojs组件(php中文网) 一.总结 一句话总结:php中文网我可以好好走一波 二.JS前端图形化插件之利器Gojs组件 参考: JS前端图形化插件之利器Gojs组件-js教 ...

  2. (CV学习笔记)看图说话(Image Captioning)-1

    Background 分别使用CNN和LSTM对图像和文字进行处理: 将两个神经网络结合: 应用领域 图像搜索 安全 鉴黄 涉猎知识 数字图像处理 图像读取 图像缩放 图像数据纬度变换 自然语言处理 ...

  3. js正则表达式图形化工具-rline

    github地址:https://github.com/finance-sh/rline 在线demo: http://lihuazhai.com/demo/test.html 这是一个js正则表达式 ...

  4. CAD迷你看图

    CAD迷你看图http://www.aec188.com/CAD迷你看图 2016R12超快.超小的CAD多功能看图工具,完全脱离AutoCAD浏览R14-R2016各版本DWG/DXF/DWF的二三 ...

  5. [推荐]看图/图片管理软件XnViewMP

    软件授权:免费 (希望你可以支持开发者) 软件官网:http://www.xnview.com/en/xnviewmp/ 软件简介: XnView MP 是一款非常著名的免费看图软件XnView 的新 ...

  6. linux中的一个看图的软件

    毕竟才是初入linux,很多工具,先要要求有个用着,之后再要求小巧强大好用. 看图软件,不喜欢kde或者是gnome这种庞大的桌面环境,也就不喜欢一些跟特定桌面环境沾边的软件(总觉得用软件必须要用特定 ...

  7. Multimodal —— 看图说话（Image Caption）任务的论文笔记（一）评价指标和NIC模型

    看图说话(Image Caption)任务是结合CV和NLP两个领域的一种比较综合的任务,Image Caption模型的输入是一幅图像,输出是对该幅图像进行描述的一段文字.这项任务要求模型可以识别图 ...

  8. 学习笔记TF060:图像语音结合，看图说话

    斯坦福大学人工智能实验室李飞飞教授,实现人工智能3要素:语法(syntax).语义(semantics).推理(inference).语言.视觉.通过语法(语言语法解析.视觉三维结构解析)和语义(语言 ...

  9. [看图说话]在VMware Workstation 9中安装Mac OS X 10.8 Mountain Lion

    本文环境: CPU:Intel Core i7 920: OS:Windows 7: 内存:8G: 玩Hackintosh各有各的理由,不管什么理由,利用虚拟机安装Mac OS X都是一个可行的办法. ...

随机推荐

  1. Tomcat生产中优化JVM的配置实例

    root 1208 1 0 11月25 ? 00:15:32 /home/root/jvm/jdk1.7.0_79/bin/java -Djava.util.logging.config.file=/ ...

  2. 用户之间imp的问题

    今天同事说申请了一个从生产导出的dump文件,须要导入測试库进行測试. 之前做的基本都是本库导出,本库导入的操作,比如:imp test/***@test tables=tbl_fuel file=H ...

  3. php中foreach源码分析（编译原理）

    php中foreach源码分析(编译原理) 一.总结 编译原理(lex and yacc)的知识 二.php中foreach源码分析 foreach是PHP中很常用的一个用作数组循环的控制语句.因为它 ...

  4. php Apache配置伪静态的介绍

    以下是摘抄http://jingyan.baidu.com/article/86112f132aa7462737978718.html的,作为记录,方便以后参考 现有的在线网上视频教程对伪静态的讲解比 ...

  5. UE4的JSON读写方式<二>

    声明:所有权利保留. 转载必须说明出处:http://blog.csdn.net/cartzhang/article/details/43794409 Json的Writer博客地址: http:// ...

  6. 二分图之最小边覆盖（poj3020）

    题目:poj3020 题意:给出一个图,让你用最少的1*2的纸片覆盖掉图中的全部*出现过的地方. 基本裸的最小边覆盖. 分析: 最小边覆盖 = 点总数 - 最大匹配 所以就是转化为求最大匹配. 跟前面 ...

  7. HDU 1224 Free DIY Tour - 最短路

    传送门 题目大意: 一个有向图(n + 1相当于1),每个点有一个权值(可以认为1和n+1权值为0),求从1走到n+1(相当于走回1)的最大路径权值和是多少,输出方案. 题目分析: 最短路问题,输出方 ...

  8. SQL表的最基本操作练习

    use test go --select * from stu2 drop table stu2--删除表 go create table stu2 --新建一个名为stu2表 ( id int pr ...

  9. 配置ANDROID_HOME

    原文:配置ANDROID_HOME 1.在环境变量中设置一个名为ANDROID_HOME,变量值为SDK路径 2.添加至Path中 备注:ANDROID_HOME的变量值仅允许一个

  10. Git命令小总结

    常用 git init git 初始化 git clone https://github.com/wsxx111/thisStudy.git 从远端拉下来 git status 查看跟踪状态 git ...