...

View Full Version : Image map problem - or is there a better way?



GB Joe
01-17-2005, 11:46 PM
I've been reading some posts and links about image maps here and now I'm not sure what my question should be...!

Here's what I'm trying to do. I have a song title (this is my band's website), and when you mouse over it it turns into the words "mp3" and "lyrics" using a little animated GIF so that the pixels fly out and reassemble themselves. (Looks quite nice!) The idea, of course, is that you can click on each word and either hear or read the song.

There are actually three graphics involved, and I've called them 0, 1 and 2. 0 only appears on the initial loading of the page - it's the static song title. 1 is an animation from the title to mp3/lyrics and 2 is the reverse. I got this all set up using an image map to make the two areas clickable (took some trial and error to work out that the onMouse commands had to go on the map and not the image). Now, here's the problem - when you mouse between "mp3" and "lyrics" the onMouseOver transition is triggered again, which looks pants and is rather distracting.

I'm wondering if any of you dear people can think of a clever way around this? I got most of the way through a JavaScript/DOM switch before figuring out that it would end up doing exactly the same thing, and having read some scathing stuff on image maps and accessibility I'm wondering if perhaps there's a whole other approach I could take.

The rest of the guys are on my back about this as the site should've been up weeks ago - any help would be most gratefully received!!!

dniwebdesign
01-18-2005, 12:12 AM
Can you provide us a link so we can see what it is doing ourselves?

rmedek
01-18-2005, 01:09 AM
Image maps aren't always inaccessible... read this article (http://alistapart.com/articles/imagemap/) for an example. So I wouldn't be too scared about using one.

As far as your problem, I'd say it was more of a Javascript one (essentially trying to get the mouseover event to happen only over the links as a group, but not individually (mp3s/lyrics), right?)... ask a moderator to move this post to the Javascript forum (pleeeeease don't crosspost).

GB Joe
01-18-2005, 08:58 AM
I can't really give you a link as I've not uploaded anything yet - it's all quite a mess at the moment! I could probably hack something together if I'm not making any sense, but I think Mr. Medek's summed up my question rather well :thumbsup: - the mouseover should only happen to the group, not the individual elements.

I did read through that A List Apart article last night and tried to apply the ideas but I thought perhaps it wasn't quite doing the same thing. My skill level is such that examples have to be pretty close to what I want for me to mod them...

Here's what I've got for the body code:

<img src="knife0.gif" name="s3" id="s3" width="79" height="74" usemap ="#kmap" border=0 class="song3">
<map id ="kmap" name="kmap" onMouseOver="knifeswap1()" onMouseOut="knifeswap2()">
<area shape ="rect" coords ="0,0,80,34" href ="knife.mp3" alt="mp3" title="download mp3">
<area shape ="rect" coords ="0,35,80,70" href ="#" alt="lyrics" title="view lyrics" onclick="open_win('knife.htm')">
</map>

N.B. The song's called "Knife" (you can have a listen here (http://www.onelifeleft.net) if you like!) so the graphics are knife0, 1 and 2 respectively. Once I've figured this out I plan to put some arguments in so I can use the same code for different songs, but one thing at a time!

I really don't understand why the mouseover is triggered moving between the two parts of the map - but it is, so I guess there's no point arguing!

Should I PM a moderator about moving this..? I'll give it a go and hope I'm forgiven if I'm breaking the etiquette. Thanks for your input so far!

rmedek
01-18-2005, 12:18 PM
Well, if you can live without an animated gif, here's one way you could do this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Untitled</title>
<style type="text/css">

body {
font: 14px verdana;
color: #fff;
}

#song {
width: 212px;
height: 92px;
background: url(background.png) no-repeat top left;
text-indent: -9999px;
}

#song:hover {
background-position: 0px -92px;
}

#song a {
display: block;
width: 106px;
height: 92px;
text-indent: -9999px;
float: left;
}

</style>
</head>

<body>
<div id="song">
<a href="mp3.htm">mp3</a>
<a href="lyrics.htm">lyrics</a>
</div>
</body>
</html>


