Comments on: Imagemap rollover

By: Gabriel Svennerberg

Gabriel Svennerberg — Sat, 27 Feb 2010 11:09:44 +0000

Kyle: Sorry for being so extremely slow to answer your question but I have now made a new example with a fade effect when the layers are shown and hidden. This way the transition isn't so abrupt.

By: kyle bellamy

kyle bellamy — Tue, 26 Jan 2010 19:40:57 +0000

So I’ve got the rollover working like a charm thanks to your code work. But it is a bit abrupt on the transition. Is it possible to add a transition effect to allow them to fade back and forth?

I’ve been looking high and low and found plenty of faders out there but the problem I cannot blend them with the JS that is reading the map and making the transition. A particular one I like is Approach Transition.

It’s driving me mad trying to figure out how to add this to the current JS so any helpw would be greatly appreciated!

Kyle

By: Revisiting the HTML image map « Work with ChoiceCuts

Revisiting the HTML image map « Work with ChoiceCuts — Thu, 14 Jan 2010 19:04:19 +0000

[...] Svennerberg for the cunning transparent layer Image Map dither solution. /* —( comments )——————————- */ .ilsb-parent { margin-top:30px; } [...]

By: Sune Radich Christensen

Sune Radich Christensen — Thu, 13 Aug 2009 07:51:43 +0000

Nice read indeed. But the map is not of Scandinavia, normally Scandinavia is used to describe Denmark, Norway and Sweden, and not including Finland

By: matt

matt — Thu, 30 Jul 2009 14:07:42 +0000

I have no idea how you figured a single-pixel transparent gif would solve the flickr issue, but *thank you* for sharing! I attempted a few other hacks before finding your solution, which worked like a charm.

Cheers!

By: Ricardo Santos

Ricardo Santos — Mon, 15 Jun 2009 11:01:44 +0000

Hi guys want to ask some question!!i’m putting the refence of DOM to html but nothing happens!!don’t know if i’m doing well!!PARDON MY ENGLISH

By: MrEnjoy

MrEnjoy — Wed, 20 May 2009 14:09:07 +0000

Sorted…Duplicated the function and modified the var map.

var amap = $$(‘amap’);
if(amap) {
var country_list = amap.getElementsByTagName(‘AREA’);
}
var bmap = $$(‘bmap’);
if(bmap) {
var country_list = bmap.getElementsByTagName(‘AREA’);
}
There has to be a more elegant way of doing this….
Cheers!

By: MrEnjoy

MrEnjoy — Thu, 14 May 2009 16:40:49 +0000

Excellent concept…have got this working down to a T….with one map.

However I want to have 3 maps on the same page, I have a jist of javascript but can’t see how to work round this…
I want to use the same function,but add 2 variables ie:

var map = $$(‘map1′, ‘map2′,’map3′,);

and then

have it run through the funtion checking all 3 maps? Possible?

Each map has a specific id, in the css so thats working fine…however i cannot get the different maps to rollover…

Can you help?

Thanx in advance…

By: arvind

arvind — Thu, 09 Apr 2009 09:36:43 +0000

i want finland country map by coords method so plz help me

thanks:

By: em

em — Thu, 26 Mar 2009 20:37:07 +0000

You should be able to add keyboard support fairly easily. Add two new events, onfocus and onblur, and use the mouseover code for onfocus and the mouseout code for onblur. I haven’t tested this, but barring some odd behavior due to the image map, it should work. I haven’t used an image map in YEARS but I’m contemplating using one for an upcoming project, so thanks for the demo!

By: Nori

Nori — Wed, 18 Feb 2009 00:23:08 +0000

Hej gabriel,

Jag har använt ditt sätt för imagemap rollover fast min index sida är i php. jag får inte till rollovern att funkar.Har testat i ren html och du funkar utmärkt.Vet inte riktigt vad felet är.
Några ideer?

Om du är intresserad av att hjälpa mig så kan jag lägga in koden.

Tack

By: Gabriel Svennerberg

Gabriel Svennerberg — Thu, 20 Nov 2008 12:16:51 +0000

r-doll: Hello, It looks like I don’t have permission to access the URL that you provided. I get a 403 Forbidden message. But I’m excited to see what you’ve come up with.

By: r-doll

r-doll — Thu, 20 Nov 2008 10:47:17 +0000

Hello again, this is how it turned out so far:
http://www.dollypower.com/staging/breastscreening/index-javascript.html
It is a big ol’ image, so even when using a sprite it may be a bit slower than the example. Will continue to optimise the graphic… But do let me know what you think. R

By: Gabriel Svennerberg

Gabriel Svennerberg — Mon, 03 Nov 2008 22:32:44 +0000

I’m glad that you found the article useful!

Also thanks for telling me that one of the overlays positioning was a bit off in IE6. I had completely missed that. It’s now corrected in the example. Apparently there’s some extra space at the bottom of the map in IE6, so using bottom as a reference in the CSS wasn’t that good. On the other hand it was easily fixed by changing the position to be relative to the top instead.

Using a sprite seems like a smart thing to do. I’m looking forward to see what you come up with!

/Gabriel

By: r-doll

r-doll — Mon, 03 Nov 2008 20:58:04 +0000

oops that should have said…

“using tags, but tags do the job and are probably more semantic”

also not sure if you’re worried about IE6, but seems the positioning is a little off, so will see if I can get that sorted too

By: r-doll

r-doll — Mon, 03 Nov 2008 19:55:19 +0000

Hi Gabriel,

Just a note to say this is great! I’m working on something very similar at the moment. I’d also been trying to preserve an accessible version using s, but s do the job and are probably more semantic. The image map I’m working is pretty big so I’m going try to also use a background sprite to cut down on the load time – ALA stylee (http://www.alistapart.com/articles/sprites/) Will let you know how I get on combining these ideas!

R:)