As I sit at my desk on this relatively dreary Wednesday morning, I can't help but still feel the need to continue this overlying dance into the heart of Chicago. I can't help but feel some sort of kinship with Roxy and her big dreams. Don't get me wrong, I'm not going to go out and murder someone to become a big star... not that it really works out all that well for her, so lesson learned! But hey, every girl has to be allowed to have her dreams, right? Well, I've always had the dream to do web design. So, imagine my embarrassment when I come to work for Mindfly and felt somewhat in the dark ages when it comes to how the big guys do stuff.
A great example of this is image replacement. Looking about on the web, there are a lot of different ways to do image replacement, and I'm happily going to factor it into finishing up our vector buttons (You were wondering when I was going to get back on topic, weren't you?). For the sake of making a meaningful button, I decided to add some text on top of our flower. You can put in whatever you'd like, and I just tried to put something cute and fun on that was simple. No need to be complex when you're learning the system, right? Remember when you go to save your image to Save for Web... and to save it as a PNG-24. This will ensure that it will retain the transparency. Also remember to save a copy with the hover on and the hover off. I named mine vectorFlowerHome.png and vectorFlowerHomeHover.png using the Camelback Method.
Rewind for a moment back to image replacement. Since I was clueless as to the uses of it, or how it worked, my first question was, of course "Why?" Why, indeed, when you can just use the images rather than going through (what seems to be) a complex process to instead have text that is then replaced by an image and requires more CSS and... Okay, deeeep breath. The reason for using image replacement is so that Google's algorithms can find the content on a site. If all they see is images (they aren't searching through the html for the long detailed image names that you've done similar to my own). If you're using an image for your company name or web page name or some name that's floating out there around in tiny molecules like it's hovering inbetween giant and mini chocolate bar size, then all Google is going to see is an image not the name of your company, or your web page, or whatever name you have floating out there in the void.
This is the point in which the lightbulb went off for me and hovered over my head. I hope that it is at least flickering up there for you, dear reader.
To start out your image replacement, now that you have your files all saved, you're going to need to have your html. You can see by Example 1 that all you really need to have to start with is a link.
Now, the idea behind this is, of course to have an image. We've already discussed why we're not using an image here. We want Google and other search engines to know that this is a link to the home page, hence the very obvious and not so subtle title. You have a few options for how you want to go about applying your image to this. You can give it an id and add id="home" to the html or a class="home" but since the link already has a title, I've decided we can just use the attribute selector to make things simpler.
In your <style> at the top, you'll want to add the following:
a[title="Home"],
a[title="Home"]:visited
{
display : block;
width : widthofyourimage
height : heightofyourimage
background: transparent url(yourimagelocation) no-repeat top left;
}
You can see all this CSS applied here in Example 2!
Now, to answer a few of those "Why" questions that are rolling around:
Why a and a:visited? This helps prevent some bugs from occuring in IE6, as well as applies the style both on the regular link and if someone has already been to the page. It basically ensures that the style will continue to work properly.
Why display block? Links are naturally an inline element so without giving it a display: block the width and height wouldn't be able to be applied properly and the link would still only focus around the text itself rather than the image. This means that you'd only see the top tip of your flower.
We're almost done, so bear with me! The next step is to apply your image replacement to the CSS. You can do this by simply adding underneath your background style in the CSS, the following: text-indent: -9999em;. What is an em? W3Schools has a nice explanation of it here.
You should now see the text removed from the screen and only the image remaining, per Example 3.
I know what you're thinking. "Well?! Does Billy win the case? Does Roxy get away with murder? How does it end?!" Please, stop with the choking motions. I can't type if I'm turning blue in the face. What you really want to know, dear reader, is how to apply that darned hover style, isn't it? A fittingly dramatic ending to a dramatic case.
Simply copy the CSS you used before to a new spot below it, remove the a[title="Home], and change the a[title="Home"]:visited to a[title="Home"]:hover and, last but not least, change the url in your background to the image that you want to be the hover. Your CSS should look something like the following:
a[title="Home"]:hover
{
display : block;
width : widthofyourimage
height : heightofyourimage
background : transparent url(yourimagelocation) no-repeat top left;
text-indent : -9999em;
}
Okay, so maybe it wasn't a dramatic ending after all... However, the Final Product is lovely and works just fine, so all thoughts of drama aside, I think we can say that court is now adjourned.
--
To see the previous discussions on vector button creation, go to:
Give 'Em the Old Razzle Dazzle (Making Buttons in Vector, Opening Argument)
Give 'Em an Act That's Unassailable! (Making Buttons in Vector, Cross-Examination)
