Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    44
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Make various sections of image clickable

    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

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    966
    Thanks
    19
    Thanked 211 Times in 209 Posts
    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.
    Last edited by DaveyErwin; 12-08-2011 at 05:20 PM.

  • #3
    New Coder
    Join Date
    Sep 2011
    Posts
    44
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I created the imagemap with all the coordinates. This is my code so far:

    Code:
    <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.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New Coder
    Join Date
    Sep 2011
    Posts
    44
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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):

    Code:
    <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?

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    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?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    The "raw" JS code to do this isn't all that hard, really. If I had some images, I could easily write it.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •