CSS image "mouseover"

Hi,

I've been trying to create a image mouseOver effect using CSS - is
this possible? Or will I have to use DIV tags or something along
those lines?

I've tried a number of things - the code below will work for the
border no problem, but I can't seem to get the SRC to work - is this
not an option in CSS?

Thanks in advance,
al


<a href="" class="abroad"><img src="./graphics/images/abroadBw.jpg"
border=1><br>abroad</a>

A.abroad IMG
{
BORDER-COLOR: white;
SRC: "./graphics/images/abroadBw.jpg"
}
A.abroad:hover IMG
{
BORDER-COLOR: black;
SRC: "./graphics/images/abroad.jpg"
}

alastairslater (AT) hotmail (DOT) com (al) wrote:

I've been trying to create a image mouseOver effect using CSS - is
this possible?

Depends on what you mean by that.

but I can't seem to get the SRC to work - is this
not an option in CSS?

If you need to ask, then you need to start learning CSS, instead of
imagining you know something about it. CSS does not work by making
programs guess what you want.

In most cases, image mouseover effects have been "traditionally" written
to make text change appearance, using JavaScript-dependent image swapping.
The CSS approach is to use text for textual links and to change the
properties (such as text and background color) of the elements.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

and then al said:

I've been trying to create a image mouseOver effect using CSS

A.abroad IMG {
BORDER-COLOR: white;
SRC: "./graphics/images/abroadBw.jpg"

There's no CSS property 'src'. You cannot do this in CSS and this is
deliberate and with good reason. An image in a page is page content and
CSS has nothing to do with content*, only how content is displayed.

Use javascript:

<img alt="Off alternate text" src="off.jpg"
onmouseover="this.src='on.jpg';this.alt='On alternate text';"
onmouseout="this.src='off.jpg';this.alt='Off alternate text';">

Remember that in abscence of javscript you will only get off.png.

If you havn't already got it, you need this in your head:
<meta http-equiv="Content-Script-Type" content="text/javascript">

(* apart from generated content, but lets not talk about that)

you can do css image rollovers but you dont really have the amount of
control that you can get with JS.

http://www.meyerweb.com/eric/css/edge/popups/demo2.html has a good tutorial
on what you can do.

Matt

"al" <alastairslater (AT) hotmail (DOT) com> wrote

Hi,

I've been trying to create a image mouseOver effect using CSS - is
this possible? Or will I have to use DIV tags or something along
those lines?

I've tried a number of things - the code below will work for the
border no problem, but I can't seem to get the SRC to work - is this
not an option in CSS?

Thanks in advance,
al


a href="" class="abroad"><img src="./graphics/images/abroadBw.jpg"
border=1><br>abroad</a

A.abroad IMG
{
BORDER-COLOR: white;
SRC: "./graphics/images/abroadBw.jpg"
}
A.abroad:hover IMG
{
BORDER-COLOR: black;
SRC: "./graphics/images/abroad.jpg"
}

On Sat, 09 Aug 2003 09:11:33 -1000, William Starr Moake
<wsmoake (AT) yahoo (DOT) com> wrote:

I found the following vertical menu the other day on a CSS website:
....
DIV.menu {
BORDER-RIGHT: #000 2px solid; PADDING-RIGHT: 0px; BORDER-TOP:
#000 2px solid; PADDING-LEFT: 0px; BACKGROUND: #fff7ad;
PADDING-BOTTOM: 0px; MARGIN: 1em; BORDER-LEFT: #000 2px solid; WIDTH:
100px; PADDING-TOP: 0px; BORDER-BOTTOM: #000 2px solid
}

Strewth. Welcome to the world of CSS soup. What's wrong with:

..menu { width: 100px; border: 2px solid black; padding: 0; margin: 1em;
background-color: #fff7ad; }

(other than the width in pixel units, of course).

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

On Sun, 10 Aug 2003 08:22:32 GMT, "Andrew Thompson"
<andrew64 (AT) bigNOSPAMpond (DOT) com> wrote:

"Stephen Poley" <sbpoley (AT) xs4all (DOT) nl> wrote in message
news:voubjv0vr62qj102i6o4dv76391k8e0e2r (AT) 4ax (DOT) com...

Strewth. Welcome to the....

Are you an Aussie, by any chance, Stephen?

[ For those unfamiliar with it, 'Strewth' is an
expression commonly used by Australians.
It is an abbreviation of "God's Truth" -

Similar to "God's miserable teeth" from J. P. Donleavy's hysterically
funny novel "The Ginger Man."

The voices are telling me that William Starr Moake <wsmoake (AT) yahoo (DOT) com>
wrote on 10 Aug 2003:

[ For those unfamiliar with it, 'Strewth' is an
expression commonly used by Australians.
It is an abbreviation of "God's Truth" -

Similar to "God's miserable teeth" from J. P. Donleavy's hysterically
funny novel "The Ginger Man."

One of my family's favorite expressions, particularly when we're a little
creaky, is "God's wounds, madam!" -- we do our best to mimic the way
Keith Michell delivered that line in the _6 Wives of Henry VIII_ series.
--
Bob Crispen
bob.crispen (AT) boeing (DOT) com

There's plenty of room for all of God's creatures.
Right next to the mashed potatoes.

In article <f5a0f103.0308090206.4bf7cc5c (AT) posting (DOT) google.com>, al
<alastairslater (AT) hotmail (DOT) com> wrote:

Hi,

I've been trying to create a image mouseOver effect using CSS - is
this possible? Or will I have to use DIV tags or something along
those lines?
snip

You can use z-index's to change the layering of objects. Do some
research on it.

Mach