<!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. ArcEngine数据编辑--选择要素

    转自原文ArcEngine数据编辑--选择要素 好久没有写博文了,这段时间相对空闲一点,把AE数据编辑实现总结下. 要编辑要素,首先要选中要素,按shift键进行多选,按esc键清空选择. 个人了解的 ...

  2. [NPM] Run a set of similar npm scripts with a wildcard

    In this lesson we will run a set of scripts that are grouped together with a wildcard using the npm- ...

  3. [React] Normalize Events with Reacts Synthetic Event System

    Event handlers are passed an instance of SyntheticEvent in React. In this video we'll take a look at ...

  4. ITFriend创业败局(四)：菜鸟CEO的自我修养

    自创业自封CEO以来,短短3个月,又经历了无数的磨练,快速成长中. 创业不同于打工,他要求你必须有全局观和综合能力,技术.市场.商务,啥都得会,还要处理各种各样的问题和矛盾. 根据个人经历,我总结了以 ...

  5. poj 2594 Treasure Exploration 二分图匹配

    点击打开链接题目链接 Treasure Exploration Time Limit: 6000MS   Memory Limit: 65536K Total Submissions: 7215   ...

  6. android应用开发 button显示两行文本

    自己写了个电话拨号器的程序给男朋友玩,用来专门打我的手机号,为了把界面做的好看一点,须要用到显示两行文本的button.在网上搜罗了两种方法,记录在以下.跟大家一起分享一下,希望能帮到须要的人. 方法 ...

  7. 毕设二:python 爬取京东的商品评论

    # -*- coding: utf-8 -*- # @author: Tele # @Time : 2019/04/14 下午 3:48 # 多线程版 import time import reque ...

  8. 【noip模拟】连环

    [题目描述] 惠子说:“连环可解也”. 这说明他是一个破解机关的高手,连连环都能解开,鲁班锁什么的自然不在话下.一位鲁班的后人非常不服气,于是找到惠子,给他出了一道题. 他首先给了惠子一个长度为 n的 ...

  9. 【81.37%】【codeforces 734B】Anton and Digits

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...

  10. htmlunit 模拟登录 数字验证码

    使用htmlunit的好处有两点,相比httpclient,htmlunit是对浏览器的模拟,比如你定位一个按钮,就可以执行click()方法,此外不需要象在httpclient中一样编写复杂的代码, ...