-
Hi All
Is there any way of accessing a class in a external style sheet that is linked to a page using javascript.
Basically I have a class (.MO) which holds a back ground colour which I need to use to change the colour of something when they mouse over.
src.style.color = MO's background colour ?
Any help greatly appreciated
Ian
-
im not quite sure what youre asking but ill have a go.You need to link the style sheet first.eg
<head>
<title></title>
<LINK REL=STYLESHEET TYPE="text/javascript" HREF="yourstyle">
</head>
if you have done this then you only need to assign which ever style within that style sheet to the tag.however if you assign a style to a tag then the whole of that style applies to that tag.ie
tags.p.fontsize="22pt";
tags.p.backgroundcolor="white";
if this style was applied to a tag then the font size and background color would be applied.if you only want to apply the background color, make a new class with only the backgroundcolor defined.
ids.mybackground.backgroundColor="white";
you could use
<SPAN ID="mybackground">gobbledigook</SPAN>
i hope this helps m8
-
use the ELEMENT.CLASS = CLASSNAME syntax via Javascript to change the class of the element. Just make sure your external style sheet is referenced via LINK REL....
if you need code let me know
-
Hi Clunietp
Sorry about the delay in replying but i've been on holiday for the last week.
I did what you said and It doesn't work. Both IE and NS doesn't say there is an error but the bgcolor stay's the same.
I link to the style sheet using the following
<link id="mystyle" rel="stylesheet" href="../../NDL/colours.css" type="text/css">
My javascript funtion's are as follows
function mOvrTAB(src)
{
if(!src.contains(event.fromElement))
src.CLASS = "MO";
}
function mOutTAB(src)
{
if(!src.contains(event.toElement))
src.CLASS = "";
}
and I reference the functions as follows
[code}
<tr>
<td VALIGN="MIDDLE" ONMOUSEOVER="mOvrTAB(this);" ONMOUSEOUT="mOutTAB(this);" ONCLICK="mClkTAB(this);" align="center" class="TRE">
<a href="../results.asp?ID=NDL&mortType=CURRENT" class="LK2">Current Account Mortgages</a></td>
<td class="TC2" align="center">
<a href="javascript:PopWi('buyerpayment1.htm','newwindow')">
<img src="../../<%=PartnerID%>/images/question.GIF" border="0"></a></td>
</tr>
[/code]
Any help would be greatly appreciated
Ian
-
Use className as the property you want to change
example:
Code:
<HTML>
<SCRIPT language="javascript">
function highlightIt(theObject)
{
theObject.className = "clsSelected";
}
function unHighlightIt(theObject)
{
theObject.className = "clsNormal";
}
</SCRIPT>
<BODY>
<LINK REL="stylesheet" type="text/css" href="default.css">
<TABLE>
<TR>
<TD id=TD1 onmouseover="highlightIt(this);" onmouseout="unHighlightIt(this);">HELLO</TD>
<TD id=TD2 onmouseover="highlightIt(this);" onmouseout="unHighlightIt(this);">WORLD</TD>
</TR>
</TABLE>
</BODY>
</HTML>
-
Thanks Clunietp, it works perfectly
Ian