Question

82

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

rated 0 times [ 88] [ 6] / answers: 1 / hits: 23180 / 12 Years ago, thu, november 22, 2012, 12:00:00

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

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.

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kourtney

Add To Favorites

Follow

Total Points: 368

Total Questions: 103

Total Answers: 85

Location: Bonaire

Member since Sat, May 1, 2021

3 Years ago

answered 12 Years ago cristinadomoniquel · Accepted Answer

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.