Brice Burgess schrieb:
Klaus Hartl wrote:
Brice,
I think having two images in the HTML source is pretty ugly. I once did
an "Image image Replacement" for inputs with type image. That way you
can easily use pure CSS hovers and use CSS sprites to avoid traffic. It
also makes skining much easier, as the appearance is changed in the
style sheet again only.
If you're interested I'm going to search for the snippet. Or write a
post about it. It worked pretty well cross browser.
-- Klaus
Klaus,
A sprite sounds promising & non ugly. Vs. changing the background url,
you just change the background-(left|right|top|bottom) value.. which I
don't think will trigger a request.
Keep me posted! :)
~ Brice
Here we go...
First the CSS, I did that for a search icon: The icon was 19 x 19
px in size and had all states in one (normal, hover/focus, active -
there is a fourth state which was needed vor visited links, attached)
plus you need a neutral icon (attached) for plain HTML:
/* image-image replacement, neutral icon is used for plain HTML - no
need for changing HTML if icon shall be replaced */
#search .image {
overflow: hidden;
padding: 0 0 0 19px;
width: 0;
height: 19px;
background: url(icon_search.gif) no-repeat 0 -150px; /* use
neutral or the same icon is used for plain HTML - no need for changing
HTML if icon shall be replaced */
}
#search .image:hover, #search .image:focus { /* @ EOMB */
background-position: -100px -50px;
}
#search .image:active { /* @ EOMB */
background-position: -150px 0;
}
/* IE: */
* html #search .image {
width /**/: 19px; /* @ IE 5 (different box model), CSS Comment Hack
- http://www.info.com.ph/~etan/w3pantheon/style/commentbugs.html */
}
Haven't tested that in IE 7, has been a little while since I made this,
needs some tweaking maybe... :hover in IE 6 also only works with a
little help of JavaScript.
Here's the (essential) html:
<div id="search">
... <image class="image" type="submit"
src="icon_search_neutral.gif" alt="Search" />
</div>
Cheers, Klaus
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
