Html image replace with css image on hover

techmichelle · October 28, 2010, 4:29pm

Hi
Been playing a bit, trying to get a couple sites to look good on mobile and still have some fun when on a pc.
When I hover the image shows up to the left, and changes from inline.

css

#nav ul
{
}
#nav ul li {display: inline;}
#nav ul li a{
text-decoration: none;
padding: 5em 1em;
}
#nav ul li a img {border: none;}
#nav ul li a:visited {}
#nav ul li a:hover em {display: none;}
#nav ul li a#home:hover span{
background: url(1/2.gif) no-repeat;
display:block;
padding: 5em 1em;
}
#nav ul li a#members:hover span{
background:url(1/3.gif) no-repeat;
display:block;
padding: 5em 1em;
}

system · October 28, 2010, 5:50pm

using images for menu items screws people who browse with images off. You should be using a image replacement technique like gilder-levin.
Those are presentational images, they shouldn’t be in the markup in the first place.
You are making something simple WAY more complex than necessary… including the pointless DIV around it.

So first order of business is to neuter down the markup to something a bit leaner getting those images out of the markup.


<ul id="mainMenu">
	<li class="home"><a href="/">Home<span></span></li>
	<li class="members"><a href="members.html">Members<span></span></li>
</ul>

From there we just


#mainMenu {
	list-style:none;
	overflow:hidden;
	width:100%;
	font:normal 14px/16px arial,helvetica,sans-serif;
}

#mainMenu li {
	display:inline;
}

#mainMenu a {
	display:-moz-inline-block;
	display:-moz-inline-box;
	display:inline-block;
	position:relative;
	overflow:hidden;
	padding:8px 0;		
	text-align:center;
}

#mainMenu .home a {
	width:128px;
}

#mainMenu .members a {
	width:192px;
}

#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
	font-weight:bold;
}

#mainMenu a span {
	position:absolute;
	top:0;
	width:1024px;
	height:64px;
	background:url(images/mainMenu.png) 0 0 no-repeat;
}

#mainMenu .home a span {
	left:0;
}

#mainMenu .members a span {
	left:-128px;
}

#mainMenu a:active span,
#mainMenu a:focus span,
#mainMenu a:hover span {
	top:-32px;
}

Using a single image – stack your buttons horizontally in the one image, and put the hover states as a second row below the first.

If you post up the images you are trying to use, I can make a working example page for you of this.

Oh, and if you were trying to make the images show up on handhelds that ignore the CSS based images, DON’T!!! It chews up the handhelds memory pretty much ruining the user experience on those devices.

system · October 28, 2010, 6:21pm

with Shea Enhancement.

system · October 28, 2010, 6:57pm

unnecessary if they are menu anchors, in fact you usually DON’T want the alt-text on them since they should be containing text as images equal to the text hidden underneath.

Really if you ‘need’ img alt text with a image replacement, it’s someplace you shouldn’t be using image replacement in the first place! ALT is for images off, not some goofy tooltip… We have images off text using image replacement. Goofy tooltips is the TITLE attribute’s job – and there’s no reason to do that on a menu unless you have the wrong text in your anchors and/or image replacements.

Really you are using it to replace TEXT… so why should it behave like a content IMG? Never understood the point of the Shea enhancement on that count alone. If we were just showing the text underneath it wouldn’t have (nor would we want) the alt text tooltip, would it?

system · October 28, 2010, 7:13pm

‘alt text’ is… ‘alt text’?

let’s say, for the sake of argument, “there’s no reason to do that on a menu”. image replacement techniques aren’t just for menu anchors. but, keep in mind that the ‘alt text’ as i know it isn’t redundant.

there was life before accessibility came to steal the scenery. accessibility didn’t really invented anything new. the ‘alt text’ over a piece of text, replaced in our case by an image, usually completed in some way the need to resort to a shorter text (or describe a graphics) for something.

so, ‘alt text’, which is really the value for title, a tool tip, can provide valuable info. w/ or w/o resorting to images over text. on any element.

system · October 28, 2010, 7:25pm

IF I’m understanding you properly (and “completed in some way” is total gibberish I cannot decipher) you are pointing at the only scenario where the title attribute makes any sense – conveying more information than the content of an element can.

Problem with that is I’ve always said if the content of an element doesn’t convey the full meaning, it’s the wrong content in the first place!

… and in the case of image replacement it IS redundant BECAUSE YOU ARE PUTTING THE IMAGE OVER THE TEXT. If the image does not convey the same meaning as the text it is going over, It’s the wrong image!

Take the original:

The alt text should be there so images off you know what it is – though the text ‘link’ and that it might go to a ‘page’ is redundant since it’s inside an anchor and the anchor should be conveying either visually or by the screen reader that it’s a LINK that might actually go somewhere.

In my rewrite:

All the information that needs to be conveyed is there. An anchor that takes you home. Images off/CSS on or CSS off you’ll see the text “home” – that’s what alt text is for. Images off users. That some other browsers (IE) use it for a tooltip does not mean that’s what it’s for – and many developers have gone out of their way to make the IE tooltips and other stuff (like the img menu) NOT appear on their images when the images are PRESENTATIONAL.

Exactly the situation we have here. The images are presentational affectations applied to the text, as such they should NOT behave like IMG tags in the first place! If we wanted them to, they’d be IMG tags. That would be like trying to find a way to make our border images have alt text too.

The WDG’s HTML reference page explains it best:

The required ALT attribute provides alternate text for those not loading images. Effective ALT text should generally give the function of the image rather than a description of the image. For example, ALT=“Welcome to XYZ Corp.” would be more appropriate than ALT=“XYZ Corp. Logo” for a company’s logo on its welcome page. Good ALT text is crucial to the document’s accessibility for users who do not load images; see Use of ALT texts in IMGs for a thorough discussion.

As to slapping TITLE on it and calling it an enhancement, don’t you find title tooltips a bit annoying when dumbasses put them on things like menus? I mean every time I see code like this:

I feel like smacking whoever did it around like a baby-back *****. Here’s a tip, if the title attribute of an element has the exact same content AS the element it’s on, there’s no reason to be using the title attribute. See the millions of bandwidth hogging garbage turdpress templates for examples of that idiocy in action.

system · October 28, 2010, 7:40pm

sorry, my father was today to some country-side relatives to help them “pull the grape juice” and he brought back a little fresh grape juice that, as it seems, is inclining a little towards young grape wine “completing in some way” was my aim.

sometimes it can prove to be useful. or harmful. you just need to find the right use for it. all i’m saying is that the image replacement technique could replace a text with an icon. a tool tip text might find its place in this scenario. (hint: look at the smilies - it’s text replaced by an image, having a tool tip)

no argument there. or perhaps a little a rain of tool tips is bad. but i do find some tool tips to be helpful. no difference with the web. and i mentioned about ‘alt text’ not being redundant in order to qualify.