iframe button and their states

is it possible to have buttons in an iframe (these buttons have an 'off' state and an 'on' state) when pressed keep their on state until another button is pressed thereby relieving the button back to their off state? so basically the button stays highlighted once it is pressed until another button is pressed. then the first highlighted button goes back to its first orginal sate/colour and the next button i have pressed stays in its 'pressed' state - probably sight change in colour.

I'm not sure if this is what you mean, but you could use the disabled property to "gray out" a button and make it unavailabe until another button is pressed:

let me explain abit more.

i have a row of buttons. if i am at the 'about us' page i want the 'about us' button "greyed out" until i press the (for example) 'services' button. then the 'about us' button will regain its unpressed state and the 'services' button will be greyed out.

i see how the script works for 2 buttons but i have a row of 8 buttons. how will that go then?

What kind of buttons are you using? Perhaps you could post an example of the code...

try this


and then on your links



this will work until the page is refreshed or a user selects one of the links.

The only way to maintain state between the pages so that the page being visited is highlighted is to either use frames or pass some form of variable to a server side script that can dynamically write an onload attribute that will call the shade and unshade functions

i see. that code is brill. but my buttons are .gif rollovers. is there a way to adapt this script to take in that fact?

this is the easy way to use the function look below



let me know if it works remeber to set your image border to zero if you are using it inside an <a href> scenario

sorry but it doesnt work. the old image moves over to the left slightly. the new image doesnt appear at all. i am sure that you understand what i am after. if not let me explain. i would like a script that enables the user press a button to get to a page. the button that is pressed stays in its 'over' state until the user presses another button to go to another page.

thanks for your help in this. it is much appreciated. if you can alter ya script somewhat it would be great. i am rackin my brain trying to figure this out aswell. if i get the code before anyone i will post it up here

are you using frames?

i am using iframes

Are the images in the parent document and the target the iframe?

Something like this example?

http://www.gotrivia.com/test2/

PS- I used the images from the page you used as an example earlier. I don't usually use other's images, but I didn't have time to make any, and it's just for this example.

yes. that is brilliant. just what i wanted. i will adapt the script. but this is perfect.

what did you do this script in? dreamweaver? did you compile the javascript yourself?

The preload function is the one that comes with dreamweaver; the rest I wrote myself, although the swap is just a standard one with an if wrapped around it.

just a note to this. i see where the disadvantage is. in the text you cannot have links to other pages. all links are governed by the image links. that way the image changes. is there a way that a link can be in the text but still the image changes? i am not sure there is one because all the code happens in the img tag

You could have the links that point to pages on your own site invoke the img code in their onclick handler. I added a function to handle the text link clicks that just invokes the code for the correspoding image.



The I add the onclick to the text links that show in the iframe:



If the text links are in the parent page that holds the iframe I did this:



...basically just targeting the iframe for those and not adding the parent to the function call. That way the code for the image highlighting only needs to be in the parent page that holds the iframe.

I probably should have named the images something other than 'img1' so that it would be a little easier to keep track of which was which. You can name them something more sensible like name="home" so that when you're coding your text links it will be easier to remember which name to pass to the doImgClick function. Just remember to go back and change the img code to match.

Anyway here's the example.

Have a look and see if that's what you were looking for.