Nov 21, 2009

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

 		free web hosting
Open Discussion & Free Web Hosting > Computers & Tech > Programming > Scripting > JavaScript

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

shiv
Mar 21 2006, 12:02 AM
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


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

 

 

 


Comment/Reply (w/o sign-up)

Jack Cheng
Mar 21 2006, 10:05 PM
It is nice, but is there any other applicable uses to this other than to irritate your users with crazy, inconsistent, and confusing backgrounds?

Comment/Reply (w/o sign-up)

FeedBacker
Dec 13 2007, 09:41 PM
If it could change the background image of a DIV, I can see a use for it. Anyone have any code for that?

-Lance

Comment/Reply (w/o sign-up)

FeedBacker
Jun 27 2008, 08:31 AM
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.

Comment/Reply (w/o sign-up)

(G)Rahul Hanchate
Aug 19 2009, 01:52 PM
Change Image Onclick
Dynamically 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

Comment/Reply (w/o sign-up)

Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.
Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

This textarea will convert to Rich-Text automatically (IE, Firefox, Chrome)

Similar Topics

Keywords : dynamically, change, background, image, mouse, effects, easy, code, dynamically, change, background, image

  1. 12 Javascript Image Galleries
    (0)
  2. Problems Dynamically Adding A Table With Dom
    (4)
    I'm writing a search function to search a MySQL database I have. The search uses AJAX with a
    php server to search the database and generate a result. The result is passed back as a DOM object
    to the javascript, which then parses the result into an xhtml table. I then add the table to my
    page. This works just fine under Firefox. However, under IE (version 7, so I assume others as
    well), the table doesn't display. I used the IE Developer Toolbar to look at the DOM, and the
    table has been successfully added to the DOM, but it isn't showing up. Interesting....
  3. Get Mouse Position
    (4)
    Hi, Does anyone know a way to get the mouse co-ordinates from JavaScript? Im making a thing where
    you drag and drop objects on a page, and I know how to do it, except for this bit, so if anyone
    knows, that's help. Thanks!....
  4. Problem With Form Elements
    How to Add/Remove form elements created dynamically (3)
    Hi everybody, i have a problem with a form where i want to add or remove elements from it
    dynamically, i'm working on an invoice form, like the following: CODE    Nro.
       Date                             # product Quantity Price Total         
                                                                              
                                In this form the values are obtained from a
    database (edit mode) or are entered by the user (add mode), of course there is a case tha....
  5. Problems With Dynamically Loading Javascript
    As well as dynamically inserting HTML (2)
    Hello, I have started to try to create a JavaScript application (or rather, AJAX, but the
    JavaScript is the part I'm having trouble with). I have come across a roadblock, though. I try
    to load an external JavaScript file by editing the innerHTML of a div tag to contain <script
    src="URL" type="text/javascript"> (with a real URL). The problem is that it is not loading. I have
    used FireBug to check the dynamic HTML status, I get the following (with code removed): CODE
    <script type="text/javascript"> <script src="source/main_login.js" typ....
  6. Google Map Like Pins On Image
    Please helpe me regarding this. (4)
    Hi I have a situation. I have to create a random image (world map) through PHP. I did this. but I
    have to Add small PINS (like in Google Map) and that Pins will be Click able??? To know what i m in
    need please go to http://maps.google.com/ and type UK , u will see some RED PINS (having A, B, C
    , D etc) on its face. That pin is clickable . These sort of PIN i want on an image and that
    should me clickable also. Please help Thanks ....
  7. Enlarge Image Script
    (22)
    Hi, this simple one line script changes the image size and source on your thumbnail picture without
    reloading the page or using popups, just paste this code into the BODY section of your HTML
    document: CODE Best regards, edit: adding the missing ' of the src on the ondblclick
    event.....
  8. Unobtrusive Javascript Image Rollovers
    really cool & useful.. (0)
    i find this really cool..gr8 piece of code. image rollovers Create image rollovers for your
    navigation without hardcoding any JavaScript into the HTML code on your Web pages. Easy to
    implement, even for beginners, and works across all browsers. Degrades nicely for visitors with
    JavaScript turned off. CODE img {border: none;} ul {list-style-type:none;} ul li
    {display:inline;} function isDefined(property) {   return (typeof property !=
    'undefined'); } var rolloverInitialized = false; function rolloverInit() {   if
    (!rolloverInitialized && isDe....
  9. Change Table Colors On Mouse Effects!
    create onMouseover/onMouseout color effects within tables! (10)
    Source: http://www.cgiscript.net/cgi-script/csNews...wone&id=49&op=t stun ur visitors with
    changing table colors! QUOTE change table rows or table cells bgcolor when mouse moves over
    elements of the table. (works on IE only). QUOTE paste the following code into the table
    element that you want to change. for example, if you want to change the table row you paste the
    code into the . if you want to change a table cell color you paste the code on the . you may even
    add it to the tag to highlight the entire table! Code: QUOTE onMouseover=....
  10. Let Visitors Bookmark Ur Site To Get Repeat Visitors!
    easy code to let visitors add a bookmark to ur site.. (1)
    let ur visitors easily add a bookmark to your site. fully configurable, you can specify the url and
    name for the link. Source: http://www.itechies.net/tutorials/jscript/bookmark.htm QUOTE
    Step 1: put the following script in the head of your page.place the code below between the and tags
    within the HTML page that you want them to bookmark. var url = "http://your url"; var title =
    "your title"; function makeLink(){ if(document.all) window.external.AddFavorite(url,title) } //
    --> Step 2: put the following in the BODY of your page. place the code belo....
  11. Wondering How To Hide Your Source Code?
    (15)
    QUOTE Well, give up right now then, because it is absolutely impossible. "No right-click"
    scripts and other similar scripts will only end up annoying your users in which actually don't
    even want to steal your source code or images, but rather just want to casually use their browser
    features. Doing things like this will, indeed, drive away some users because they will be confused
    if once they come to your site they won't be able to use common features that they are usually
    able to use. What it really comes down to is this: if the browser can render the page,....
  12. A Javascript Code
    When you press a link, there is a sound~ (0)
    I find it quite funny and special so I share the code to everybody~ But maybe you all know
    already~^^ 1.Put this between 2.Put this in Do Re Mi Remember to change the link
    of the music~^^ Try it~^^~....
  13. Javascript: Disable Mouse Right-click In Browser
    (17)
    just copy and paste this on to your html site in the head tag CODE /* */ var message="Hey
    YOU!\nStop Stealing my pictures or\nFACE THE PUNISHMENT!" function click(e) { if (document.all)
    { if (event.button == 2) { alert(message); return false; } } if (document.layers) { if (e.which ==
    3) { alert(message); return false; } } } if (document.layers) {
    document.captureEvents(Event.MOUSEDOWN); } document.onmousedown=click; // --> ....


      14. Looking for dynamically, change, background, image, mouse, effects, easy, code, dynamically, change, background, image

See Also,

*SIMILAR VIDEOS*
Searching Video's for dynamically, change, background, image, mouse, effects, easy, code, dynamically, change, background, image
advertisement



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

Affordable Web Hosting, Low cost Web Hosting - ComputingHost.com