> Date: Wed, 24 Aug 2005 14:31:00 +0200 > From: "dimpie" <[EMAIL PROTECTED]> > To: <[email protected]> > Subject: [css-d] image swap on link > Message-ID: > <[EMAIL PROTECTED]> > Content-Type: text/plain; > charset="iso-8859-1" > MIME-Version: 1.0 > Content-Transfer-Encoding: quoted-printable > Precedence: list > Message: 28 > > I have a link which exists only of an image, > no text involved. If I hover over it I want > to show a different image. Seems simple and > probably it is. > > This is the webpage: > http://www.glassbox.nl/test/concept.htm > > The thing is I know how to handle links which > have both text and an image. I create one image > that contains both the icons. For a:hover I > change the background position of the image so > it moves to the second icon. > > Maybe this can be done also in this situation, > but the thing is, when people turn my stylesheet > off, there is no visible link. Because with no > page style it doesn't show the background image > and there is not text to click on. > ... > Any help would be appreciated. > Dimpie. > ------------------------------
Dimpie, Below is a example that should help if I am understanding you correctly. I have tested it with newer versions of Firefox and IE, and have been told older versions fine. I use this image swapping technique to establish a default black and white (low resolution) image and to also swap that default with a more colorful (high resolution) image but only when CSS is found. Adding the a:hover rule for your needs seems to work just fine. I placed the code below in a file named ff-img-swp-hov.html (and link references itself) and code references three same sized 300x30 images: ff-logo-lofi.gif (default, black and white) ff-logo-hifi.gif (colorful CSS image) ff-logo-hover.gif (hover CSS image) Having a basic black and white version of the image might also be useful when printing page. Brad Sturtevant Principle Technologist Sturdyworks - Pasadena <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> <?xml version="1.0" encoding="EUC-JP"?> <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en-us" lang="en-us"> <head> <title>Image Swap on CSS and Hover</title> <meta http-equiv="Content-type" content="text/html; charset=EUC-JP" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Content-Language" content="en-us" /> <style type="text/css"> div#logo { float: left; width: 300px; height: 36px; /*border: 1px solid black;*/ } div#logo a { display: block; height: 36px; background: url(./ff-logo-hifi.gif) no-repeat; overflow: hidden; } div#logo a:hover { display: block; height: 36px; background: url(./ff-logo-hover.gif) no-repeat; overflow: hidden; } div#logo img { visibility: hidden; } </style> </head> <body> <div id="logo"> <span><a href="./ff-img-swp.html"><img src="./ff-logo-lofi.gif" width="300" height="36" alt="Logo" /></a></span> </div> </body> </html> ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
