js 看图识国家
<!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>
<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>
