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

[shiv 0]

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

easy code to dynamically change the background image.

Notice from szupie:

Copied from http://www.scriptworm.com/scriptengine/visit.php?id=30296

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

[Jack Cheng 0]

It is nice, but is there any other applicable uses to this other than to irritate your users with crazy, inconsistent, and confusing backgrounds?

[iGuest 3]

If it could change the background image of a DIV, I can see a use for it. Anyone have any code for that?-Lance

[iGuest 3]

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

[iGuest 3]

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

[iGuest 3]

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

 

[iGuest 3]

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

[iGuest 3]

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?