Comments on: Mouse Rollovers http://www.mindarch.com/betweencodeblog/2006/02/06/mouse-rollovers/ Not as risque as between the sheets, but of interest to designers. Wed, 7 Jan 2009 13:56:00 +0000 http://wordpress.org/?v=1.5.1.3 by: Charles Harris http://www.mindarch.com/betweencodeblog/2006/02/06/mouse-rollovers/#comment-28 Tue, 21 Nov 2006 15:43:40 +0000 http://www.mindarch.com/betweencodeblog/2006/02/06/mouse-rollovers/#comment-28 I personally have an issue with the use of images for navigation. I understand the occasional need, however it should still be done through the use of css not html. Rather than use code like: for a link I would suggest something more along the lines of: HTML [code] Link One Link Two Link Three [/code] CSS [code] div#your_id_name_here{ border-right: 1px solid #fff; height: 210px; width: 150px; } div#your_id_name_here ul{ list-style: none; margin:0; padding:0; } div#your_id_name_here ul li{ list-style: none; } div#your_id_name_here ul li a{ background-image url("image url here") no-repeat; text-decoration: none; } div#your_id_name_here ul li a:hover{ background-image url("image url here") no-repeat; text-decoration: none; } div#your_id_name_here ul li:visited{ background-image url("image url here") no-repeat; text-decoration: none; } [/code] While this is not as quick as the previous example (using html) but it is compliant with w3c standards. Note: my sample here is not functional, but relays the idea of what and how to accomplish the same task. I personally have an issue with the use of images for navigation. I understand the occasional need, however it should still be done through the use of css not html. Rather than use code like: for a link I would suggest something more along the lines of:
HTML
[code]

Link One
Link Two
Link Three

[/code]

CSS
[code]
div#your_id_name_here{
border-right: 1px solid #fff;
height: 210px;
width: 150px;
}

div#your_id_name_here ul{
list-style: none;
margin:0;
padding:0;
}

div#your_id_name_here ul li{
list-style: none;

}

div#your_id_name_here ul li a{
background-image url(”image url here”) no-repeat;
text-decoration: none;
}

div#your_id_name_here ul li a:hover{
background-image url(”image url here”) no-repeat;
text-decoration: none;
}

div#your_id_name_here ul li:visited{
background-image url(”image url here”) no-repeat;
text-decoration: none;
}

[/code]

While this is not as quick as the previous example (using html) but it is compliant with w3c standards. Note: my sample here is not functional, but relays the idea of what and how to accomplish the same task.

]]>