Hi Steve,
You could do it all via css as follows:
Within your page, put the text in an <a> tag:
<a class="rollover">Text to display on rollover here</a>
Then in your css, you set the <a> to display block at an appropriate width and height for the image/text, display the image as a background image and move the text out of the way thusly:
a.rollover {
text-indent: -9999px ;
text-decoration: none ;
display: block ;
width: 100px ;
height: 100px ;
background: transparent url(/path/to/image.png) no-repeat left top ;
<other style declarations as necessary, e.g. text styles>
}a.rollover:hover {
text-indent: 0 ;
background: none ;
}HTH,
Mike
Steve T. wrote:
I do appreciate the suggestion!
However perhaps I was not clear: The image must NOT swap with another image. It must swap with text (you know,that you write in the .html file).
I created this text/image CSS rollover solution for this site: http://www.loyaltywise.com The fellah that hired me to make them sure liked them alot, I guess he just never implemented them:(
It's a shame too because the text image swap WOULD help, and here are the reasons why:
You can cut out loading an image file (for how ever many of these you have) and a nice chunk of JavaScript. I also think of it a bit like a CSS alt tag. Should be fine for text readers and all that 508 jazz. right?
But Dose it even work in all the browsers?
I am using a big spacer.gif to hold the left align text all the way over 300px (in the 500px wide div) so that it lines up with the page, or the container div, after the swap. The image is set to align left in the hover rule (placing it off the page) and the dive shrinks like 200px forcing the spacer gif over, that forces the text over.
Did I go about this correctly? I would like to find a cleaner way. Spacer.gif's are just so 1990. Here's the one that SHOULD work everywhere: http://www.plattdaddy.com/rollovers/hideshow2.htm
This is the "any where on the page" version. That I am not sure works in "any other browser" than Win IE 6 http://www.plattdaddy.com/rollovers/hideshow2.htm
Thanks Again, this list is great! Steve Tchorzewski
http://www.plattdaddy.com
______________________________________________________________________ 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/
______________________________________________________________________ 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/
