imagemap rollovers with area shape="poly" | The Prototype Remix
Time. Most of mine lately has been spent (failing) at learning how prototype.js works.
A long time ago I had to make an imagemap with pixel precision outlines of the continents with a hover state on the links, so I cobbled together a kludgey script that worked. That was then, this is now.
Prototype makes it very easy:
(prototype.js; mapHover.js)
get the code for this
If you prefer, behaviour.js is also a way to solve the problem:
(prototype.js; behaviour.js; styles.js)
So fresh and so clean-clean.
Markup
The css/html is relatively unchanged (just some DRYing up, really) from the original example.
Scripting
The basic premise is the same as my original implementation I'm just leveraging the power and utility of the prototype.js / behaviour.js libraries to simplify with the added benefit of built-in cross browser/platform support.
Besides, prototype.js is solid krunk, yo.
A long time ago I had to make an imagemap with pixel precision outlines of the continents with a hover state on the links, so I cobbled together a kludgey script that worked. That was then, this is now.
Prototype makes it very easy:
(prototype.js; mapHover.js)
Event.observe(window, 'load', function() {
var mapLinks = $('Map').childNodes;
$A(mapLinks).map(function(element) {
Event.observe(element, 'mouseover', function(){ $('mapBlock').addClassName(element.id)});
Event.observe(element, 'mouseout', function(){ $('mapBlock').removeClassName(element.id)});
});
});get the code for this
If you prefer, behaviour.js is also a way to solve the problem:
(prototype.js; behaviour.js; styles.js)
var maphoverrules = {
'area': function(element) {
element.onmouseover = function(){
$('mapBlock').className = element.id;
}
element.onmouseout = function(){
$('mapBlock').className = 'mapbase';
}
}
}
Behaviour.register(maphoverrules);So fresh and so clean-clean.
Markup
The css/html is relatively unchanged (just some DRYing up, really) from the original example.
Scripting
The basic premise is the same as my original implementation I'm just leveraging the power and utility of the prototype.js / behaviour.js libraries to simplify with the added benefit of built-in cross browser/platform support.
Besides, prototype.js is solid krunk, yo.
0 comments