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.
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!
thank you very much in advance
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:
or possibly the best
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…
=)…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="#" />
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!
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:
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.
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^^…
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!!
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".