7 posts
  • Has been part of the Envato Community for over 6 years
  • Has collected 100+ items on Envato Market
YouMa says

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.

http://pastie.org/567631

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.

http://pastie.org/567632

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

30 posts
  • Has been part of the Envato Community for over 6 years
  • Has sold $1+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
+1 more
cogilium says

You want to change the image on hover? Use CSS :)

7 posts
  • Has been part of the Envato Community for over 6 years
  • Has collected 100+ items on Envato Market
YouMa says

nah, doesn’t work =)...wouldn’t ask here if it did…the imagemap is somehow a special construct, you can try it yourself, and if it would work I would be very surprised, but also pleased=P…

cheers,

LuK

382 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
+2 more
blabus says

Seems like an awful lot of work, just so that the cursor only changes on the circle. Why not just use a slightly smaller square DIV over it- kind of like an average- the very edges won’t be clickable, but it might appear to be more of a circle.

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by