473,326 Members | 2,126 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

CSS image "mouseover"

al
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"
}
Jul 20 '05 #1
8 78154
al************@hotmail.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/
Jul 20 '05 #2
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)
Jul 20 '05 #3
On 9 Aug 2003 03:06:27 -0700, al************@hotmail.com (al) 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 found the following vertical menu the other day on a CSS website:

<HTML>
<HEAD>
<TITLE>CSS2 Vertical Rollovers</TITLE>
<STYLE>
H4 {
PADDING-RIGHT: 0.3em; PADDING-LEFT: 0.3em; PADDING-BOTTOM:
0.3em; MARGIN: 0px; PADDING-TOP: 0.3em; TEXT-ALIGN: center
}
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
}
DIV.menu A {
PADDING-RIGHT: 0.3em; BORDER-TOP: #000 1px solid; DISPLAY:
block; PADDING-LEFT: 0.3em; FONT-WEIGHT: bold; PADDING-BOTTOM: 0.3em;
MARGIN: 1px; WIDTH: 100%; COLOR: #00f; PADDING-TOP: 0.3em; TEXT-ALIGN:
center; TEXT-DECORATION: none
}
UNKNOWN {
WIDTH: auto
}
DIV.menu A:hover {
BACKGROUND: #fc0; COLOR: #00f
}
</STYLE>
</HEAD>
<BODY>
<DIV class=menu>
<H4>Menu Title</H4><A
href="http://www.websiteoptimization.com/products/">Products
<BR></A><A
href="http://www.websiteoptimization.com/services/">Services
<BR></A><A
href="http://www.websiteoptimization.com/about/">About <BR></A><A
href="http://www.websiteoptimization.com/contact/">Contact
<BR></A></DIV>
</BODY>
</HTML>
Jul 20 '05 #4
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" <al************@hotmail.com> wrote in message
news:f5**************************@posting.google.c om...
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"
}

Jul 20 '05 #5
On Sat, 09 Aug 2003 09:11:33 -1000, William Starr Moake
<ws*****@yahoo.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/
Jul 20 '05 #6
On Sun, 10 Aug 2003 08:22:32 GMT, "Andrew Thompson"
<an******@bigNOSPAMpond.com> wrote:
"Stephen Poley" <sb*****@xs4all.nl> wrote in message
news:vo********************************@4ax.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."
Jul 20 '05 #7
The voices are telling me that William Starr Moake <ws*****@yahoo.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
bo*********@boeing.com

There's plenty of room for all of God's creatures.
Right next to the mashed potatoes.
Jul 20 '05 #8
In article <f5**************************@posting.google.com >, al
<al************@hotmail.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
Jul 20 '05 #9

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Allen | last post by:
I am trying to add an additional photo/hyperlink to the company web site (I didn't create it) without any luck. The mouseover feature 'highlights' pics by swapping them with another pic using this...
1
by: charliewest | last post by:
I am trying use server controls or web controls to simulate the following behavior. I've an image wrapped w/in a link to create a rollover effect as if both elements we're one graphic: <a...
2
by: Morten | last post by:
Hi. My problem is that nearly all items in my dropdownlist is quite long and I would like to display the text in a textbox with a mouseover. When I move the mouse down the list I see the bg...
3
by: BKDotCom | last post by:
This has surely been answered somewhere multiple times, but... I'm guessing it's some sort of "bubbling" thing.... <STYLE> ..triggerarea { border:#00C solid 1px; } </STYLE> <UL ID="menu">
4
by: Manuel | last post by:
I think I can't find this on google/books because is soooooooo basic... This function assign a listner pointer to an image widget: ------------------------------------------------------ void...
1
by: mmcc128 | last post by:
Currently using the "document.images" to "preload" images - not for future pages, but for the page being loaded. I got it from http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm Its a...
2
by: mattgarvin | last post by:
Hello, I need a piece of javascript that will allow a form to be submitted when Enter is pressed for IE6 and 7, Firefox 2, and recent versions of Safari. It is for a login page that has two...
8
mikek12004
by: mikek12004 | last post by:
1) Script Title: Rich HTML Balloon Tooltip 2) Script URL :http://www.dynamicdrive.com/dynamicindex5/balloontooltip.htm 3) Problem Description: See this page General Music for links you can...
5
by: enaz | last post by:
Ok, so, this is my first post, if there is any info i am leaving out please tell me this is the function: function mouseOver(c) { alert(c); <!-- just for debugging--> if (c.src ==...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.