mouseover

I have this code:
<img src="images/home_button.gif" onmouseover="this.src='images/home_button2.gif'" onmouseout="this.src='images/home_button.gif'" />

How to I make sure the image stays at home_button2.gif after user click on it?
LVL 2
rolandmyAsked:
Who is Participating?
 
StingRaYCommented:
// javascript part
function m_over(o) {
    o.src='images/home_button2.gif';
}

function m_out(o) {
    if (o.clicked) {
        o.src='images/home_button2.gif';
    } else {
        o.src='images/home_button.gif';
    }
}

function m_click(o) {
    o.clicked = true;
}

// html
<img src="images/home_button.gif" onmouseover="m_over(this)" onmouseout="m_out(this)" onclick="m_click(this)"/>

Open in new window

0
 
StingRaYCommented:
You have to do a bit more work. Like:

// javascript part
var m_clicked = false;
function m_over(o) {
    this.src='images/home_button2.gif';
}

function m_out(o) {
    if (m_clicked) {
        this.src='images/home_button2.gif';
    } else {
        this.src='images/home_button.gif';
    }
}

function m_click(o) {
    m_clicked = true;
}

// html
<img src="images/home_button.gif" onmouseover="m_over(this)" onmouseout="m_out(this)" onclick="m_click(this)"/>

Open in new window

0
 
rolandmyAuthor Commented:
mouseover not working in the code provided. Also, I have more than 1 buttons in the menu..
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Atique AnsariCommented:
Just replace the http://localhost.... with your path.
<img src="images/Bluehills.jpg" onmouseover="if(this.src!='http://localhost/ee/images/Waterlilies.jpg'){ this.src='images/Sunset.jpg' }" onmouseout=" if(this.src!='http://localhost/ee/images/Waterlilies.jpg'){ this.src='images/Bluehills.jpg'}" onclick="this.src='images/Waterlilies.jpg'" />

Open in new window

0
 
Atique AnsariCommented:
Another solution is to store image clicked status in a variable.

Try attached code and let me know if you need more help.
<script language="javascript" type="text/javascript">
	var image_clicked	=	false;
</script>

<img src="images/Bluehills.jpg" onmouseover="if(!image_clicked){ this.src='images/Sunset.jpg' }" onmouseout=" if(!image_clicked){ this.src='images/Bluehills.jpg'}" onclick="image_clicked = true; this.src='images/Waterlilies.jpg';" />

Open in new window

0
 
rolandmyAuthor Commented:
Thanks all who replied. I just use if statement in php to switch the buttons. Will award points to both.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.