<!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. Django之富文本编辑器kindeditor 及上传

    1.什么是富文本编辑器 百度百科(https://baike.baidu.com/item/%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8 ...

  2. 《高性能MySQL》--复制笔记

    复制解决的问题 1,数据分布 MySQL复制通常不会对带宽造成很大的压力,但在5.1版本引入的基于行的复制会比传统的基于语句的复制模式的带宽压力更大.你可以随意地停止或开始复制,并在不同的地理位置来分 ...

  3. [TypeScript] Use the never type to avoid code with dead ends using TypeScript

    Example 1: A never stop while loop return a never type. function run(): never { while(true){ let foo ...

  4. 29个月过去了,CSDN排名前200了：排名不断靠前的过程中，自己的技术水平和竞争力一定会不断向上

    刚刚在csdn博客又发表了一篇,工作问题总结,突然发现,我的博客排名终于进入前200了. 这又是一个伟大的里程碑啊. 在过去29个月的时间里,排名从"千里之外" 到"19 ...

  5. 移动端iPhone系列适配问题的一些坑

    完成移动端的开发项目之后,发现谷歌自带的调试器似乎没有什么太大的作用,整天借同事的苹果手机测bug,尽管同事不厌其烦,但还是觉得这iPhone系列适配问题适配到想逃逃逃,好在项目已经顺利完成,测试通过 ...

  6. BZOJ 1260 - 区间dp

    Magic Door 题目大意: 给一个字符串,问需要至少覆盖多少次. 题目分析 区间dp: dp[i][j]表示达到i~j这个状态的最少覆盖次数,分两种情况: s[i] == s[j]: 此时内层可 ...

  7. scala 通过apply创建类的对象

    package cn.scala_base.oop.scalaobject; class Boy(name: String) { private var age: Int = 0; println(n ...

  8. 【19.00%】【vijos p1906】联合权值

    描述 无向连通图 G 有 n 个点,n-1 条边.点从 1 到 n 依次编号,编号为 i 的点的权值为 WiWi, 每条边的长度均为 1.图上两点(u, v)的距离定义为 u 点到 v 点的最短距离. ...

  9. JAVA SE回顾及思考（1）——面向对象的特点

    学习Java已经三年了,现在开始做Android开发,虽说还在用Java语言但本人现在才真真的意识到无论学什么基础才是最重要的,可能一些刚接触Java或者Android的朋友现在还体会不到基础的重要性 ...

  10. Android之assets资源目录的各种操作

    第一种方法:       String path = file:///android_asset/文件名; 第二种方法:         InputStream abpath = getClass() ...