473,385 Members | 1,734 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,385 software developers and data experts.

image mouseover->hover

Having googled myself silly, I now ask, if only to confirm my conclusions
Is it possible to emulate the <javascript>mouseover in css, to replace link
images with an alternate?

Having asked, I now return to google, in case I missed heaps. ;)

Regards,
PhilM
Jul 20 '05 #1
8 38768
PhilM <ph***@nospam.com.am>:

Is it possible to emulate the <javascript>mouseover in css,
to replace link images with an alternate?


a:link {background-image: url(foo)}
a:hover {background-image: url(bar)}

That hard?

More elegant: <http://www.alistapart.com/articles/sprites/>.

--
"If you never fall, you dance in constant fear of falling."
Suzanne Farrell
Jul 20 '05 #2
Is it possible to emulate the <javascript>mouseover in css,
to replace link images with an alternate?


a:link {background-image: url(foo)}
a:hover {background-image: url(bar)}

That hard?

no that way is not that hard, but, it still requires text. This only alters
the background, not the foreground, which I am trying to do :(

Regards,
PhilM
Jul 20 '05 #3
On Sat, 9 Oct 2004 21:22:18 +0930, PhilM <ph***@nospam.com.am> wrote:
> Is it possible to emulate the <javascript>mouseover in css,
> to replace link images with an alternate?


a:link {background-image: url(foo)}
a:hover {background-image: url(bar)}

That hard?

no that way is not that hard, but, it still requires text. This only
alters
the background, not the foreground, which I am trying to do :(


If it's foreground, then it's content, and therefore not the role of CSS,
which is merely optional styling of content. HTML itself, of course,
cannot swap the images. The JS solution fails in non-Javascript
environments. And if the hover image tells the user what the link is, and
the normal image doesn't, well, that's mystery-meat design and not a good
choice beyond the technical considerations. We need something which is
either foolproof and will work or degrade well in all situations, or is
not foolproof but still cannot fail no matter what a browser does with it.

So, the only solution I see is to make sure the default image seen in
non-Javascript environments is effective alone, and users with Javascript
working will get the optional effect. (Perhaps, and I don't know enough
about it to say for certain, some server-side scripting might be able to
do this. I'd have no clue how to accomplish this, I'm simply acknowledging
that I cannot be definitive concerning this area.)

Incidentally, it very well may be that the design constraints under which
you're trying to solve this problem would make a viable solution
impossible. Be sure to consider that carefully.
Jul 20 '05 #4
"PhilM" <ph***@nospam.com.am> wrote:
> Is it possible to emulate the <javascript>mouseover in css,
> to replace link images with an alternate?


a:link {background-image: url(foo)}
a:hover {background-image: url(bar)}

That hard?

no that way is not that hard, but, it still requires text. This only alters
the background, not the foreground, which I am trying to do :(


span#decoimg:before{content:url(a.png)}
span#decoimg:hover:before{content:url(b.png)}

<span id="decoimg"></span>

Not supported by IE.

--
Spartanicus
Jul 20 '05 #5
Neal <ne*****@yahoo.com> wrote:
If it's foreground, then it's content, and therefore not the role of CSS,


Except when the image is strictly decorative.

Decorative foreground images enable UAs to collapse the space they
occupy when image display is disabled.

--
Spartanicus
Jul 20 '05 #6
Neal wrote:
If it's foreground, then it's content, and therefore not the role of
CSS, which is merely optional styling of content. HTML itself, of
But of course you can control the size of the space and
put no "content" in it, in which case the background effectively
becomes the content. I'm not saying I recommend that ....
course, cannot swap the images. The JS solution fails in non-Javascript
environments. And if the hover image tells the user what the link is,


And the CSS solution fails in non-CSS environments.
--
Wes Groleau
Alive and Well
http://freepages.religions.rootsweb.com/~wgroleau/
Jul 20 '05 #7
PhilM wrote:
> Is it possible to emulate the <javascript>mouseover in css,
> to replace link images with an alternate?


a:link {background-image: url(foo)}
a:hover {background-image: url(bar)}


This only alters the background, not the foreground


If you are using images of text, then you should switch to stylized
plain text links. Variations of the above rules can work beautifully to
acheive almost any effect you can do with JavaScript. The technique is
often called "CSS buttons" and there are lots of sample and tutorial
sites that cover it.

If you are using pictures _instead_ of text, e.g. a picture of a house
instead of the word "home", then you probably have other issues to
resolve as someone else already mentioned.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Jul 20 '05 #8
Will look into using a bit of charm to make life easier ;)

.... and change some minds on what they 'want' ...

Thanks again.
Jul 20 '05 #9

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

Similar topics

1
by: Jason Heydasch | last post by:
I was at 1800flowers.com today and when I clicked on an item to go to the product page for that item I noticed a script I have to find! If you hover over the small image of the product, a larger...
3
by: Michael Eisenstadt | last post by:
What are the coding options for client-side image size changing? I want the viewer to be able to switch between two different sizes of the same image with his/her mouse. Thanks in advance for...
2
by: Paul | last post by:
Hi If I hover over an image the IE toolbar for saving/printing/sending appears. How can I suppress this without forcing user to disable the function. Cheers, Paul.
2
by: una | last post by:
Hi I hope someone can help me with my problem on the existing navigation menu of my hp: http://www.taekwondo-leveste.de/ipf/ . I would like the writing to either change the size or the color as...
1
by: Martin Pöpping | last post by:
Hello, I want to design a mouseover text using the following example: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="de"> <head>...
3
by: Annette Acquaire | last post by:
I have and image map with a dozen hotspot links on it that I'm trying to get to open a new image over existing one on mouseover of each COORD. The only thing I was able to do was swap image on...
5
by: Harris Kosmidhs | last post by:
I have two questions for my site http://www.solsoft.gr/index.php (it's in greek but don't mind ;-) ). 1)Div for #logo (top-left image) and the menu (left side) is 200px. Why isn't the same in...
2
by: andrewtayloruk | last post by:
Hi, i'm pretty new to CSS and html so please go easy on me. I'm trying to make a menu, the idea is that when you hover over the images in the menu they glow. To do this i have set up the...
10
by: tomasio | last post by:
Dear Pros, How can I achieve a nicer hover-effect for the image tomasio.design on the bottom-right of my webpage? I am using the class ".footer a:hover" for a CSS-based mouseover-effect but this...
1
by: warder21 | last post by:
Hi All, Not sure wether this is a css issue or javascript but here goes. I am trying to make some html <p> tag text highlight (change colour) when hovering over an image that is relevant to...
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...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

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.