我在网站上有三个图像,我想使用onmouseover为每个图像显示特定信息。
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>AJAX</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="lib/css/stil.css" />
<script type="text/javascript" src="lib/js/ajaxeinsendeaufgabe2.js"></script>
</head>
<body>
<h1>Zusatzinformationen</h1>
<table>
<tr>
<td><img class="img" src="img/b1.jpg" /></td>
<td id="info0"></td>
</tr>
<tr>
<td><img class="img" src="img/b2.jpg" /></td>
<td id="info1"></td>
</tr>
<tr>
<td><img class="img" src="img/b3.jpg"/></td>
<td id="info2"></td>
</tr>
</table>
</body>
</html>
我现在需要帮助外部Javascript。我如何使用ID编码元素以便使用onmouseover显示,例如,第一个图像的info0文本,第二个图片的info1文本和第三个图片的info2文本?
也许这样
var resOb = new XMLHttpsRequest ();
window.onload = function() {
document.getElementsByTagName ("img");
function sndReq(0){
document.getElementById ("info0");
}
}
switch(i) {
case 0:
resOb.open('get', 'info0.txt', true);
break;
case 1:
…
}
resOb.onreadystatechange = function() {
handleResponse(i);
}
document.getElementbyID("info0").innerHTML
...
抱歉,我的javascript技能较少
答案 0 :(得分:0)
尝试这个简单的事情jquery
<div class="someDiv">
<p>Click me here for mouseover image</p>
</div>
<img style="display:none" class="image" src="http://imgur.com/a/63gbF"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(".someDiv").hover(function() {
$(document).mousemove(function(event) {
$(".image").css({"position":"absolute","left":event.clientX ,"top":event.clientY }).show();
});
});
//end movement with click on the div.
$(document).bind("click",function(){
$(document).unbind("mousemove");
$(".image").hide();
});
</script>
在javascript中
<style>
#parent #popup {
display: none;
}
#parent:hover #popup {
display: block;
}
</style>
<div id="parent">
This is the main container.
<div id="popup" style="display: none"><img src="http://imgur.com/a/63gbF"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var e = document.getElementById('parent');
e.onmouseover = function() {
document.getElementById('popup').style.display = 'block';
}
e.onmouseout = function() {
document.getElementById('popup').style.display = 'none';
}
</script>