I am trying to find a good solution for this. We need to use images not text for our links to make sure our font stays true the link will be a jpg or giff with gray text but when hovered over it need to show the same jpg or gif but we have changed the text to orange is there a techniqure for this.....
This can probably be done with JavaScript. Maybe try something like this: Put this in the <head> or in external .js file. <SCRIPT LANGUAGE="JAVASCRIPT"> <!-- function roll(img_name, img_src) { document[img_name].src = img_src; } //--> </SCRIPT> Put this where the images goes. <A HREF="subpage.html" onmouseover="roll('sub_link', 'firstdown.gif')" onmouseout="roll('sub_link', 'firstup.gif')"> <IMG SRC="firstup.gif" width="42" height="14" BORDER="0" ALT="button will change on hover" NAME="sub_link"> </A> Boulder
The above method is pretty oldschool, and useless if Javascript is disabled. Nowadays you just need a couple declarations in CSS to get this to work (rollover).. swapping the background on hover basically. Demo below http://www.soulscratch.com/playground/css/rollovers/
While soulscratch's solution works, I use a modified aproach. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>dropdowns | css</title> <style type="text/css" media="screen"> *{padding:0; margin:0;} body { margin:5em; } a#operating-system { width:50px; height:50px; display:block; background:url(rollover.gif) no-repeat bottom; text-indent:-999em; border:1px solid black; } a#operating-system:hover { background:url(rollover.gif) no-repeat top; } </style> </head> <body> <a href="#" id="operating-system"><span>foo</span></a> <p>hover over the link above and see what happens.</p> </body> </html> Code (markup): Use it with the image below. The only difference is that the rollover effect is all on the same image, and I am just changing the background position of that image. Basically I'm sliding the image so that a different part of the image is visible. Thus both the first image and the rollover image are loaded at the time the page loads. This makes it so that the hover effect is instantaneous. If you change the background image to a different image when hovered, the rollover image is not loaded when the page loads, and it will disappear for a short time until the rollover image is loaded. Its kind of annoying.