<!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. 为什么 qt 成为 c++ 界面编程的第一选择？

    为什么qt成为c++界面编程的第一选择 一.前言 为什么现在QT越来越成为界面编程的第一选择,笔者从事qt界面编程已经有接近8年,在这之前我做C++界面都是基于MFC,也做过5年左右.当时为什么会从M ...

  2. Django表单上传

    任务描述:实现表单提交(上传文件) 1.项目目录: 2.源代码: regist.html <!DOCTYPE html> <html lang="en"> ...

  3. 【机器学习实战】第9章 树回归（Tree Regression）

    第9章 树回归 <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/ ...

  4. js进阶 9-14 js如何实现下拉列表多选移除

    js进阶 9-14 js如何实现下拉列表多选移除 一.总结 一句话总结: 1.js如何实现下拉列表多选移除? 把这个下拉列表中的option移除,然后加到另外一个下拉列表(文字)中去.remove方法 ...

  5. 【u222】选课

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 黄黄游历完学校,就开始要选课上了. 黄黄同学所在的学校有一个奇怪的上课系统,有N种课可以选择,每种课可 ...

  6. HDOJ 1261 字串数

    JAVA大数.... 字串数 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) T ...

  7. NOIP模拟 run - 双向链表

    题目大意: 企鹅国正在举办全面运动会,第一项比赛就是跑步.N 个人在圆形跑道上跑步,他们都有各自的速度和起点.但这个跑步规则很奇怪,当两个人相遇的时候编号较小的就会出局,当场上剩下最后一个人的时候跑步 ...

  8. 【codeforces 782D】 Innokenty and a Football League

    [题目链接]:http://codeforces.com/contest/782 [题意] 每个队名有两种选择, 然后第一个选择队名相同的那些队只能选第二种; 让你安排队名 [题解] 首先全都选成第一 ...

  9. METHODS OF AND APPARATUS FOR USING TEXTURES IN GRAPHICS PROCESSING SYSTEMS

    BACKGROUND The technology described herein relates to methods of and apparatus for using and handlin ...

  10. C#中的yield关键字

    迭代器,是一个连续的集合,出现多个yield return其实就是将这多个的yield return元素按照出现的顺序存储在迭代器的集合中而已.形如下面的形式: public class CityCo ...