Indie-Resource.com

Posted: **Sat Apr 19, 2014 9:59 am**

Hey guys!
So although I have programmed in quite a few languages, I am pretty new to javascript. I have a certain task that I require to do in javascript but I am not sure how I would go about it. So the task is simple, lets say I have an image, for an example lets imagine its an image of a farm. Now I want it so that when the user takes his cursor over lets say the farms sheep then a box pops up saying "This is a sheep /*interesting fact goes here*/" or if he takes the mouse over some other animal the same happens for that animal.
I was thinking of going about this two ways, I do not know which would be the best or whether there is a better way to do this:
Way 1:
I thought I'd simply slice up the image, put it back together using CSS (I can imagine this being difficult) and then have javascript functions such as onmouse over for each animal.

Way 2:
I was thinking of using the canvas feature, load up the image onto the canvas, make transparent rectangles around the animals and put the functions on the rectangles (seems messy and not sure if possible)

If you had to do this, would you do any of these ways? If not how would you go about doing something like this?

Thanks!

Posted: **Sat Apr 19, 2014 3:32 pm**

The HTML <map> tag was created in order to make it easy to set a few links on a single image. Instead of cutting the image into parts and adding an anchor tag (<a>) to each of them – all you have to do is create a <map> tag and connect it with the relevant image on your HTML page.

The HTML map element has only one required attribute: "name", which is used later for connecting the <map> tag to the right <img> element.

http://www.html-map.com/

Posted: **Sat Apr 19, 2014 6:23 pm**

Yep, HTML maps can do this for you. It may seem like a strange thing to be an actual part of HTML and to not require Javascript or CSS, but back in the mid-to-late-90's, it was quite popular and common to have a large image at the top of your webpage to serve as both the website logo and the site's navigation because website styling was in its infancy. Several hacks, including browser-specific techniques, were developed to do this but then it was added natively in HTML 3.2. It has stuck around because it isn't that hard to implement in a browser, and most vendors already had a working mechanism for it that hasn't needed updates in almost 20 years.

Posted: **Sat Apr 19, 2014 6:58 pm**

Thanks guys! I'll check out some tutorials on the map tag today!

Although I think I may still need JS to animate the information box to come and disappear

Posted: **Mon Apr 21, 2014 3:15 am**

srachit wrote:Thanks guys! I'll check out some tutorials on the map tag today!
Although I think I may still need JS to animate the information box to come and disappear

Correct you can run a js function instead of a link that will take care of that. Maybe even some jquery.

Posted: **Wed Apr 23, 2014 9:37 am**

Sorry if this is me being really stupid, but I tried following this link to try and create it: http://www.tutorialspoint.com/javascrip ... ge_map.htm

I will eventually use a proper javascript file to bring up various text boxes and what not, but for now I just wanted to test it.
I decided to use this image https://encrypted-tbn2.gstatic.com/imag ... Dyb_WESesg and try and map out the horses for a start. Any idea what I'm doing wrong?

Code: Select all

<html>
	<head>
	   <title>Map Tag Test</title>
	</head>

	<body>
	   <img src="/images/farm.jpg" alt="Farm Map"
                border="0" usemap="#farmMap" />

	   <map name="farmMap">
		<area shape="rect"
			coords="500, 10, 600, 30"
			target="_self"
			onMouseOver=alert("Mouse over horse")/>
	   </map>
	</body>
</html>

Posted: **Wed Apr 23, 2014 1:32 pm**

have you right mouse clicked over horse and then clicked inspect element to see if you see any issues? Also does the console say anything? F12 in chrome then console.

Posted: **Wed Apr 23, 2014 3:40 pm**

Are you building these by hand? There are some pretty nice tools online for building image maps

Posted: **Thu Apr 24, 2014 12:24 am**

hallsofvallhalla wrote:have you right mouse clicked over horse and then clicked inspect element to see if you see any issues? Also does the console say anything? F12 in chrome then console.

Thanks that helped me debug it, my path to the image was wrong

Jackolantern wrote:Are you building these by hand? There are some pretty nice tools online for building image maps

Will check that out

Indie-Resource.com

Javascript Help

Javascript Help

Re: Javascript Help

Re: Javascript Help

Re: Javascript Help

Re: Javascript Help

Re: Javascript Help

Re: Javascript Help

Re: Javascript Help

Re: Javascript Help