In my summer job I ran accross a similar problem and reached a slightly different solution. Keep in mind though that I was designing only for IE6 (not a project that went to the web) so I was free of many constraints and constrained in many other ways.
I kept the background image just one whole image with the actual lettering (non glowing). I made an invisible link over the lettering (absolutely positioned) that contained a hidden (visibility: hidden;) image (the glowing lettering) that was shown by calling a javascript function when the mouse over rolled over (onmouseover) and hid it when it was rolled out (onmouseout).
Of course this doesn’t rely purely on XHTML and CSS and I didn’t really look into accessiblity and other such issues, but it was definely a lot less code than this technique and seems sound. I am sure with just a little more code this can be made accessible as well.
I really liked this article as it solved a problem for me with Elastic Design (see the “Elastic Design” article else where on this site). I was trying to create an elastic design where the images would scale in proportion to the rest of the text on the page. The problem was the specs required that certain images be clickable via image maps. How do you get an image map to scale when all of the coords are specified in pixels? Answer, you can’t. This method does however!
I’m including my sample code below so I can point out one minor problem I found in IE6. For the longest time, I couldn’t seem to click on the area I had defined except when I was directly over the small border I had made around the link (so I could see it). If I removed the border, I couldn’t click on the link at all! The answer seemed to lie with the background of the link. As soon as I set one, I could click on the area. We use a single transparent GIF in our pages for tracking and other purposes, which made me decide to try using it as a transparent background for the link. This solved the problem. Here’s the code in case any one else wants to review it.
If you use Safari, try the Activity window. It gives a list of all open URLs and components of those pages so you can get to the stylesheet (and anything else) quickly.
This is fantastic! I can’t believe I didn’t already know this. I’ll use this daily.
Copy & paste the code below to embed this comment.
kiji
I have coded a similar imagemap with text and image pop-ups) on www.jumbotours.co.jp/e/index.html but i’m puzzled with IE 6.0 behaviour. The list items are really close together and sometimes another underlying list/link show up through the pop-up. Any ideas?
67 Reader Comments
Back to the ArticleIndrajit Khare
In my summer job I ran accross a similar problem and reached a slightly different solution. Keep in mind though that I was designing only for IE6 (not a project that went to the web) so I was free of many constraints and constrained in many other ways.
I kept the background image just one whole image with the actual lettering (non glowing). I made an invisible link over the lettering (absolutely positioned) that contained a hidden (visibility: hidden;) image (the glowing lettering) that was shown by calling a javascript function when the mouse over rolled over (onmouseover) and hid it when it was rolled out (onmouseout).
Of course this doesn’t rely purely on XHTML and CSS and I didn’t really look into accessiblity and other such issues, but it was definely a lot less code than this technique and seems sound. I am sure with just a little more code this can be made accessible as well.
Jens Stavnstrup
Nice article. Unfortunalley it will only work in IE 5 and 6, if image is located in the upper-left corner.
If you set the body.margin to 50px, then it does not work. Althoug the CSS Map should be relative to the parent div object.
Keith Pepin
I really liked this article as it solved a problem for me with Elastic Design (see the “Elastic Design” article else where on this site). I was trying to create an elastic design where the images would scale in proportion to the rest of the text on the page. The problem was the specs required that certain images be clickable via image maps. How do you get an image map to scale when all of the coords are specified in pixels? Answer, you can’t. This method does however!
I’m including my sample code below so I can point out one minor problem I found in IE6. For the longest time, I couldn’t seem to click on the area I had defined except when I was directly over the small border I had made around the link (so I could see it). If I removed the border, I couldn’t click on the link at all! The answer seemed to lie with the background of the link. As soon as I set one, I could click on the area. We use a single transparent GIF in our pages for tracking and other purposes, which made me decide to try using it as a transparent background for the link. This solved the problem. Here’s the code in case any one else wants to review it.
<html>
<head>
<title>Untitled</title>
<style>
body {
font: 60%;
color: #000000;
margin-left: 50px;
}
div {
margin: 0px;
padding: 0px;
}
div#Charlize {
width: 13.8em;
height: 6.6em;
position: relative;
}
img#Charlize {
width: 13.8em;
height: 6.6em;
}
#menu {
position: relative;
}
#menu a i {
visibility: hidden;
}
#menu a {
position: absolute;
text-decoration: none;
border: solid 1px red;
background: url(“s.gif”);
width: 3.75em;
height: 1em;
top: 1.2em;
left: 7em;
}
#menu a:hover {
border: solid 1px yellow;
}
</style>
</head>
<body>
<div id=“Charlize”>
<div id=“menu”>
eyes
</div>
hp_spotlight_CharlizeTheron1.jpg
</div>
</body>
</html>
Chuck Bradley
In “Separate CSS file”…, Gabe wrote:
This is fantastic! I can’t believe I didn’t already know this. I’ll use this daily.
Thanks for the valuable hint Gabe.
kiji
I have coded a similar imagemap with text and image pop-ups) on www.jumbotours.co.jp/e/index.html but i’m puzzled with IE 6.0 behaviour. The list items are really close together and sometimes another underlying list/link show up through the pop-up. Any ideas?
Tim Brown
Cool! Answered my question (discussion page 2): http://www.alistapart.com/d/sprites/ala-blobs2.html
Brass
I think, that in example very hard pictures :(
In the net with slow modem this page will download very very long time…