onmouseleave - 将背景图像恢复为默认值 [英] onmouseleave --returning background image to default
问题描述
我想使用onmouseleave方法返回一个div的背景图像恢复到默认值。这里是HTML和JS:
I'm trying to return a div's background image back to its default using a onmouseleave method. Here is the HTML and JS:
<script type="text/javascript">
function displayImage(event) {
event = event || window.event;
var targetElement = event.target || event.srcElement;
if (targetElement.tagName == "IMG") {
console.log(document.getElementById("viewer"));
document.getElementById("viewer").style.backgroundImage = 'url(' + targetElement.getAttribute("src") + ')';}
}
function leaveImage(event){
event = event || window.event;
var targetElement = event.target || event.srcElement;
if (targetElement.tagName != "IMG") {
document.getElementById("viewer").style.backgroundImage: URL();
}
}
其中displayImage和leaveImage使用同一个HTML div标签中的方法调用:
where displayImage and leaveImage are called with the methods in the same HTML div tag:
<div class="thumbnails" onmouseover="displayImage(event)">
本质上,我想将viewerid'd div元素的背景图像返回到默认on mouseleave(创建两个单独的函数)。我要以正确的方式去吗?
In essence, I want to return the "viewer" id'd div element's background image to its default on mouseleave (creating two separate functions). Am I going about it the right way?
谢谢大家!
推荐答案
好吧,它显示[对象HTML集合],因为你正在调用getElementsByTagName,注意它说元素 ,所以你得到的每一个p标签在你的网站上,你想要的是只是一个单一的。解决方案可能是给p标签一个ID,然后使用getElementById,那么你只会得到单个元素。
Alright, firstly; it's showing [Object HTML Collection] because you are calling getElementsByTagName, Notice it says Elements, so you are getting every single p tag on your website, what you want instead is to get just a single one. The solution could be giving the p tag an ID and then use getElementById, then you would only get the single element.
其次,你需要保存原始的p标签文本这里是一个将其保存在变量中的示例:
Second, you need to save the original p tag text somewhere, here is an example saving it in a variable:
HTML:
<p id="tip">Hover over the image to display larger</p>
Javascript:
Javascript:
var originalText; // Notice this is outside the functions
function displayImage(event) {
event = event || window.event;
var targetElement = event.target || event.srcElement;
originalText = document.getElementById("tip").innerHTML;
var altText=targetElement.getAttribute("alt");
document.getElementById("viewer").innerHTML = altText;
if (targetElement.tagName == "IMG") {
console.log(document.getElementById("viewer"));
document.getElementById("viewer").style.backgroundImage = 'url(' + targetElement.getAttribute("src") + ')';
}
}
function leaveImage(event){
event = event || window.event;
var targetElement = event.target || event.srcElement;
document.getElementById("viewer").innerHTML = originalText;
if (targetElement.tagName != "IMG") {
document.getElementById("viewer").style.backgroundImage= URL();
}
}
这篇关于onmouseleave - 将背景图像恢复为默认值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!