By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,739 Members | 1,081 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,739 IT Pros & Developers. It's quick & easy.

Image: MouseOver - MouseOut - OnClick problem

P: n/a
Imagine this:

I have a gif-image with text, coloured green.
When MouseOver occurs the gif will swap to another gif with red colourded
text. On MouseOut the gif turns back to the green text.

-----------------This is my code:

<a href="nextpage.html" onMouseOver="document.green.src='red.gif'"
onMouseOut="document.green.src='green.gif'">
<img src="green.gif"></a>

-----------------

After clicking this link, I want the image to stay red. How can I manage
this??
Problem is that on MouseOut the image turns green again... :-(

I tried CSS using an transparent gif with backgroundimages, but it still
doesn't work.

Can someone help me out?

John

Jul 20 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
Maybe you could look into adapting this ?

http://www.projectseven.com/tutorial...menus/list_01/
John wrote:
Imagine this:

I have a gif-image with text, coloured green.
When MouseOver occurs the gif will swap to another gif with red colourded
text. On MouseOut the gif turns back to the green text.

-----------------This is my code:

<a href="nextpage.html" onMouseOver="document.green.src='red.gif'"
onMouseOut="document.green.src='green.gif'">
<img src="green.gif"></a>

-----------------

After clicking this link, I want the image to stay red. How can I manage
this??
Problem is that on MouseOut the image turns green again... :-(

I tried CSS using an transparent gif with backgroundimages, but it still
doesn't work.

Can someone help me out?

John

Jul 20 '05 #2

P: n/a
In <mz*****************@news-binary.blueyonder.co.uk> Citizen Trout <no****@this.com> writes:
John wrote:
Imagine this:

I have a gif-image with text, coloured green.
When MouseOver occurs the gif will swap to another gif with red colourded
text. On MouseOut the gif turns back to the green text.
After clicking this link, I want the image to stay red. How can I manage
this??
Problem is that on MouseOut the image turns green again... :-(

I tried CSS using an transparent gif with backgroundimages, but it still
doesn't work.
It's not a coding problem, it's a logic problem. You're going to need to
save the state of the button. So you'll need an image called something
like "button_1_postclick" where you set the .src initially to green.gif,
and then have the onMouseOut set the gif to button_1_postclick rather than
to green.gif. Then have your onClick function for button_1 change the .src
of button_1_postclick to red.gif

Or I suppose you could do it with a global variable -- "button_1_clicked"
flag. Then have your onMouseOut check the variable - if not
button_1_clicked then swap gif to green, else leave it red, and have
onMouseOut set button_1_clicked = true.

Hope that helps.

--sg

Can someone help me out?

John

--
---------------------------------------
Buy my boat!
http://www.oscodagroup.com/boat

Jul 20 '05 #3

P: n/a
John wrote:
Imagine this: I have a gif-image with text, coloured green.
When MouseOver occurs the gif will swap to another gif with red colourded
text. On MouseOut the gif turns back to the green text. -----------------This is my code: <a href="nextpage.html" onMouseOver="document.green.src='red.gif'"
onMouseOut="document.green.src='green.gif'">
<img src="green.gif"></a> ----------------- After clicking this link, I want the image to stay red. How can I manage
this??
Problem is that on MouseOut the image turns green again... :-( I tried CSS using an transparent gif with backgroundimages, but it still
doesn't work. Can someone help me out? John

<a href="nextpage.html" onMouseOver="document.green.src='red.gif'"
onMouseOut="document.green.src='green.gif'"
onClick="document.green.src='red.giff'">
<img src="green.gif"></a>

This will "hold" the red image until the mouse is moved back over the image
again.
Jul 20 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.