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 (http://surfinthebay.net/menu2.htm). It will be showing up here (http://surfinthebay.net/newlayout2.htm). 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