<!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. SpringMVC接受参数若干问题

    最近2年在工作问题总结中,好几次遇到了SpringMVC接收参数的问题,今天特别总结下.  SpringMVC接收参数的方法:  Html参数输入: <input name="stat ...

  2. oracle员工表和部门表基本操作

    emp 员工表(empno 员工号/ename 员工姓名/job 工作/mgr 上级编号/hiredate 受雇日期/sal 薪金/comm 佣金/deptno 部门编号) dept 部门表(dept ...

  3. #import &lt;/usr/include/objc/objc-class.h&gt; not such file or directory问题的解决方法

    近期在使用一些开源的demo,打开后出现这个错误,然后能够把 #import </usr/include/objc/objc-class.h> 改动为以下 #import <objc ...

  4. linux 系统升级中的一些配置

    1. 关闭IPV6 vi /etc/sysconfig/network NETWORKING_IPV6=no    #掉 source /etc/sysconfig/network vi /etc/m ...

  5. HDU 5072 Coprime (单色三角形+容斥原理)

    题目链接:Coprime pid=5072"> 题面: Coprime Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: ...

  6. 【codeforces 754B】 Ilya and tic-tac-toe game

    time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...

  7. Mac下新安装的MySQL无法登陆root用户（安装时没有设置密码）

    1.也不知是何原因,新安装好的MySQL,如果尝试用mysql -u root -p登陆就会出现这样的错误,但是root用户根本就没有设置密码. $ cd /usr/local$ cd mysql $ ...

  8. NSUserDefaults：通常用来保存一些小巧的数据，如用户的用户名密码，或者是用户的使用习惯，如是否自动打开背景音乐等。

    1,NSUserDefaults通常用来保存一些小巧的数据,如用户的用户名密码,或者是用户的使用习惯,如是否自动打开背景音乐等. 2,使用它的原因就是:代码简短,使用方便 3,使用方法如下: -(vo ...

  9. activity-alias详解及应用

    activity-alias标签元素众所周知,AndroidManifest是一个xml文件,它包含很多标签元素,如application.activity.receiver等,其中有一个叫做acti ...

  10. CentOS 挂载iso文件配置yum源

    1.挂载iso 准备好centos的光盘镜像 挂载前的准备; mkdir -p /dev/centos mkdir -p  /mnt/local_yum 挂载 mount -o loop /opt/s ...