Javascript 如何在不同的地方使用 onmouseover 更改图像以恢复为网站上的默认图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13512449/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change image with onmouseover in different place that reverts back to default image on the site?
提问by Seb
I'm no expert in this so excuse me if this is very basic but I couldn't find answers.
我不是这方面的专家，所以如果这是非常基本的，请原谅我，但我找不到答案。
So I want to have navigation section with categories on the left side of the page. Each category is different site, and each site has it's own unique image on it. ex. category1.htm has defaultpic1.jpg, category 2.htm has defaultpic2.jpg, ....
所以我想在页面左侧有带有类别的导航部分。每个类别都是不同的站点，每个站点都有自己独特的图像。前任。category1.htm 有 defaultpic1.jpg，category 2.htm 有 defaultpic2.jpg，....
When I hover on link to category2 in the nav sections I want them to change default image on current site to default image on category2, and then onmouseout I want it to go back to the default one.
当我将鼠标悬停在导航部分中的 category2 链接上时，我希望他们将当前站点上的默认图像更改为 category2 上的默认图像，然后 onmouseout 我希望它返回到默认图像。
Also note my images have different dimensions, different height values.
还要注意我的图像有不同的尺寸，不同的高度值。
Basically I know I can change the defaultpic source on every page but I want to use the same script which will always know were to look for the default path and just use it, without the need to change the line in every single category.
基本上我知道我可以在每个页面上更改 defaultpic 源，但我想使用相同的脚本，该脚本将始终知道查找默认路径并使用它，而无需更改每个类别中的行。
Sorry if I'm not very clear on that but I try my best.
对不起，如果我不是很清楚，但我会尽力而为。
I have this (removed everything else so I just paste what I need help with):
我有这个（删除了其他所有内容，所以我只粘贴我需要帮助的内容）：
<html>
<head>
<script type="text/javascript">
function mouseOverImage2()
{
document.getElementById("catPic").src='images/defaultpic2.jpg'; document.images['catPic'].style.width='280px'; document.images['catPic'].style.height='420px';;
} function mouseOverImage3()
{
document.getElementById("catPic").src='images/defaultpic3.jpg'; document.images['catPic'].style.width='280px'; document.images['catPic'].style.height='266px';;
}
function mouseOutImage()
{
document.getElementById("catPic").src='???'; //here's what I don't know what to put
}
</script>
</head>
<body>
<div class="nav">
<ul>
<li><a href="subcategory2.htm" onmouseover="mouseOverImage2()"
onmouseout="mouseOutImage()">Subcategory One</a></li>
<li><a href="subcategory3.htm" onmouseover="mouseOverImage3()"
onmouseout="mouseOutImage()">Subcategory 2</a></li></ul>
</div>
<div>
<img id="catPic" src="images/defaultpic1.jpg" width="280" height="420" alt="">
</div>
</body>
</html>
采纳答案by Paul S.
I would hide all the values in data-*attributes, so I could re-use the same functions. For example,
我会隐藏data-*属性中的所有值，这样我就可以重用相同的函数。例如，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Cats</title>
<script type="text/javascript">
function mouseOverImage(elm) {
var img = document.getElementById("catPic");
img.src = elm.getAttribute('data-cat-image');
img.style.width = elm.getAttribute('data-cat-width');
img.style.height = elm.getAttribute('data-cat-height');
}
function mouseOutImage() {
var img = document.getElementById("catPic");
img.src = img.getAttribute('data-default-image');
img.style.width = img.getAttribute('data-default-width');
img.style.height = img.getAttribute('data-default-height');
}
</script>
</head>
<body>
<div class="nav">
<ul>
<li><a href="subcategory2.htm"
data-cat-image="images/defaultpic2.jpg" data-cat-width="280px" data-cat-height="420px"
onmouseover="mouseOverImage(this)" onmouseout="mouseOutImage()"
>Subcategory One</a></li>
<li><a href="subcategory3.htm"
data-cat-image="images/defaultpic3.jpg" data-cat-width="280px" data-cat-height="226px"
onmouseover="mouseOverImage(this)" onmouseout="mouseOutImage()"
>Subcategory 2</a></li>
</ul>
</div>
<div>
<img id="catPic" src="images/defaultpic1.jpg" alt=""
data-default-image="images/defaultpic1.jpg" data-default-width="280px" data-default-height="420px"
width="280" height="420"
/>
</div>
</body>
</html>
You should also consider attaching the listeners in JavaScript rather than using on*attributes, as it means you can completely seperate your JavaScript from your HTML.
您还应该考虑在 JavaScript 中附加侦听器，而不是使用on*属性，因为这意味着您可以将 JavaScript 与 HTML 完全分开。
回答by StuartLC
You need to store the old image src in a temporary variable, or element somewhere, for example, using a global:
您需要将旧图像 src 存储在某个临时变量或元素中，例如，使用全局：
var originalImage;
function mouseOverImage2()
{
originalImage = document.getElementById("catPic").src;
...
And then restore it on the mouse out:
然后在鼠标上恢复它：
document.getElementById("catPic").src=originalImage;
Edit
编辑
You can cache other properties (height, width) in much the same way.
One thing to note is not to mix old-school html heightand widthattributes with style height and width - this will lead to confusion.
您可以以几乎相同的方式缓存其他属性（高度、宽度）。需要注意的一件事是不要将老式的 htmlheight和width属性与样式高度和宽度混合在一起- 这会导致混淆。
I've update the Fiddle here
我在这里更新了小提琴
回答by Taff
An addition to the above it may be easier in the long term to just use one function and pass the element no as a parameter. Along these lines
除了上述之外，从长远来看，只使用一个函数并将元素 no 作为参数传递可能会更容易。沿着这些路线
<html>
<head>
<script type="text/javascript">
function mouseOverImage(elementNo){
document.getElementById("catPic").src='images/defaultpic'+elementNo+'.jpg';document.images['catPic'].style.width='280px'; document.images['catPic'].style.height='420px';;
}
function mouseOutImage(elementNo){
document.getElementById("catPic").src='images/defaultpic'+elementNo+'.jpg'; //here's what I don't know what to put
}
</script>
</head>
<body>
<div class="nav">
<ul>
<li><a href="subcategory2.htm" onmouseover="mouseOverImage(2)"
onmouseout="mouseOutImage(1)">Subcategory One</a></li>
<li><a href="subcategory3.htm" onmouseover="mouseOverImage(3)"
onmouseout="mouseOutImage(1)">Subcategory 2</a></li></ul>
</div>
<div>
<img id="catPic" src="images/defaultpic1.jpg" width="280" height="420" alt="">
</div>
</body>
</html>
回答by Christian Westman
you could stash away the default image source in mousein and then restore it in mouseout
您可以在 mousein 中隐藏默认图像源，然后在 mouseout 中恢复它
<script type="text/javascript">
function mouseOverImage2()
{
if(typeof(document.getElementById("catPic").defaultSrc) == "undefined")
document.getElementById("catPic").defaultSrc = document.getElementById("catPic").src;
document.getElementById("catPic").src='images/defaultpic2.jpg'; document.images['catPic'].style.width='280px'; document.images['catPic'].style.height='420px';;
}
function mouseOverImage3()
{
if(typeof(document.getElementById("catPic").defaultSrc) == "undefined")
document.getElementById("catPic").defaultSrc = document.getElementById("catPic").src;
document.getElementById("catPic").src='images/defaultpic3.jpg'; document.images['catPic'].style.width='280px'; document.images['catPic'].style.height='266px';;
}
function mouseOutImage(e)
{
if(typeof(document.getElementById("catPic").defaultSrc) != "undefined")
document.getElementById("catPic").src= document.getElementById("catPic").defaultSrc;
}
</script>