Link to example (http://richardmedek.com/temp/example1.htm). It's only tested in FF and written quickly, so pardon any errors. But it should show how you might achieve something like this using CSS. If you want to stick with what you're already using, it's probably a quick JS fix and you should PM a mod...

Hope this helps,

GB Joe
01-18-2005, 06:52 PM
Okay - I see what's going on there, the background image just shifts. Nice! I've tried to read articles on this idea before but hadn't quite got my head round it before. Thanks!

I still want my animations though... I guess I'm going for a more quirky look rather than something slick like that. The trick is getting it to still be functional and accessible. Hmmm... Anyhow, I PM'd brothercake as he put me on to these forums in the first place (I was trying to mangle one of his nice scripts), hopefully he'll sort it out.

BTW, you used a very similar font to me for that image! Do you have that as a font, because I'm tweaking individual letters by hand and then fuzzing it up to get it to look like that... I know, I do most things the hard way...

rmedek
01-18-2005, 09:17 PM
The font's called "Harting," I picked it up cheap at dafont.com some time ago. Every band loves the stressed typewriter look... :)

I don't have any animated gifs to test with, but couldn't you just assign the onMouseOver events and such to the div holding the block of links? Just an idea...

If you want, post the gifs and I'll see if there's a CSS way to do what you're looking for.

GB Joe
01-18-2005, 10:44 PM
Here you go:
http://www.onelifeleft.net/mp3l-k0.gifhttp://www.onelifeleft.net/mp3l-k1.gifhttp://www.onelifeleft.net/mp3l-k2.gif
Aren't they pretty?!? :p An embarrasing amount of time spent on Corel Draw and PhotoPaint...

Tried it with a div (wasn't using one before), exactly the same result. I can't think what's making it trigger like this. Here's the current code:


<div onMouseOver="document.s3.src='mp3l-k1.gif';" onMouseOut="document.s3.src='mp3l-k2.gif';">
<img src="mp3l-k0.gif" name="s3" id="s3" width="79" height="74" usemap ="#kmap" border=0 class="song3">
<map id ="kmap" name="kmap">
<area shape ="rect" coords ="0,0,80,34" href ="knife.mp3" alt="mp3" title="download mp3">
<area shape ="rect" coords ="0,35,80,70" href ="#" alt="lyrics" title="view lyrics" onclick="open_win('knife.htm')">
</map>
</div>
I can't help feeling there should be a really easy solution to this...

rmedek
01-19-2005, 12:34 AM
Well, I meant assigning the js events to the div if you used it like I was:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Untitled</title>
<style type="text/css">

#song {
width: 79px;
height: 74px;
background: url(knife.gif) no-repeat top left;
}

#song a {
display: block;
width: 60px;
height: 30px;
text-indent: -9999px;
position: relative;
left: 10px;
top: 5px;
float: left;
}

</style>
</head>

<body>
<div id="song" onMouseOver="this.style.backgroundImage = 'url(knifeon.gif)'" onMouseOut="this.style.backgroundImage = 'url(knifeoff.gif)'">
<a href="mp3.htm">mp3</a>
<a href="lyrics.htm">lyrics</a>
</div>
</body>
</html>

Link to example (http://richardmedek.com/temp/example2.htm). The only problem I run into when I use this method is the animation is cached, so it only works the first time you rollover it.

But keep in mind I'm just trying to figure out alternative methods for what you want (this is the CSS forum). The simple solution would be (ahem) to get this transferred to a javascript forum for your javascript issue.

GB Joe
01-19-2005, 08:19 AM
Yeah, okay, I get your point - but I can't move it myself! ;) brothercake couldn't move it as he's the wrong kind of moderator (can only move stuff within or out of JS), am currently waiting for sage45 to look at it. I'm new to this business, okay?!?

Thanks for all your help though... hopefully I'll be off to JS soon and will stop bothering you! I'm currently trying to think if there's anything else on the site I could use that position shifting trick on...

rmedek
01-19-2005, 08:40 AM
Thanks for all your help though... hopefully I'll be off to JS soon and will stop bothering you! I'm currently trying to think if there's anything else on the site I could use that position shifting trick on...
Hey, it's really no problem... now I'm trying to find something I can use this "psuedo-image-map" code on! :D

GB Joe
01-21-2005, 01:53 PM
Okay, here were are in the land of JavaScript... sorry there's so much preamble to wade through! The quick summary is as follows:

I want an image clickable in two areas, but I need to avoid the rollover event triggereing between these two zones. This is because of the animated GIFs I'm using.

Anyone got any ideas?!? :confused: I'm way behind schedule now, and I'd really appreciate some help...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum