I have a webpage with many images, each of which has a title
attribute. When I hover over the image, I want the title
text to display in a separate legend
element I have created (not as a tiny hover tooltip). I have a mouseover
function which works fine - i.e. when I hover over the image the legend changes value. But I want that value to be the title
text of the individual image - which I don't know how to access. I have tried …innerHTML = this.title
which is obviously incorrect.
我有一个包含许多图像的网页,每个图像都有一个title属性。当我将鼠标悬停在图像上时,我希望标题文本显示在我创建的单独的图例元素中(而不是作为微小的悬停工具提示)。我有一个鼠标悬停功能,它工作正常 - 即当我将鼠标悬停在图像上时,图例会改变值。但我希望这个价值成为单个图像的标题文本 - 我不知道如何访问。我试过...... innerHTML = this.title这显然是不正确的。
[The number of images is large and changing (like an album), so I can't add separate code for each <img>
tag. I can use alt
or any other <img>
attribute to make this work. I'm not wedded to the innerHTML
method, either, but am hoping for some simple code to do the trick!]
[图像数量很大且不断变化(如相册),因此我无法为每个标签添加单独的代码。我可以使用alt或任何其他属性来完成这项工作。我也没有结合innerHTML方法,但我希望有一些简单的代码来做这个伎俩!]
Please help? Thanks! (FYI, I'm a novice coder.)
请帮忙?谢谢! (仅供参考,我是新手编码员。)
<!DOCTYPE html>
<html>
<body>
<h1 id="legend">title appears here</h1>
<div>
<img src="image1.jpg" onmouseover="mouseOver()" title="Breakfast">
<img src="image2.jpg" onmouseover="mouseOver()" title="Lunch">
<img src="image3.jpg" onmouseover="mouseOver()" title="Dinner">
</div>
<script>
function mouseOver() {
document.getElementById("legend").innerHTML = this.title;
}
</script>
</body>
</html>
2 个解决方案
#1
1
It looks like you are trying to use this.title
to represent the different images? If you want their titles to appear in the <h1>
tag you need to pass the information to the function shown below.
看起来你正试图用this.title来表示不同的图像?如果您希望其标题出现在
标记中,则需要将信息传递给下面显示的函数。
<h1 id="legend">title appears here</h1>
<div>
<img src="image1.jpg" onmouseover="mouseOver(this)" title="Breakfast">
<img src="image2.jpg" onmouseover="mouseOver(this)" title="Lunch">
<img src="image3.jpg" onmouseover="mouseOver(this)" title="Dinner">
</div>
<script>
function mouseOver(x) {
document.getElementById("legend").innerHTML = x.title;
}
</script>
#2
0
I guess its helpful .
我觉得它很有帮助。
But i use Jquery just need call this code in your
<head>
但是我使用Jquery只需要在你的中调用这段代码
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<h1 id="legend">title appears here</h1>
<div>
<img src="image1.jpg" class="class_of_div" title="Breakfast">
<img src="image2.jpg" class="class_of_div" title="Lunch">
<img src="image3.jpg" class="class_of_div" title="Dinner">
</div>
<script>
$(document).on('mouseover', '.class_of_div', function () {
var thiss=$(this);
$('#legend').text(thiss.attr('title'));
});
</script>
</body>
</html>
#1
1
It looks like you are trying to use this.title
to represent the different images? If you want their titles to appear in the <h1>
tag you need to pass the information to the function shown below.
看起来你正试图用this.title来表示不同的图像?如果您希望其标题出现在
标记中,则需要将信息传递给下面显示的函数。
<h1 id="legend">title appears here</h1>
<div>
<img src="image1.jpg" onmouseover="mouseOver(this)" title="Breakfast">
<img src="image2.jpg" onmouseover="mouseOver(this)" title="Lunch">
<img src="image3.jpg" onmouseover="mouseOver(this)" title="Dinner">
</div>
<script>
function mouseOver(x) {
document.getElementById("legend").innerHTML = x.title;
}
</script>
#2
0
I guess its helpful .
我觉得它很有帮助。
But i use Jquery just need call this code in your
<head>
但是我使用Jquery只需要在你的中调用这段代码
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<h1 id="legend">title appears here</h1>
<div>
<img src="image1.jpg" class="class_of_div" title="Breakfast">
<img src="image2.jpg" class="class_of_div" title="Lunch">
<img src="image3.jpg" class="class_of_div" title="Dinner">
</div>
<script>
$(document).on('mouseover', '.class_of_div', function () {
var thiss=$(this);
$('#legend').text(thiss.attr('title'));
});
</script>
</body>
</html>