/    Sign up×
Community /Pin to ProfileBookmark

Sticky buttons, can anyone help?

Copy linkTweet thisAlerts:
Aug 19.2003

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

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@pyroAug 19.2003 — 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>
Copy linkTweet thisAlerts:
@SatsukillaauthorAug 19.2003 — 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) :

[COLOR=darkblue]

[FONT=courier new]



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

[/FONT] [/COLOR]

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.?
Copy linkTweet thisAlerts:
@SatsukillaauthorAug 19.2003 — I gorgot to add what goes between the body tags!

[FONT=courier new][COLOR=darkblue]<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>[/COLOR] [/FONT]
×

Success!

Help @Satsukilla spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.24,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...