Grow your CSS skills. Land your dream job.

Tricky hover problem [NEED HELP]

  • luk
    # August 1, 2009 at 1:00 am

    Hi everybody,

    I’m trying to make the "unhoverable" <area> element hoverable, just with javascript but with that I thought it should be possible to do this but I wasn’t able to do so yet, multiple attempts failed, maybe because of my insuffisant knowledge in javascript (I’m getting better but there’s a lot to learn =D)…

    The (not yet) living thing could be visited here: http://devcfm.031.be/ – it’s the big red "PLAY" Button top right, because it’s a round button, I wanted to limit the space the link-pointer is showed, so that it appears only when the user is really over the button and not as he/she enters the rectangle of the image…because of this I decided to use this nearly forgotten thing called imagemap, the problem there is, you don’t have any <a href> tags to work with…the link is an attribute of the inner <map> element <area> as shown in the code below.

    Code:

    I wanted to use javascript to change the src attribute of the imagemap <img>-tag when the <area> is hovered with the mouse, I tried the following but there seems to be an error (maybe in something that is returned and not accepted by the next function? don’t get that yet^^) in the script.

    I can say it in words but obviously I can’t it write down to code =/…: When the <area> is hovered, traverse the DOM up to the parent element with the id of #webradio-img, get it’s attribute src, split away the -off. string and add the -on. string, on mouseout, reverse the same thing…sounds not that difficult or does it?

    Appreciate every help!

    Code:
    $(“area”).hover(
    function () {
    $(“#” + $(this).parent(“#webradio-img”).attr(“src”)).split(“-off.”).join(“-on.”);
    },
    function () {
    $(“#” + $(this).parent(“#webradio-img”).attr(“src”)).split(“-on.”).join(“-off.”);
    }
    );

    thank you very much in advance

    # August 1, 2009 at 1:46 am

    I could pretend I’m really smart and say I knew the answer to this, but the truth is my old mate google had the answer(s) as usual.
    Here’s a selection of your options:
    http://www.foryourlungsonly.net/2007/10/12/jquery-image-swap/
    http://code.google.com/p/jquery-image-hover/
    or possibly the best
    http://code.google.com/p/jquery-swapimage/

    luk
    # August 1, 2009 at 10:37 pm

    Hm, these are all normal image hover plugins, this is nothing I need a plugin for, I had this with my image already, but the problem is, that not the image itself is hovered (if you do that, you have the hover effect from the beginning of the image rectangle until you reach the image map area and then the hover effect is gone, this is the reason I’m asking here, I need to traverse up the DOM out of the area tag to find the img src of the imagemap image^^…if you have a look at the code above you can see that the img tag is outside of the area element…

    # August 2, 2009 at 2:50 am

    Ok, I think you are seriously over complicating things.
    You may want to look at the .remove and appendTo functions.

    luk
    # August 2, 2009 at 1:01 pm

    =)…could be that I’m overcomplicating the whole thing but this is exactly the reason I’m asking for help out in the net, tried several hours and it was very frustrating to not get to a solution on such an easy thing =/ (I still think it can’t be that complicated…)

    could you maybe show, how you would select the img-src in here when I hover the area (green):

    <div id="webradio" class="sub-navigation">
    <img id="webradio-img" usemap="#webradio-imgmap" src="./images/layout/webradio-play-off.png" alt="Webradio" />
    <map id="webradio-imgmap" name="webradio-imgmap">
    <area shape="circle" rel="webradio-img" alt="Webradio" coords="79,80,68" href="#" />
    </map>
    </div>

    Code:
    $(“area”).hover( // ok, I select the area-tag, could this also be §(“div#webradio map#webradio-imgmap area”).hover, would jQuery accept this??
    function () { // then, when the area is hovered
    $(this) // I take the area-tag with $(this)
    .parent() // then I search the parent element, there I have some doubt that it will work because the img-tag is not really a parent…the first parent would be the
    -tag and then when I want to go up a level can I just add another .parent() function? Is this legal?*g* If this was ok then I’m now in the div#webradio
    .find(“img”) // then I would search the img-tag inside of the div#webradio
    .attr(“src”) // when jQuery found it, I’ll look for that img’s src attribute
    .split(“-off.”) // when it found the src, manipulate the filename
    .join(“-on.”);
    },
    function () {
    $(this).parent().parent().find(“img”).attr(“src”).split(“-on.”).join(“-off.”); // the whole thing backwards…
    }
    );

    I thought chaining was ok with jquery but it doesn’t work, maybe I would have to combine some functions or something like that, what do you mean?

    thx 4 your replys!

    LuK

    # August 2, 2009 at 2:09 pm

    If I had a client that was so pedantic as to insist that a tiny fraction of an image would not react on hover, in spite of the fact that 99% of users would never even notice, then I would do it with flash.

    I don’t know how to do it with jQuery, but, if you were to put a gun to my head, I would try giving "area" its own id and doing something like this:

    Code:
    $(“#my_area”).bind(“hover”, function() {
    $(“#webradio-img”).attr(“src”,”./images/layout/webradio-play-on.png”);
    });

    And if I couldn’t get that working then I would look at removing the image with the .remove() function and replacing it using .append() or .appendTo.

    luk
    # August 3, 2009 at 7:49 pm

    Yeah, you’re right =), it’s a really small thingthing and even my boss who had a look over the project sketch today said that it doesn’t bother him (he even didn’t regocnize to give you one more point =D) if there’s no hover-status on that button, for the practical part of the whole thing I’m absolutly with your opinion, this is too small to bother with^^…

    First, I did many things in the past with flash and somehow it just lost sympathy, I don’ like it anymore and since JavaScript is getting that crazy with all the libraries I can do most "flash only" effects with it and I love it =D plus: progressive enhancement isn’t possible with flash and that’s one of the beautiful sides of JS, if the users-browser is able show (or the user willing to see) animations and so on then I think why don’t give them what is possible and functional (more or less =D)…with flash the thing is: you have it installed or you don’t…and if you don’t, you can’t see nothing than a nice little message that says you "DOWNLOAD FLASH YOU NEANDERTHAL" (but in most cases this message shows up, I’m somewhere on a PC that I can’t configure myself so this isn’t much of a help and if I need something to know from a pure flash site, then I have a problem =)…so I use flash only for audio/video and sometimes for image-galleries (I would love a gallery with the js ken burns effect, but the nice js-ken-burns-effect is very CPU intensive…maybe this gets better of the CPU’s get faster (for sure =D))

    Ya, I’ll finish soon =)…the whole point is: The play-button-hover-thing isn’t about "uuuuh, it’s so important that I can’t finish the project without it", no, it’s first and foremost the fact that I have done a hundred hover effects with JS and I couldn’t get this to work, that’s driving me crazy^^, seems so simple but didn’t work…I’m learning jQuery and my learning-curve is steep, but when I’m stuck with something and can’t find an answer on google or anywhere else I just have to know it, for the knowledge that it’s possible =)…that’s all^^…so I’ll try your approach tomorrow and give you some feedback if it worked!

    Thank you very much for your patience and your time!!

    LuK

    # August 3, 2009 at 10:37 pm

    Actually if you embed flash properly you can specify alternative content for the 3% of computers worldwide that don’t have flash installed.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".