How to change image with onmouseover in different place that reverts back to default image on the site?

后端未结

关注

 4  910

南方客

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

相关标签:

4条回答

再見小時候

2021-01-20 03:09

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

<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>

0 讨论(0)

小蘑菇

2021-01-20 03:13

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>

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.

0 讨论(0)

半阙折子戏

2021-01-20 03:17

you could stash away the default image source in mousein and then restore it in 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>

0 讨论(0)

予麋鹿

2021-01-20 03:28
You need to store the old image src in a temporary variable, or element somewhere, for example, using a global:
```
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 height and width attributes with style height and width - this will lead to confusion.

I've update the Fiddle here
0 讨论(0)
发布评论:

提交评论
- 加载中...