Sticky buttons, can anyone help? [Archive]

Click to See Complete Forum and Search --> : Sticky buttons, can anyone help?

Satsukilla

08-19-2003, 07:41 AM

There does not seem to be a lot of information on the subject on the internet.

All I want is to create 8 (image)buttons, each corresponding to a section, when the user clicks on one, it takes on the "over" state and stays that way until the user has clicked on another one and the same applies to any of the other buttons.

It seems to be simple enough, yet I have only found 2 pieces of code on the subject, both which don't work.

Could anyone please help?

Regards

pyro

08-19-2003, 07:55 AM

Try something like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Link Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function setColors(which) {
for (i=0; i<document.links.length; i++) {
document.links[i].style.backgroundColor= "transparent";
document.links[i].onmouseout= "this.style.backgroundColor='transparent'";
which.style.backgroundColor = "#eeeeee";
which.onmouseout = null;
}
}
</script>
</head>
<body>
<p>
<a href="#" onmouseover="this.style.backgroundColor='#eeeeee';" onmouseout="this.style.backgroundColor='transparent';" onclick="setColors(this);">One</a> |
<a href="#" onmouseover="this.style.backgroundColor='#eeeeee';" onmouseout="this.style.backgroundColor='transparent';" onclick="setColors(this);">Two</a> |
<a href="#" onmouseover="this.style.backgroundColor='#eeeeee';" onmouseout="this.style.backgroundColor='transparent';" onclick="setColors(this);">Three</a>
</p>
</body>
</html>

Satsukilla

08-19-2003, 08:13 AM

Thanks for replying but I want to do it with images, I found this script here which works nicelly (if anyone wants it, please help yourselves) :

<script>
var ImageRoot="../images/";

if(Array)
var MyImg = new Array('buttonA','buttonB','buttonC');

function preloadImages()
{
if (document.images)
{
PreLoads = new Array();
for (var xx=0;xx<MyImg.length;xx++)
{
PreLoads[xx]=new Image();
PreLoads[xx].src=MyImg[xx]+"_on.gif";
}
}
}

function swapAllImages(On)
{
if(document.images)
{
for (var xx=0;xx<MyImg.length;xx++)
{
var OnOff = (MyImg[xx]==On)?"_on.gif":"_off.gif"
document.images[MyImg[xx]].src= ImageRoot + MyImg[xx]+ OnOff;
}
}
}</script>

But there is still a problem, while a button is clicked you can remove its ON state simply by mousing over another button. I want this to happen ONLY if the user clicks on another button. Yes, the other buttons can be highlighted while you hover over them, but the one that is clicked should remain that way until another onclick event is triggered.

Any ideas?

Thanks for the reply anyway.:)

Satsukilla

08-19-2003, 08:15 AM

I gorgot to add what goes between the body tags!

<body onLoad="preloadImages()">
<h2 style="text-size:16px;color:003399;font-family:courier, arial, helvetica;">Please work this time!!!</h2>
<p><a href="#"onMouseOver="swapAllImages('buttonA');"><img src="buttonA_off.gif" name="buttonA" width="90" height="60" border="0" style="margin-left:20px;"></a>
<a href="#"onMouseOver="swapAllImages('buttonB');"><img src="buttonB_off.gif" name="buttonB" width="90" height="60" border="0" style="margin-left:20px;"></a>
<a href="#"onMouseOver="swapAllImages('buttonC');"><img src="buttonC_off.gif" name="buttonC" width="90" height="60" border="0" style="margin-left:20px;"></a>
</p>
</body>