PDA

Click to See Complete Forum and Search --> : rollover images

MrMJS
04-05-2007, 09:46 AM
are rollover images (used for navigation) search engine friendly?
Centauri
04-05-2007, 11:43 AM
When applied correctly as background images using css, then YES

Cheers
Graeme
Demon
04-06-2007, 08:26 AM
To help make them search engine friendly, you can enusre that each image has a height and width setting, as well as an alt tag. :)

background images using css

Could you explain this a bit more please?
Centauri
04-06-2007, 08:37 AM
Navigation images, and especially rollover images, are visual presentation. Therefore, such images have no place in the html (which should be content) and should be applied as background images. The navigation links themselves should always be text links for accessibility, and quite commonly set up as an unordered list for semantics. The styled visual look of a menu is quite often completely different to what one would expect from the html.

Cheers
Graeme
Demon
04-06-2007, 12:23 PM
Ok, so if how would I get a rollover image to work, using only CSS? And by this I mean images as the links, not text. I just stick it in the markup at present.
Centauri
04-06-2007, 09:21 PM
The best way to do css rollovers is to first combine the normal and rollover images into one image - such as the example images I knocked up and are attached to this post.

As the images are presentation, they shouldn't be in the html. Consider this basic unordered list of links with a few classes and an id defined. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Rollover demo</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<ul id="nav">
<li><a href="#" class="navlink1">Link 1</a></li>
<li><a href="#" class="navlink2">Link 2</a></li>
<li><a href="#" class="navlink3">Link 3</a></li>
<li><a href="#" class="navlink4">Link 4</a></li>
</ul>
</body>
</html>

Looking at this without any style will show exactly what it is - a list of links, completely accessible by screen readers, search engines etc. However, if we then apply this style.css file * {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
p {
margin: 10px 0;
}
#nav {
width: 600px;
height: 50px;
margin: 20px auto 0;
}
#nav li {
list-style: none;
float: left;
}
#nav a {
display: block;
width: 150px;
height: 50px;
font-size: 1px;
text-indent: -1000px;
background-position: left top;
}
#nav a:hover {
background-position: left bottom;
}
#nav .navlink1 {
background-image: url(btn_one.jpg);
}
#nav .navlink2 {
background-image: url(btn_two.jpg);
}
#nav .navlink3 {
background-image: url(btn_three.jpg);
}
#nav .navlink4 {
background-image: url(btn_four.jpg);
}
we have something completely different visually.

Note the css starts with zeroing out browser margin / border differences, setting the base font for the body, and setting default paragraph margins - something that should be common to any css file.

The <a> link elements are styled as blocks and given the correct size to suit the graphics. The text is made invisible by reducing its size and indenting it way off the left of the page. Via the classes, each link gets its background graphic. The hover simply moves the background position to the bottom, revealing the alternate graphic.

This demo menu has been set up as a horizontal one by floating the <l1>s left. The #nav <ul> is then given the appropriate size and auto side margins centre it horizontally on the page.

Cheers
Graeme
Demon
04-07-2007, 08:02 AM
Cheers Graeme. I think I'll have to have a play around with that coding, as at present I have a lot of markup dedicated to a navigation menu.

Also, by doing it this way, does it mean you don't need the Javascript that comes with Rollovers if you do it in Dreamweaver?
Centauri
04-07-2007, 08:14 AM
Also, by doing it this way, does it mean you don't need the Javascript that comes with Rollovers if you do it in Dreamweaver?

That is correct, nor do you need any of that preload javascript. I also use Dreamweaver, but DON'T let it produce layer or action coding - use it to streamline code writing in code view. The design view is useful for looking at element relationships (although sometimes take that with a grain of salt) or inputting screen text (so that it marks up special characters properly), but no more than that.

Cheers
Graeme
Demon
04-07-2007, 08:27 AM
Cool. Is it good to make navigation menu's this way, even if they don't rollover?
Centauri
04-07-2007, 08:33 AM
I always do menus that way - you can turn them into anything through styling. Have a look at http://www.cssplay.co.uk/menus/index.html and http://css.maxdesign.com.au/listamatic/index.htm for more examples of what can be done.

Cheers
Graeme
Demon
04-07-2007, 08:54 AM
There's some great menu's on there, thanks for those links.

I use this dropdown menu: Linkage (http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm)

Is that any good?