Results 1 to 3 of 3

Thread: Editing Rollover background-color button

  1. #1
    Join Date
    Apr 2006
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Editing Rollover background-color button

    1) Script Title: Rollover background-color button

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex5/button3.htm

    3) Describe problem:

    Hi, I have created an inline frame and placed the navigation page in it, so it doesn't need to be updated on every single page. You can find that page here. It will be showing up here. However because it is in the frame, it loads either within the frame, or creates a new window (as written in script). I was wondering what I need to change:

    //Specify optional button target: "_new" for new window, or name of FRAME target (ie "myframe")
    var buttontarget="_new"

    to, in order for it to load the whole page, not just the frame or in a new window.

    Also, do you know what can be changed so that when it is clicked, the border doesn't thicken ie, from 1px to 2px... I want it to stay 1px?

    I would appreciate any help. If anyone knows how to maybe put the script (with the links) in a file, and link to that instead so the scripting isn't as messy, and wouldnt need a frame, I would appreciate it.

    Thanks, Daniel

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,991
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    Replace this:

    Code:
    onClick="jumpto2('http://google.com')"
    with:

    Code:
    onclick="top.location='http://google.com';"
    The behavior of a button when clicked is often beyond the control of the designer. But, you can try this:

    Code:
    .initial2 {
    background-color:white
    border:1px solid black;
    }
    in place of:

    Code:
    .initial2{background-color:white}
    The script can be made external by saving this, and only this:

    Code:
    /***********************************************
    * Rollover background-color button Script-  Dynamic Drive (www.dynamicdrive.com)
    * This notice must stay intact for use
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    //Specify optional button target: "_new" for new window, or name of FRAME target (ie "myframe")
    var buttontarget="_new"
    
    function change(e, color){
    var el=window.event? event.srcElement: e.target
    if (el.tagName=="INPUT"&&el.type=="button")
    el.style.backgroundColor=color
    }
    
    function jumpto2(url){
    if (buttontarget=="")
    window.location=url
    else if (buttontarget=="_new")
    window.open(url)
    else
    parent[buttontarget].location=url
    }
    to a text file and calling it - say, button_roll.js

    Put this in the head of the page(s) that will use it:

    HTML Code:
    <script type="text/css" src="button_roll.js">
    /***********************************************
    * Rollover background-color button Script-  Dynamic Drive (www.dynamicdrive.com)
    * This notice must stay intact for use
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    </script>
    If the script isn't in the same folder as the page(s) that use it, you must specify the path to the script in the src attribute, example:

    Code:
    src="http://www.mydomain.com/scripts/button_roll.js"
    You will still need to include the style section on the page(s) or make it an external style sheet.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Apr 2006
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hey thanks heaps. It all works now!

    Cheers

Bookmarks

Posting Permissions

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