Jump to content
xisto Community
Sign in to follow this  
shiv

Dynamically Change The Background Image On Mouse Effects! easy code to dynamically change the background image

Recommended Posts

stun ur visitor with a new bg image on every mouse click of his!

easy code to dynamically change the background image.



control the background image using the links on your site. control the color using onMouseOver, onMouseOut, onClick, and a combination of all of them.
place the code below between the and tags within the HTML page where you want the link to appear. edit the link text provided to point at the page you would like to open.



Option 1:
use this to change the background color when user places mouse over the link.


<a href="link.htm" onMouseOver="document.body.background='red.gif'">Link Text</a>


Option 2:
use this to change the background image when user removes mouse from over the link (onMouseOut).

<a href="link.htm" onMouseOut="document.body.background='green.gif'">Link Text</a>


Option 3:
use this to change the background image when user clicks the link (onClick).

<a href="link.htm" onClick="document.body.background='blue.gif'">Link Text</a>



Option 4:
use this to change the background image twice, once when the user places the mouse over the link then again when the user takes the mouse off the link (onMouseOver and onMouseOut).

<a href="link.htm" onMouseOver="document.body.background='red.gif'" onMouseOut="document.body.background='green.gif'">Link Text</a>


Option 5:
use this to change the background image three times, once when the user places the mouse over the link, again when the user takes the mouse off the link, and again when the user clicks on the link (onMouseOver, onMouseOut, and onClick).


<a href="link.htm" onMouseOver="document.body.background='red.gif'" onMouseOut="document.body.background='green.gif'" onClick="document.body.background='blue.gif'">Link Text</a>


njoy!

shiv

Share this post


Link to post
Share on other sites

Wouldn

Dynamically Change The Background Image On Mouse Effects!

 

I'm useless at javascript, but wouldn't it be something like

 

OnClick="this.Style.Background='red.Gif'"

 

But after trying that, it didn't work :P anyone have a quick solution to changing a style element directly through an 'on' command without having to use your own functions?

 

I'm currently trying to make a 'pushed-look' to my CSS buttons using onClick.

Share this post


Link to post
Share on other sites
Change Image OnclickDynamically Change The Background Image On Mouse Effects!

I Have 5 Images placed in one line and I have Onmouseover, onmouseout,onclick event on each image, a have href for each image

I want to change images on Onmouseover, onmouseout,onclick events

 , onmouseout,Onmouseover event works fine but

My problem is  in my  onclick event image changes once I click image it changes but as that page is loaded it again switch back to original image

How can I overcome it

-question by Rahul Hanchate

Share this post


Link to post
Share on other sites
Thank youDynamically Change The Background Image On Mouse Effects!

Hello, this  site rocks.

 Thanks very much for your sharing the code, JS isnt easy and its appreciated your help!

-reply by Ramses

 

Share this post


Link to post
Share on other sites

RE: change image on mouseover

 assign id to image [<img id="img" src="source.Jpg"/>]

make your alternate image with the <img id="img2" style="display: none; " src="source2.Jpg"/>

onmouseover="getElementById('img').Style.Display='none'; getElementById(img2).Style.Display='inline'; "

 

Hope that this helps, even if the post is a little older...

 

-reply by Johnathan

Share this post


Link to post
Share on other sites
Background changes in fronpage view but does not in browser view or even after publishingDynamically Change The Background Image On Mouse Effects!

This was just what I needed to change background image and seemed to be  easy .

I am placing 5 links on a dwt template page and appling template to a number of pages on site.

Everything works fine until I try to view in a browser. Tried both IE and firefox. I each case a messsage come up that it can not find page. The browser is looking for a file ending in .Link

I am not sure if a link page is supposed to have been generated. There is no link page in web folder

What have I missed?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.