Changing The Style Of A Link

@chestertbSep 05.2008

I need to dynamically change the style of the hover property of a link using DHTML.

For example, to change regular text colour of an element, I’d use
document.getElementById(‘thetextid’).style.color = whatever;

in css, I’d use this to set the link colour;
a:hover {

color: #E0218A;
}
but I have absolutely no idea how to do that in DHTML.

Any suggestions?

to post a comment

JavaScript

4 Comments(s) _↴

@KorSep 05.2008 — #I need to dynamically change the style of the hover property of a link using DHTML.

For example, to change regular text colour of an element, I'd use

document.getElementById('thetextid').style.color = whatever;

in css, I'd use this to set the link colour;

a:hover {

color: #E0218A;

}

but I have absolutely no idea how to do that in DHTML.

Any suggestions?[/QUOTE]
I guess that you did not understand what DHTML is. DHTML is nothing but using javascript to change the CSS values or classes.

<i>
 </i>&lt;a href="" onmouseover="this.style.color='#E0218A'" onmouseout="this.style.color='#000000'"&gt;link&lt;/a&gt;

<i>
 </i>&lt;style type="text/css"&gt;
 .overClass{
 color:#E0218A;
 }
 .outClass{
 color:#000000;
 }
 &lt;/style&gt;
 ...
 
 &lt;a href="" onmouseover="this.className='overClass'" onmouseout="this.className='outClass'"&gt;link&lt;/a&gt;

But why do you need javascript for a simple rollover as long as you can use only CSS?

@chestertbauthorSep 05.2008 — #I guess that you did not understand what DHTML is. DHTML is nothing but using javascript to change the CSS values or classes.
[/QUOTE]
Thanks Kor. Yes. Actually, that's precisely what I want to do.

I want to allow the user to set his own colour preferences, and that includes the link and hover colours (and style, decoration, font, weight... the whole lot).

When the user selects a colour from a colour palette, the text colour changes. I just can't figure out how to change the hover colour without reloading the page.

@KorSep 05.2008 — #Could be something based on this:

<i>
 </i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Untitled Document&lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
 &lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
 &lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
 &lt;script type="text/javascript"&gt;
 function changeStyle(ev,att,val){
 var links=document.getElementsByTagName('a'), i=0, a;
 while(a=links[i++]){
 ev=='mouseout'?a.style[att]=val:null;
 AttachEvent(a,ev,function(){this.style[att]=val},false);
 }
 }
 function AttachEvent(obj,evt,fnc,useCapture){
 if (!useCapture) useCapture=false;
 if (obj.addEventListener){
 obj.addEventListener(evt,fnc,useCapture);
 return true;
 } else if (obj.attachEvent) return obj.attachEvent("on"+evt,fnc);
 else{
 MyAttachEvent(obj,evt,fnc);
 obj['on'+evt]=function(){ MyFireEvent(obj,evt) };
 }
 } 
 function MyAttachEvent(obj,evt,fnc){
 if (!obj.myEvents) obj.myEvents={};
 if (!obj.myEvents[evt]) obj.myEvents[evt]=[];
 var evts = obj.myEvents[evt];
 evts[evts.length]=fnc;
 }
 
 function MyFireEvent(obj,evt){
 if (!obj || !obj.myEvents || !obj.myEvents[evt]) return;
 var evts = obj.myEvents[evt];
 for (var i=0,len=evts.length;i&lt;len;i++) evts[i]();
 }
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;form action=""&gt;
 onmouseout:
 &lt;br&gt;
 color&lt;select onchange="this.selectedIndex&gt;0?changeStyle('mouseout','color',this.value):null"&gt;
 &lt;option&gt;-- select a color --&lt;/option&gt;
 &lt;option value="#000000"&gt;#000000&lt;/option&gt;
 &lt;option value="#ff0000"&gt;#ff0000&lt;/option&gt;
 &lt;option value="#ffff00"&gt;#ffff00&lt;/option&gt;
 &lt;option value="#ff00ff"&gt;#ff00ff&lt;/option&gt;
 &lt;/select&gt;
 decoration&lt;select onchange="this.selectedIndex&gt;0?changeStyle('mouseout','textDecoration',this.value):null"&gt;
 &lt;option&gt;-- select a decoration --&lt;/option&gt;
 &lt;option value="underline"&gt;underline&lt;/option&gt;
 &lt;option value="none"&gt;none&lt;/option&gt;
 &lt;option value="overline"&gt;overline&lt;/option&gt;
 &lt;/select&gt;
 &lt;br&gt;
 &lt;br&gt;
 onmouseover:
 &lt;br&gt;
 color&lt;select onchange="this.selectedIndex&gt;0?changeStyle('mouseover','color',this.value):null"&gt;
 &lt;option&gt;-- select a color --&lt;/option&gt;
 &lt;option value="#000000"&gt;#000000&lt;/option&gt;
 &lt;option value="#ff0000"&gt;#ff0000&lt;/option&gt;
 &lt;option value="#ffff00"&gt;#ffff00&lt;/option&gt;
 &lt;option value="#ff00ff"&gt;#ff00ff&lt;/option&gt;
 &lt;/select&gt;
 decoration&lt;select onchange="this.selectedIndex&gt;0?changeStyle('mouseover','textDecoration',this.value):null"&gt;
 &lt;option&gt;-- select a decoration --&lt;/option&gt;
 &lt;option value="underline"&gt;underline&lt;/option&gt;
 &lt;option value="none"&gt;none&lt;/option&gt;
 &lt;option value="overline"&gt;overline&lt;/option&gt;
 &lt;/select&gt;
 &lt;/form&gt;
 &lt;br&gt;
 &lt;br&gt;
 &lt;a href="#"&gt;text link&lt;/a&gt;
 &lt;a href="#"&gt;text link&lt;/a&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@chestertbauthorSep 08.2008 — #Thanks Kor.

I really appreciate the effort. I tried the above but while the mouseout colour changes just fine, but the mouseover doesn't change.

I thought I'd try the following, which seems to work.

[code=html]<html>
 <head>
 <script language="javascript">
 function showhighlight()
 {
 document.getElementById('normal').style.display = "none";
 document.getElementById('highlight').style.display = "block";
 }
 function shownormal()
 {
 document.getElementById('highlight').style.display = "none";
 document.getElementById('normal').style.display = "block";
 }
 function change()
 {
 c = document.getElementById('colour').value;
 document.getElementById('highlight').style.color = c;
 }
 </script>
 </head>
 <body>
 <div id="normal" style="position:absolute; left:10px; top:10px; display:block; color: #FFCC00; cursor: pointer" onMouseOver="javascript:showhighlight()">
 TEST OVER THIS
 </div><div id="highlight" style="position:absolute; left:10px; top:10px; display:none; color: #CC9966; cursor: pointer" onMouseOut="javascript:shownormal()">
 TEST OVER THIS
 </div>
 <div style="position:absolute; left: 10px; top: 50px">
 <select id="colour" onchange="javascript:change()">
 <option>-- select a hover color --</option>
 <option value="#000000">#000000</option>
 <option value="#ff0000">#ff0000</option>
 <option value="#ffff00">#ffff00</option>
 <option value="#ff00ff">#ff00ff</option>
 </select>
 </body>
 </html>[/code]

Thanks

CTB

Also in #JavaScript _↴

getting data to display ads Return Saturday of the week for a given weekday navigation bar position problem

Success!

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

Tweet This

Changing The Style Of A Link

4 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Changing The Style Of A Link

4 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #JavaScript _↴