qpmarl blog

Here's how the changing text in my links section work:

It's all HTML with CSS. I use an inline style section rather than a separate page. Go ahead and view the source of my blog to see what I'm talking about and do a google search for a CSS reference or tutorial.

I came up with the changing text thing on my own back when I was learning CSS (on my own). I haven't done any CSS or Web development since creating my current blog template (oh, maybe a few modifications to the template every now and then). So I had to take a look at it to remind myself how it works.

There's a built-in hover class for link tag (the a tag). This is some kind of virtual class or something, like a:visited for links that are in the recent browser history. hover works by treating any link that the mouse is over as a hover class. It's really easy to use this to change the color (or any other property) of the link text. Changing the text itself is a bit trickier, but not much.

I made two new classes (you can do this with CSS) called on and off they are classes of the span tag within the a tag. This is where the magic is.

a span.off {color: #000;display: none;}
a:hover span.off {display: inline;}
a span.on {display:inline;}
a:hover span.on {display:none;}

Normally, the on object is displayed and the off object is not displayed, but the mouse pointer reverses this. With this code in the style section of the page, all that is needed is to invoke the proper classes within the links. My links look something like this (it's hard to get the blogger editor to display html tags properly - it's always trying to interpret them as actual tags. I added spaces around the <'s and >'s to prevent this.)

< class="block" href="URL" >< class="on">some text< / span >< class="off">some other text< / span >< / a >

This is just a few simple tags, a link with some span's in it. Without the CSS code above, both spans would display normally. With it, only one or the other will be displayed depending on whether the mouse is over the link or not.

The link's block class changes the link from an inline object to a block object with a specified width. This ensures that the mouse will be within the off class if it is within the on class and I don't have to worry about the length of the text. Otherwise, it would be possible for the off link to be shorter, and so the mouse may not be over the link when it is off though it is over the link when it is on. This would cause the state to switch very rapidly if the mouse were in the right position. You can see that on my page, there is a wide area past the text which also causes the link to change - this area is part of the link and you should be able to click on it to follow the link (though I wouldn't guarantee this in IE) .

here's a link for you to play with that uses the css code. Try to use it in comments... I don't know if it will work.

Gmail The best webmail available

In the blogger composer preview, this code does not work because it is not displayed with my template, so the CSS code isn't there. This reveals a flaw with my current setup. If, for some reason, the CSS isn't used, both spans will be displayed. I need to add a third class that is never displayed (in my system) which will act as a seperator if they are both displayed(without the CSS).