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

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

 
 Discussion by shiv with 7 Replies.
 Last Update: July 17, 2010, 11:14 pm
 
bookmark - Dynamically Change The Background Image On Mouse Effects! easy code to dynamically change the background image  
    
free web hosting
 
stun ur visitor with a new bg image on every mouse click of his!

easy code to dynamically change the background image.

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

QUOTE

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.


CODE

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

CODE

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

CODE

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

CODE

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


CODE

<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

Tue Mar 21, 2006    Reply    New Discussion   


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

-Lance

Thu Dec 13, 2007    Reply    New Discussion   

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

Wed Aug 19, 2009    Reply    New Discussion   

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

 

Mon Jan 4, 2010    Reply    New Discussion   


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

Thu Jan 14, 2010    Reply    New Discussion   

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?

Sat Jul 17, 2010    Reply    New Discussion   

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

Tue Mar 21, 2006    Reply    New Discussion   

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.

Fri Jun 27, 2008    Reply    New Discussion   

Quickly Post to Dynamically Change The Background Image On Mouse Effects! easy code to dynamically change the background image w/o signup Share Info about Dynamically Change The Background Image On Mouse Effects! easy code to dynamically change the background image using Facebook, Twitter etc. email your friend about Dynamically Change The Background Image On Mouse Effects! easy code to dynamically change the background image Print
Reply / Comment Ask a Question? Share / Bookmark E-Mail a Friend Print

Bid Visitors Bye/thank U With A Popup Onunload In Just One Line! script designed to open a window when the users leave the site  Bid Visitors Bye/thank U With A Popup Onunload In Just One Line! script designed to op... (0) (1) Let Visitors Bookmark Ur Site To Get Repeat Visitors! easy code to let visitors add a ...  Let Visitors Bookmark Ur Site To Get Repeat Visitors! easy code to let visitors add a bookmark to ur site..