如何使用onmouseover在不同的地方更改图像，恢复到网站上的默认图像？ [英] How to change image with onmouseover in different place that reverts back to default image on the site?
问题描述
我不是这方面的专家，所以请原谅我，如果这是非常基本但我找不到答案。
I'm no expert in this so excuse me if this is very basic but I couldn't find answers.
所以我想要导航部分与类别在页面的左侧。
每个类别都是不同的网站，每个网站都有自己独特的图片。
ex。 category1.htm有defaultpic1.jpg，类别2.htm有defaultpic2.jpg，....
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, ....
当我将鼠标悬停在nav部分的category2链接上时我想要它们将当前站点上的默认图像更改为category2上的默认图像，然后onmouseout我希望它返回默认图像。
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.
另请注意我的图像具有不同的尺寸，不同的高度值。
Also note my images have different dimensions, different height values.
基本上我知道我可以在每个页面上更改defaultpic源但我想使用相同的脚本，它总是知道要查找默认路径并且只需使用它，而无需更改每个类别中的行。
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.
对不起，如果我不是很清楚，但我会尽我所能。
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>
推荐答案
我会隐藏数据中的所有值 - * 属性，所以我可以重复使用相同的功能。
例如，
I would hide all the values in data-* attributes, so I could re-use the same functions. For example,
<!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>
您还应考虑在JavaScript中附加侦听器，而不是使用 on * 属性，因为这意味着您可以从HTML中完全分离JavaScript。
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.
这篇关于如何使用onmouseover在不同的地方更改图像，恢复到网站上的默认图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
