Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jun 2006
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    rollover buttons

    Code:
    <input type="button" value="Clear" onClick="if(confirm('Are you sure that you want to clear the messages off the screen?'))parent.messages.clear();" class="plain">
    There is an example of a button I have on my page.. it is given a specific background image on the button using css (class=plain)

    Is it possible using javascript to make the background image change when your mouse goes over the button and when you click on the button

    Code:
    input.plain
    {
     background-image: url(bg2.gif)
    }
    Is the css I'm using . when the mouse goes over the button can you make it use maybe bg3.gif instead..

    thanks in advance
    Last edited by HIPPY; 02-18-2007 at 01:34 PM.

  • #2
    ess
    ess is offline
    Regular Coder
    Join Date
    Oct 2006
    Location
    United Kingdom
    Posts
    866
    Thanks
    7
    Thanked 30 Times in 29 Posts
    You can use the following command to change the background image of an element.

    Code:
    window.document.getElementById( "some_id").style.backgroundImage = "img_here.gif";
    If you wish to use both CSS and JavaScript...then you can use the following command

    Code:
    window.document.getElementById( "some_id").className = "classname" ;
    Say you have a link, and you wish to change the background image of that link once the mouse hovers on top of it, you can use the following

    Code:
    <a href="#" onmouseover="this.className='css_class_name';" onmouseout="this.className='css_class_name';">somelink</a>
    Good luck.
    Ess

  • #3
    New Coder
    Join Date
    Jun 2006
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts
    s to clarify if i use the css and java method, i write this code in the head of the document:

    Code:
    window.document.getElementById( "some_id").className = "classname" ;
    but then how do I make it so that the image changes when you put the mouse over the button, thecode i used to make the button is this:

    Code:
    <input type="button" value="Clear" onClick="if(confirm('Are you sure that you want to clear the messages off the screen?'))parent.messages.clear();" class="plain">

  • #4
    ess
    ess is offline
    Regular Coder
    Join Date
    Oct 2006
    Location
    United Kingdom
    Posts
    866
    Thanks
    7
    Thanked 30 Times in 29 Posts
    If you want to change the CSS class, then do the following

    Code:
    <input type="button" value="Clear" onClick="if(confirm('Are you sure that you want to clear the messages off the screen?'))parent.messages.clear();" class="plain" onmouseover="this.className='class_name';" onmouseout="this.className='plain'";>
    If you want to use an image, than you to do the following
    Code:
    <input type="image" name="Clear" alt="Clear" src="clear.gif" onClick="if(confirm('Are you sure that you want to clear the messages off the screen?'))parent.messages.clear();"  onmouseover="this.src='clearOver.gif';" onmouseout="this.src='clear.gif';"/>
    Good luck
    Ess

  • #5
    New Coder
    Join Date
    Jun 2006
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts
    loads of thanks, worked a charm

  • #6
    New Coder
    Join Date
    Jun 2006
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I was wondering if it were possible to somehow outsource this bit of code to a .js file, because i have loads of buttons on different pages that i want to use this effect and dont want to use the same code over and over... how would i go about that

  • #7
    ess
    ess is offline
    Regular Coder
    Join Date
    Oct 2006
    Location
    United Kingdom
    Posts
    866
    Thanks
    7
    Thanked 30 Times in 29 Posts
    there loads of techniques you can use here.

    one of them is to create a function in a file and you pass a reference of the button that currently has the focus...and you can then replace the class name or change the src etc.

    here is an example..first the javascript function
    Code:
    <script type="text/javascript">
    function changeStyle( ref ) {
    // assuming you only have two css class, please assign as you see fit
    var class1 = "plain";
    var class2 = "hoverEffect";
    if( ref.className == class1 ) {
    ref.className = class2;
    } else {
    ref.className = class1;
    } //-- ends else
    } //-- ends changeStyle
    </script>
    second the button

    Code:
    <input type="button" value="Clear" class="plain" onmouseover="javascript: changeStyle( this );" onmouseout="javascript: changeStyle(this);"/>
    There are many ways to do this, and this is the first that came to mind....but should solve this problem for you any how.

    Cheers,
    Ess


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •