Javascript onclick with onmouseover and onmouseout

Question

I have an image with a few javascript calls on it, most of which work OK.

Basically, what I want it to do, is when clicked swap image and then depending on which image it is currently on, to swap on mouseover too.

Here's my HTML:

<a href="#show" class="show_hide">
<img src="<?php echo WEB_URL; ?>/images/show-more-arrow.jpg" width="61" height="45" id="clicktoggleimage" onclick="changeImage()" onMouseOver="checkMouseOver()" onMouseOut="checkMouseOut()" /></a>

And my Javascript:

function changeImage() {
    if (document.getElementById("clicktoggleimage").src == "http://www.pete.com/images/show-less-arrow.jpg") {
        document.getElementById("clicktoggleimage").src = "http://www.pete.com/images/show-more-arrow.jpg";
    } else {
        document.getElementById("clicktoggleimage").src = "http://www.pete.com/images/show-less-arrow.jpg";
    }
}

function checkMouseOver() {
    if (document.getElementById("clicktoggleimage").src == "http://www.pete.com/images/show-less-arrow.jpg") {
        document.getElementById("clicktoggleimage").src = "http://www.pete.com/images/show-less-arrow-over.jpg";
    } else if (document.getElementById("clicktoggleimage").src == "http://www.pete.com/images/show-more-arrow.jpg") {
        document.getElementById("clicktoggleimage").src = "http://www.pete.com/images/show-more-arrow-over.jpg";    
    }
}

function checkMouseOut() {
    if (document.getElementById("clicktoggleimage").src == "http://www.pete.com/images/show-less-arrow-over.jpg") {
        document.getElementById("clicktoggleimage").src = "http://www.pete.com/images/show-less-arrow.jpg";
    } else if (document.getElementById("clicktoggleimage").src == "http://www.pete.com/images/show-more-arrow-over.jpg") {
        document.getElementById("clicktoggleimage").src = "http://www.pete.com/images/show-more-arrow.jpg"; 
    }
}

This works fine, except when the button is clicked for the second time, the image doesn't revert back to the show-less-arrow.jpg

Many thanks for your help

jsfiddle.net/3gQEG replace the url's with working images and i'll have another look :p I don't get wht you're trying to accomplish to be honest. — Yoeri
– Yoeri, Commented Jan 9, 2013 at 11:52
Basically, the image needs to have a swap on hover and when clicked change to a different image. The reason is, because it slides down a separate div when it is clicked. Hence the show more or less buttons. — Pete Naylor
– Pete Naylor, Commented Jan 9, 2013 at 12:37

Cerbrus · Accepted Answer · 2013-01-09 11:47:48Z

1

You can make this JS a lot more efficient.

Since it appears you're only replacing 'more' with 'less' and vice versa, in your changeImage function, that is exactly what your function should do. The mouse over/off is only toggling the '-over' section of your string.

So, remove the event listeners from your HTML:

<a href="#show" class="show_hide">
    <img src="<?php echo WEB_URL; ?>/images/show-more-arrow.jpg" width="61" height="45" id="clicktoggleimage" />
</a>

And use this Javascript:

var img = document.getElementById("clicktoggleimage");

function changeImage() {
    if (img.src.indexOf('less') == -1) {
        img.src = img.src.replace('more', 'less');
    } else {
        img.src = img.src.replace('less', 'more');
    }
}

function hoverImage() {
    if (img.src.indexOf('arrow-over') == -1) {
        img.src = img.src.replace('arrow', 'arrow-over');
    } else {
        img.src = img.src.replace('arrow-over', 'arrow');
    }
}

img.onclick = cangeImage;
img.onmouseover = img.onmouseout = hoverImage;

answered Jan 9, 2013 at 11:47

Cerbrus

73.3k19 gold badges138 silver badges151 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pete Naylor Over a year ago

Thanks for your help, but nothing works when I try this? There's no activity on the image for mouse over or click?

Cerbrus Over a year ago

Can you console.log(img.src) at the start and end of the functions, and see what the result is?

Collectives™ on Stack Overflow

Javascript onclick with onmouseover and onmouseout

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related