Editing Rollover background-color button

[holden89]

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

[jscheuer1]

Replace this:

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

with:

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:

.initial2 {
background-color:white
border:1px solid black;
}

in place of:

.initial2{background-color:white}

The script can be made external by saving this, and only this:

/***********************************************
* 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:

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

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.

[holden89]

Hey thanks heaps. It all works now!

Cheers