Tricky hover problem [NEED HELP]

[luk]

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

[luk]

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…

[luk]

=)…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

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

[luk]

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

[Author]

Posts