Image map with image-based rollops Limited by AREA coordinates, jQuery if possible
Basically I need this:
http://plugins.jquery.com/project/maphilight
... but instead of tags <AREA>
getting a border or fill color on rollover, get their background image. The image should be cropped to the <AREA>
s shape .
Any ideas?
Basically, my setup is as follows:
<img usemap="#map" />
<map name="map">
<area coords="foo,bar">
<area coords="foo,bar">
<area coords="foo,bar">
</map>
And I want the background image of each tag to AREA
change on rollover.
A fake version of what I want is here:
tankedup renderings. com / css _dev / rollover.html
... except here, note that this is not a "true" image map, the rollover areas are not actually tagged AREA
.
source to share
OK, my solution.
Start with an image map like this:
<img src="nav.jpg" id="main-nav" usemap="#imagemap" />
<map id="imagemap" name="imagemap">
<area id="item1" href="item1.shtml" shape="poly" coords="153,52,484,6,492,43,158,74" />
<area id="item2" href="item2.shtml" shape="poly" coords="95,96,287,84,289,112,95,118,97,118" />
</map>
Then I use jQuery to replace the attribute SRC
IMG
when the user hovers over each specific AREA
one and then returns IMG
to the off state of the mouse.
$(document).ready(function() {
//set off state
var nav_off = "/images/nav-off.jpg";
// functions for over and off
function over(image) {
$("#main-nav").attr("src", image);
}
function off() {
$("#main-nav").attr("src", nav_off);
}
$("#imagemap area").hover(
function () {
var button = $(this).attr("id");
over("/images/nav-" + button + ".jpg");
},
function () {
off();
});
});
It could probably be related to CSS Sprites in some way, replacing background-position
with some image during rollover.
source to share
I don't think you can do this with a real image map:
<img usemap="#map" />
<map name="map">
<area coords="foo,bar">
<area coords="foo,bar">
<area coords="foo,bar">
</map>
But there is a way to do what you want with just HTML and CSS using a variation of the CSS sprites technique . A tutorial on how to do this is below: http://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-guide-/
A quick tour of this technique: Code DEMO
First, create your image as usual. Then create your different states by doubling the canvas size of your image and placing the hover in the new bottom half of the image. You will end up with something like this:
Hopefully your image looks better than this. <A3>
Next comes HTML and CSS. We'll use an unordered list:
<style>
#fakeMap {
list-style: none; margin: 0; padding: 0; /* removes the default UL styling */
position: relative; /* allows the LIs to be positioned */
width: 200px; /* width of the image */
height: 100px; /* height of the image */
background: url(test.jpg) no-repeat 0 0; /* shows the image */
}
#fakeMap li {
position:absolute; /* these will be the "area" elements */
}
#fakeMap a {
display:block; /* along with the width and height, makes the link */
width:100%; /* clickable for the full size of the LI */
height:100%;
text-indent:-5000px; /* pushes the text of the link offscreen */
}
/* Set up each LI to be the right size and positon. */
#maplink1 { width:15px; height:15px; top:10px; left:10px; }
#maplink2 { width:20px; height:20px; top:30px; left:30px; }
#maplink3 { width:80px; height:30px; top:20px; left:70px; }
/* Set the image for all of the links. */
#fakeMap a:hover { background: url(test.jpg) no-repeat; }
/* Set the position of the bg for each link individually. */
#fakeMap #maplink1 a:hover { background-position:-10px -110px; }
#fakeMap #maplink2 a:hover { background-position:-30px -130px; }
#fakeMap #maplink3 a:hover { background-position:-70px -120px; }
</style>
<ul id="fakeMap">
<li id="maplink1"><a href="link1.htm">Link 1 Text</a></li>
<li id="maplink2"><a href="link2.htm">Link 2 Text</a></li>
<li id="maplink3"><a href="link3.htm">Link 3 Text</a></li>
</ul>
source to share