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
document.body.style.background = "000000";
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
document.link = "0000FF"; or like document.alink = "FF0000";
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.Hi there Sup3rkirby,
this may give you some ideas
<!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/forum/archive/index.php/"http://www.webdeveloper.com">webdeveloper.com</a></div>
</body>
</html>
cootheadok, 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.
<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>
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:
document.body.style.background
This accesses the document's background color(not the only way though). So what code like that would access the link's properties?
I know you can change the document's style elements like
document.body.style.background = "000000";
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
document.link = "0000FF"; or like document.alink = "FF0000";
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.Hi there Sup3rkirby,
this may give you some ideas
<!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/forum/archive/index.php/"http://www.webdeveloper.com">webdeveloper.com</a></div>
</body>
</html>
cootheadok, 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.
<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>
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:
document.body.style.background
This accesses the document's background color(not the only way though). So what code like that would access the link's properties?