Linking Buttons

Elements
1

I have two Buttons on a page, both buttons are in different positions on that page. Is there a way to Link those two buttons so that if I hover over one button, both buttons highlight?

2

You could set a short timeline to change the colors on mouseover and mouseout. Or use a javascript like this...

hypeDocument.getElementById('b1').style.background = "yellow"; // mouse over
hypeDocument.getElementById('b1').style.background = "#F0F0F0"; // mouse out

buttons.hype.zip (11.3 KB)

3

If you want to use a Timeline and mouse over/out then Greg gives you the best ways of doing it.

But if you want to use Mouse Click and have the colours stay on and off. You would need to double up on your Javascript and use a global variable as a true/false marker for when the colour is on or off.

Example the global var is placed in the head :

<script type="text/javascript">
	window.buttonsOnShift = false  ;
 </script>

And Simple JS is run when either of the buttons is clicked.

	if (window.buttonsOnShift){
	
	hypeDocument.getElementById('shift1').style.background = "#696969";  
	hypeDocument.getElementById('shift2').style.background = "#696969";
	window.buttonsOnShift = false  ;
	} else {
hypeDocument.getElementById('shift1').style.background = "#FFA500";  
hypeDocument.getElementById('shift2').style.background = "#FFA500"; 

window.buttonsOnShift = true;
   
}

The Timelines when called use the Toggle technique found here:

LinkedButtons.hypetemplate.zip (42.1 KB)

1 Like
4

Thanks Greg
I used your routine and it worked just fine. Exactly what I wanted.

5

I tried your code Mark and it also worked perfectly. I now have two snippets of code that I can add to my tool belt. Thanks to both of you and your quick reply!