4 replies to this topic

[giambattista]

Hi,
many thanks for your answers to my previous question about nested tables.
Your support is a great resource!
I have almost completed re-writing my web site in order to comply with W3C standard, and I am very pleased.

I'm using GoLive 6.1 with Mac G4.

Now I have another question, this one about mouse rollovers.
My page buttons are made by text (I've avoided to use GIF images).
Obviously my buttons appear as underlined text because they are linked to other site pages. They work fine, but they look static.

Now I have visited the Metropolitan Museum of Modern Art web site and noticed that the buttons are made by text as well, but they work as rollovers, because the image appearance change.
First you see simple text (Normal), then an underlined text when the mouse is on top of it (Over), then again simple text with a frame when you click the mouse on (Down).

They are not GIF images rollovers, because if you change your browser font text dimension you can notice that these mouse rollovers change their dimension accordingly (ex. if you set the browser font dimension at 24pt they will appear that big).

My question is this: how to make mouse rollovers with text only, without using GIF images?
Is it possible?
The GoLive 6.0 user guide doesn't mention this point.

There are two main reasons I want to avid rollovers made by GIF images.
I have noticed that GIF image rollovers may not be compatible with W3C.
Visually, GIF image rollovers don't look "crispy and clear" as simple text buttons.

Thanks.
giambattista

Edited by Jill, 21 September 2006 - 09:22 PM.

[foamcow]

Use CSS to define different styles for link tags. Like so:

A basic example:

CODE

a { text-decoration:none; }

a:hover { text-decoration:underline; }

The first rule in the CSS code above will remove the underline from all <a> tags.
The second rule will put the underline back on them when the mouse "hovers" over them.

The second rule is called a psuedoclass. There are other psuedoclasses for <a> tags that you may also wish to use. Make sure you use them in the order shown:

a:link This is your "standard" link

a:visited This is the style to use on links that link to pages that have already been visited

a:hover The "hover" state

a:active The state of a link when you click it

Using CSS you can also change other style characteristics of your links, such as colour, background colour, font-weight, borders etc.

There are two main reasons I want to avid rollovers made by GIF images.
I have noticed that GIF image rollovers may not be compatible with W3C.
Visually, GIF image rollovers don't look "crispy and clear" as simple text buttons.

There is no reason a Javascript rollover script will prevent W3C validation although many people now use CSS to handle rollovers. There is certainly no reason why using a GIF should cause a page to fail validation.

Equally there is no reason a GIF image to look fuzzy. It's simply down to how well you create the graphic.

What you may find is that a Javascript rollover solution, if done the wrong way (i.e. links are defined within the script rather than the HTML) will mean a crawler will not be able to follow the links since a crawler does not execute any javascript that it finds.

[giambattista]

Hi foamcow,

thanks for your reply.
No doubt you got the point!
Unfortunately I ain't an HTML expert, I need more information, maybe a detailed example.
I have a Mac with GoLive 6.1.

I'm using an external CSS.
Please explain in plain words, the exact location, where I have to add the CSS code you have suggested.

a { text-decoration:none; }
a:hover { text-decoration:underline; }

In case I have to add the above code to my external CSS, please explain how to do it with an example.

The following is the HTML code of one of the links in my home page.

If I have to add the code you suggested to my HTML page, a clear example of how to change this "static" link in a rollover link is welcome.

I need to understand where to place the code you sugested in order to remove the underline from the link, and to put the underline back on the link when the mouse is over it ("hover").

<tr>
<td><span class="buttons"><a href="drawings.html"><font color=808080>drawings</font></a></span></td>
</tr>

I apologise for the ingenuity of my question.
Thanks again!
giambattista

[chrishirst]

Please explain in plain words, the exact location, where I have to add the CSS code you have suggested.

CODE

a { text-decoration:none; }
a:link { text-decoration:none; }
a:active{ text-decoration:none; }
a:hover { text-decoration:underline; }
a:active {border:1px solid #000000;}

Exacttly as it appears above.
Copy it & Paste it into your style sheet. No changes are needed to the HTML (other than getting rid of the deprecated <font> tags)

[giambattista]

Hi chrishirst
just added the code to my CSS style sheet.
The rollovers work GREAT!
Now my web site is complete and looks very fine!
Every page passed W3C validation.
Thanks a lot,
giambattista