/    Sign up×
Community /Pin to ProfileBookmark

Changing Link Properties

Copy linkTweet thisAlerts:
Mar 19.2005

ummm… well, this also flows into the area of JavaScript, but it is still in the style area, so I will ask it here.

I know you can change the document’s style elements like

[CODE]document.body.style.background = “000000”;[/CODE]

This would make the background color black. I know there are other properties like the scrollbar colors, the text color, font styles and such, etc.

But what about the links. How can you go and change the link properties? I believe you could go and do like

[CODE]document.link = “0000FF”;[/CODE]

or like

[CODE]document.alink = “FF0000”;[/CODE]

I haven’t tryed those but even if they work, what about more specific things? Like the link hover properties? And changing border styles, color, font properties, etc.?

Any help on this would be very much appreciated.

O and just in case I wasn’t clear enough above. I want to know how to set the link properties, mainly the hover event properties. And I don’t mean just in the code like a CSS. I can do that. I want to be able to change it after the page has loaded. Like with a button. So I need to know what accesses the link properties.

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@cootheadMar 19.2005 — Hi there Sup3rkirby,

this may give you some ideas ?
[color=navy]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>change hover</title>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/
body {
font-size:16px;
}
a.three:hover {
color:#960;
font-size:18px;
font-family:verdana;
text-decoration:none;
}
button {
width:100px;
margin:2px;
}
/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[
function doStuff(name) {
if(document.getElementById("link").className==name) {
document.getElementById("link").className="";
}
else {
document.getElementById("link").className=name;
}
}

//]]>
</script>

</head>
<body>

<div><button onclick="doStuff('three')">alter hover</button></div>

<div><a id="link" href="http://www.webdeveloper.com">webdeveloper.com</a></div>

</body>
</html>[/color]

[i]coothead[/i]
Copy linkTweet thisAlerts:
@Sup3rkirbyauthorMar 19.2005 — ok, this is what I thought someone would post...

Misunderstanding. I want to be able to change the links hover properties with like a button or whatever. Below is an example that should clear up what I want to do.

[CODE]<HTML>
<Head>
<Title>Changing The Webpage Style</Title>
<Style>
A:link
{
color = "0000FF";
text-decoration = "none";
}
A:active
{
color = "0000FF";
text-decoration = "none";
}
A:visited
{
color = "0000FF";
text-decoration = "none";
}
A:hover
{
color = "0000FF";
text-decoration = "underline";
}

body
{
background = "FFFFFF";
color = "00A0FF";

scrollbar-face-color = "0000FF";
scrollbar-highlight-color = "6666FF";
scrollbar-3dlight-color = "4444FF";
scrollbar-shadow-color = "0000EE";
scrollbar-darkshadow-color = "0000DD";
scrollbar-track-color = "00A0FF";
scrollbar-arrow-color = "FFFFFF";
}
</Style>
<Script>

function ChangeStyle()
{
document.body.style.background = "000000";
document.body.style.color = "FF0000";
document.body.style.scrollbarfacecolor = "FF0000";
document.body.style.scrollbarhighlightcolor = "FF6666";
document.body.style.scrollbar3dlightcolor = "FF4444";
document.body.style.scrollbarshadowcolor = "EE0000";
document.body.style.scrollbardarkshadowcolor = "DD0000";
document.body.style.scrollbartrackcolor = "656565";
document.body.style.scrollbararrowcolor = "FFFFFF";

????
}

</Script>
</Head>
<Body>

<input type="button" value="Change Style" onlclick="ChangeStyle()">

</Body>
</HTML>[/CODE]

Ok, in that example, clicking on the button will change the style of the document. But where the "????" is, what would I put there that would change the link's hover properties. So if I wanted to make the links change to red or gray or something. They would still be blue in this example.

This really should be in the JavaScript section I guess. I just need to know what will access the link properties, and then more importantly, what acesses the link's hover properties. Like:
[CODE]document.body.style.background[/CODE]
This accesses the document's background color(not the only way though). So what code like that would access the link's properties?
×

Success!

Help @Sup3rkirby 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 6.18,
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: @nearjob,
tipped: article
amount: 1000 SATS,

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

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...