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 11 of 11

Thread: Java image map

  1. #1
    New Coder
    Join Date
    Dec 2004
    Location
    Portsmouth, UK
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Java image map

    Okay, here's the problem:

    I'm doing the music page for my band's site; when you mouseover a song title it changes to a nice little animated GIF which becomes the words "mp3s" and "lyrics". Mouseout returns to the original image using another animation (the reverse of the first). Using a simple image map I can make these two areas go to the right links, BUT when you go between the two areas the mouseover event is re-triggered and the animation runs again. This looks a bit rubbish and distracting, but I can't for the life of me work out a way around it. I've tried pretty much everything in the realm of HTML and CSS (I think), so now I'm wondering if there's a way to do it with JS.

    On the face of it this isn't particularly complex! I don't know what it is about the image map that causes this strange behaviour, but someone must!

    If anyone wants more detail on this, the original HTML thread is here:
    http://www.codingforums.com/showthread.php?t=50511
    I had it moved here, but I think it was a bit late by then!

  • #2
    New Coder
    Join Date
    Dec 2004
    Location
    Portsmouth, UK
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What, no one has any ideas?!?

    Come on guys! I can't have beaten you that easily! Am I just trying to do something really stupid, or am I not explaining the problem well enough?

    At this stage I'd even be happy with a few insults and withering remarks...

  • #3
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Beaten?? More like dissuaded...

    Who wants to get involved in something spread across two forums, with no link provided to the document in question and very little code provided by you, and what code is provided is merely little snippets broken across several posts... Learn to ask your question properly and I'm sure someone would respond with a solution... As it is, the entire matter is too disjointed to bother with...

    ....Willy

  • #4
    New Coder
    Join Date
    Dec 2004
    Location
    Portsmouth, UK
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    See, that's what I was hoping for - I need to know what I'm doing wrong or I'll never learn...

    Right then - I can't provide a link to the page because it's only on my hard drive at the moment. I'll put it up this evening (can't get through the firewall at work to do it now) so you can see what I'm talking about.

    I guess I should probably not waffle any further until that's done - hopefully you'll give me another chance then...?

    (backs towards door, wringing hands anxiously)

    Joe.

  • #5
    New Coder
    Join Date
    Dec 2004
    Location
    Portsmouth, UK
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, I'm back, armed with a link:
    http://www.onelifeleft.net/songs.htm

    It's all slow as I've not got the preloading all sorted, but I'm not too worried about that right now.

    The chap that's causing the problem is the song called "Knife". On this link there's the option of going to a lyrics page as well as downloading the mp3. When you mouseover the title, the image changes to show the two options, but it repeats this process when you move between the two options. I don't know why! The code I've set up for it at the moment is this:
    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>
    You'll notice there's no relevant JS in there - I had a few attempts at this but I kept finding myself re-inventing what was already going on. My problem is that I don't really understand the mechanism behind the triggering of the event, so I can't tell what I have to refer to to fix it. Here's what's in there at the moment:
    Code:
    <script language="JavaScript"><!--
    function knifeswap()
    {
    	if(document.getElementById('s3').src != 'mp3l-k1.gif')
    	{
    		document.getElementById('s3').src = 'mp3l-k1.gif';
    	}
    }
    //--></script>
    ...but of course that doesn't work... I've taken out the function call so that you can see almost what it's supposed to do, rather than nothing at all.

    I don't really know how else to explain my problem... if you think this is just a ridiculous idea from the outset, I'd still appreciate any feedback, especially if you have any cool alternatives I could try.

    Joe.

  • #6
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Hey.

    the process you're looking for is relatively simple... my question is this: are you married to the idea of the image map? off hand i dont see why the error you have is occuring, so i cant help you if you want the image map fixed. alternatively if you'd like to split the pictures up into individual pics and do onmouseovers & outs using divs, i can help you.

    have a look at the language chooser on www.enviromark.ca ... check out the code & if thats what you want then i can help

    that page is a 7-image rollover, and employs post-loading, not preloading. you might find that usefull aswell
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #7
    New Coder
    Join Date
    Dec 2004
    Location
    Portsmouth, UK
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Married..? Well, I think we're good friends, but that's taking things too far for a piece of code... Really it's just the end result I'm after.

    I had considered splitting the GIFs into two pieces, but I was concerned that they may not stay properly in sync - especially if the pre-loading wasn't quite ready. I'm confident that I could do it if I abandoned the pixelly transition thing and just used straight images, but I feel that would be quite a shame - I really like the effect and it seems there should logically be an easy way to make it work.

    The example you give is pretty clever, but just uses static images, so I'm not sure how this would work with animations. If you think it would do the job and stay in sync then I'm certainly up for giving it a try, but I may need some more help to understand how it's working.

    Cheers!

    Joe.

  • #8
    New Coder
    Join Date
    Dec 2004
    Location
    Portsmouth, UK
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well guys, I can't get this darned thing to work...

    I've split the GIFs in two and abandoned the image maps - this seems to work okay, but I still get exactly the same problem with re-triggering the MouseOver between the two graphics.

    I'm trying this on the links
    Code:
    <div class="song1" onMouseOver="wswap(1)" onMouseOut="wswap(2)">
    <a href="without_you_i_am_with_you.mp3">
    <img src="mp3l-a-wy0.gif" id="s1a" title="download mp3" alt="mp3" width="127" height="39" border=0>
    </a>
    <a href="#">
    <img src="mp3l-b-wy0.gif" id="s1b" title="view lyrics" alt="lyrics" width="127" height="38" border=0 class="song1b" onclick="open_win('without.htm')">
    </a>
    </div>
    and this in the script:
    Code:
    function wswap(n){
    switch(n){
    case 1:
    if(document.getElementById('s1a').src != 'mp3l-a-wy1.gif';)
    	{
    	document.getElementById('s1a').src = 'mp3l-a-wy1.gif';
    	document.getElementById('s1b').src = 'mp3l-b-wy1.gif';
    	}
    break
    case 2:
    document.getElementById('s1a').src = 'mp3l-a-wy2.gif';
    document.getElementById('s1b').src = 'mp3l-b-wy2.gif';
    break
    default:"";
    }
    }
    The images are split into "a" and "b" for the top and bottom links, and come in variants 0, 1 and 2 - these are the initial static image (never re-used once the animations start working), the MouseOver and MouseOut images respectively. The idea behind my attempt at an IF statement is that if the image displayed is already the "1" variant then there's no need to change if another MouseOver event is triggered.

    Obviously this doesn't work, because I don't know what I'm doing... If I ditch the IF statement then the behavious returns to exactly the way it was when I was using the image map, although I prefer this method.

    I think perhaps if I could just write the statement properly it should be doing the right thing... but at the moment it does nothing at all. Any clues?

  • #9
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I wasn't sure if you were going with Candaian Jameson's help and suggestions or not... But anyway...

    You are using the mouse events on the division itself which will trigger the events as long as the mouse moves within the division... Try removing that and placing the mouse events upon the images themselves...

    Code:
    <div class="song1">
    <a href="without_you_i_am_with_you.mp3">
    <img onMouseOver="wswap(1)" onMouseOut="wswap(2)" src="mp3l-a-wy0.gif" id="s1a" title="download mp3" alt="mp3" width="127" height="39" border=0>
    </a>
    <a href="#">
    <img onMouseOver="wswap(1)" onMouseOut="wswap(2)" src="mp3l-b-wy0.gif" id="s1b" title="view lyrics" alt="lyrics" width="127" height="38" border=0 class="song1b" onclick="open_win('without.htm')">
    </a>
    </div>
    .....Willy

  • #10
    New Coder
    Join Date
    Dec 2004
    Location
    Portsmouth, UK
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It just took me a while to set it up - should've gone with dummy graphics to test, but I wanted to check that the animations would still work once split.

    I tried your idea Willy, but it does just the same thing. Have I got the IF statement right? If I leave it out I get the bogus triggering, but if I put it in I get no action at all.

    I'm probably going to have to "go live" with the site either tonight or tomorrow, so I'll have to go with extra triggering rather than none at all - but we're not expecing to have a major influx of new visitors until after a big charity gig on Sunday, so I still have a few days to fix this... have to finish our demo by then too!!!

    Thanks for all the help so far!

    Joe.

  • #11
    New Coder
    Join Date
    Dec 2004
    Location
    Portsmouth, UK
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So, the site's up...
    www.onelifeleft.net

    I've left the image map solution up as the main songs page for now as I haven't had time to redo the other graphics - but the other method (without any external links to it) is here:
    www.onelifeleft.net/songs2.htm

    The images for "Without You I Am With You" are the split ones; the behaviour seems identical to that of "Knife" which uses an image map. I removed the IF statement because it resulted in no animations taking place whatsoever. The code now runs as follows:
    Code:
    function wswap(n){
    switch(n){
    case 1:
    document.getElementById('s1a').src = 'mp3l-a-wy1.gif';
    document.getElementById('s1b').src = 'mp3l-b-wy1.gif';
    break
    case 2:
    document.getElementById('s1a').src = 'mp3l-a-wy2.gif';
    document.getElementById('s1b').src = 'mp3l-b-wy2.gif';
    break
    default:"";
    }
    }
    ...so I think I'm back to just needing a way to make that IF statement work - if the graphic is already on "1" then it shouldn't trigger anything.

    !!!! UPDATE !!!!
    Just looked at this in IE and it's broken... I've been using FF for most of my development. For some reason IE is showing the top half of the split GIF really badly.

    *sigh*

    I guess I'll just go back to playing the guitar - I've had about enough of this lark....
    Last edited by GB Joe; 02-03-2005 at 08:21 PM. Reason: New info - problems with IE


  •  

    Posting Permissions

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