Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Dec 2004
    Location
    Portsmouth, UK
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image map problem - or is there a better way?

    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!!!

  • #2
    Regular Coder dniwebdesign's Avatar
    Join Date
    Dec 2003
    Location
    Carrot River, Saskatchewan
    Posts
    841
    Thanks
    15
    Thanked 9 Times in 9 Posts
    Can you provide us a link so we can see what it is doing ourselves?
    Dawson Irvine
    CEO - DNI Web Design
    http://www.dniwebdesign.com

  • #3
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Image maps aren't always inaccessible... read this article 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).

  • #4
    New Coder
    Join Date
    Dec 2004
    Location
    Portsmouth, UK
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 - 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:
    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 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!

  • #5
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Well, if you can live without an animated gif, here's one way you could do this:
    Code:
    <!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. 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,

  • #6
    New Coder
    Join Date
    Dec 2004
    Location
    Portsmouth, UK
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...

  • #7
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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.

  • #8
    New Coder
    Join Date
    Dec 2004
    Location
    Portsmouth, UK
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here you go:

    Aren't they pretty?!? 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:

    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...

  • #9
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Well, I meant assigning the js events to the div if you used it like I was:
    Code:
    <!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. 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.

  • #10
    New Coder
    Join Date
    Dec 2004
    Location
    Portsmouth, UK
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...

  • #11
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by GB Joe
    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!

  • #12
    New Coder
    Join Date
    Dec 2004
    Location
    Portsmouth, UK
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?!? I'm way behind schedule now, and I'd really appreciate some help...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •