Javascript Help

Place for questions and answers for all newcomers and new coders. This is a free for all forum, no question is too stupid and to noob.
Post Reply
User avatar
srachit
Posts: 291
Joined: Sat Jan 05, 2013 6:10 pm

Javascript Help

Post by srachit »

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!
User avatar
hallsofvallhalla
Site Admin
Posts: 12031
Joined: Wed Apr 22, 2009 11:29 pm

Re: Javascript Help

Post by hallsofvallhalla »

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/
User avatar
Jackolantern
Posts: 10893
Joined: Wed Jul 01, 2009 11:00 pm

Re: Javascript Help

Post by Jackolantern »

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.
The indelible lord of tl;dr
User avatar
srachit
Posts: 291
Joined: Sat Jan 05, 2013 6:10 pm

Re: Javascript Help

Post by srachit »

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
User avatar
hallsofvallhalla
Site Admin
Posts: 12031
Joined: Wed Apr 22, 2009 11:29 pm

Re: Javascript Help

Post by hallsofvallhalla »

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.
User avatar
srachit
Posts: 291
Joined: Sat Jan 05, 2013 6:10 pm

Re: Javascript Help

Post by srachit »

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>
User avatar
hallsofvallhalla
Site Admin
Posts: 12031
Joined: Wed Apr 22, 2009 11:29 pm

Re: Javascript Help

Post by hallsofvallhalla »

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.
User avatar
Jackolantern
Posts: 10893
Joined: Wed Jul 01, 2009 11:00 pm

Re: Javascript Help

Post by Jackolantern »

Are you building these by hand? There are some pretty nice tools online for building image maps :cool:
The indelible lord of tl;dr
User avatar
srachit
Posts: 291
Joined: Sat Jan 05, 2013 6:10 pm

Re: Javascript Help

Post by srachit »

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 :cool:
Will check that out
Post Reply

Return to “Beginner Help and Support”