Re: Mouseover and CSS

by "John Murray" <jmnc(at)lis.net.au>

Date:	Fri, 6 Oct 2000 19:34:34 +1000
To:	"Jeremy Brown" <jeremy(at)localnetamerica.com>
Cc:	<hwg-techniques(at)hwg.org>
References:	localnetamerica
	todo: View Thread, Original

I have what should work, but I've had not luck seeing the assignment of the
new class to the span object showing up in the rendered screen. It makes the
right choice at the if / else decision as demonstrated by manually changing
class in the div tag, and watching the message in the alert box change.

The code I've been trying to change the style is commented out at the
moment.

I've been having trouble setting style properties using javascript on styles
that weren't created using javascript in the first place. So I usually at
this point set the inital styles using an onLoad function called by
javascript - and it seems to get me out of trouble.

Obviouslly I haven't stumbled across a fundamental piece of info yet, or
there is something fundamentally wrong with my technique.

But anyway, there's my input.

John

################################

<html>
<head>

<style>

.blackonwhite {
color: #000000;
background-color: #ffffff;
}

.whiteonblue {
color: #ffffff;
background-color: #0000CC;
}

</style>

<script type="text/javascript">

function toggleLinkAppearance(){

if (this.className =="blackonwhite"){alert ('blackonwhite') //
this.className = "whiteonblue";

}

 else { alert ('whiteonblue') // this.className="blackonwhite";

}

}

</script>
</head>
<body>
<span id="item1" class="whiteonblue"
onMouseover="toggleLinkAppearance(this.id);">difference is a plus</span>
</body>
</html>

##############################


----- Original Message -----
From: Jeremy Brown <jeremy(at)localnetamerica.com>
To: HTML Writers Guild <hwg-techniques(at)hwg.org>
Sent: Friday, October 06, 2000 1:01 PM
Subject: Mouseover and CSS


> I am looking for code that will allow me to be able to highlight, or
> change the background color of, a hyperlink when mousing over it. When
> finished mousing over it, it would remain the same.  For instance:  I
> have a link with black text.  When mousing over it, I would like for the
> background to be highlighted blue, and the text color to change to
> white.  Then when I mouse over it I would like for the highlighting to
> go away, and the text color to return to black.  I know about the
> style=background-color: blue stuff, but I just haven't seemed to be able
> to get it to work the way I want.  I hope you all have some suggestions
> :-)
>
> Thank you much.
>
> --
> Jeremy Brown
> CTO,CIO
> Innovative Business Consultants, Inc.
> http://www.ibc2001.com
> USA: (937) 277-2000
> 1-800-398-3007
>
>
>

HWG hwg-techniques mailing list archives, maintained by Webmasters @ IWA