Make various sections of image clickable

[Windbrand]

Hiya, I created this thread on the html forum but I'm not sure if it can be done with javascript, so I'll post here as well. I was wondering if there's a way to make various sections of the image clickable? The sections on the image are not rectangular so I can't make divs. I don't think I can use imagemap either since that only works for making one clickable area right? I already cut out these sections in photoshop and saved them with alpha background, and created a "glowing" version of each section, since I want to make it so that when mouse hovers over it, it will glow. But I can't stack them on top of each other, since if I do that only the topmost layer will be clickable for those areas where they will overlap with rectangular divs.
This is example of what I mean:


Thanks

[DaveyErwin]

http://www.w3schools.com/tags/tag_map.asp

You could put all the co-ordinates for every point
on the borders in arrays. When the image is clicked
on, get the mouse co-ordinates. Determine by
comparing mouse x,y to the arrays which colored
area the mouse is in.

[Windbrand]

I created the imagemap with all the coordinates. This is my code so far:

<div id="mainpage">
            
            	<img src="pictures/background_faded.png" class="pagebackground" usemap="#mainpagemap"/>
                
                <map name="mainpagemap">
                	<area shape="poly" alt="window" coords="204,30,176,311,589,346,594,249,541,243,539,240,527,240,528,225,538,224,535,219,543,217,545,214,548,203,543,200,549,199,602,100,584,79,550,88,547,89,551,47,506,35,467,30,468,77,468,77,468,77,320,53,206,31,205,33,205,33,205,34,217,25,205,32,205,32,206,32" href="" target="" />
                    <area shape="poly" alt="brickhouse" coords="657,0,524,248,593,251,583,439,564,439,555,569,568,589,994,594,993,4,990,3" href="" target="" />
                    <area shape="poly" alt="gate" coords="61,324,112,316,356,341,426,356,494,373,520,387,517,400,481,394,474,419,477,464,477,435,552,436,561,443,553,550,553,580,534,592,392,589,225,591,145,576,116,576,80,581,64,561,64,445,62,413" href="" target="" />

</map>

</div>

How would I fade in another image when my mouse hovers over a specified area? The scripts I found all change the image into another, but I don't want the background image to be affected, only want to bring in another image then fade that out when mouse is out of the area.

[Old Pedant]

The hard part will be creating the overlay images.

If you create them as GIF or PNG, then you could indeed have most of each image be transparent and only have the part that "covers up" the hovered-over part of your mapped image contain non-transparent pixels. Then fading in one of the overlays on top of the mapped image becomes much easier, since the overlays could each actually be the same size as the mapped image.

The (mildly) tricky part is that as soon as the overlay is made visible, *it* will get the mouse focus, not the mapped image. So you will want to use the same map with all the overlays.

[Windbrand]

Yes that's what I'm trying to do. Each of the "glow" versions are same dimensions as background image, I simply fade in a different "glow image" when mouse is over a certain section of background image, and place the glow image at the exact same position.
I found this script on the web (credit goes to author):

<script type="text/javascript">
	
		$(document).ready(function() {
			
		// find the div.fade elements and hook the hover event
			$('.fadeThis').hover(function() {
				// on hovering over find the element we want to fade *up*
				var fade = $('> .hover', this);
		 
				// if the element is currently being animated (to fadeOut)...
				if (fade.is(':animated')) {
					// ...stop the current animation, and fade it to 1 from current position
					fade.stop().fadeTo(500, 1);
				} else {
					fade.fadeIn(500);
				}
			}, function () {
				var fade = $('> .hover', this);
				if (fade.is(':animated')) {
					fade.stop().fadeTo(500, 0);
				} else {
					fade.fadeOut(500);
				}
			});
		 
			// get rid of the text
			$('.fadeThis > .hover').empty();
		})
	
	</script>

But I don't really understand it. I think this one causes the background image to fade out, then fades in another image right? How do I make the background image not affected at all, and just bring in another image upon mouse hover?

[Old Pedant]

That code written using the jQuery library, and I don't use jQuery (yet...I may be forced to, after 12 years of writing all my own code).

Anyway, no, I don't *think* it fades the main image. It "finds" the image for the hover effect (that's what $('> hover',this) does, though I don't read jQuery enough to what it is looking up) and then fades it in/out as needed.

I don't know if that could be adapted to your image map situation or not. Ask the author?

[Old Pedant]

The "raw" JS code to do this isn't all that hard, really. If I had some images, I could easily write it.