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!
Javascript Help
- hallsofvallhalla
- Site Admin
- Posts: 12023
- Joined: Wed Apr 22, 2009 11:29 pm
Re: Javascript Help
http://www.html-map.com/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.
- Jackolantern
- Posts: 10891
- Joined: Wed Jul 01, 2009 11:00 pm
Re: Javascript Help
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
Re: Javascript Help
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
Although I think I may still need JS to animate the information box to come and disappear
- hallsofvallhalla
- Site Admin
- Posts: 12023
- Joined: Wed Apr 22, 2009 11:29 pm
Re: Javascript Help
Correct you can run a js function instead of a link that will take care of that. Maybe even some jquery.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
Re: Javascript Help
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?
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>
- hallsofvallhalla
- Site Admin
- Posts: 12023
- Joined: Wed Apr 22, 2009 11:29 pm
Re: Javascript Help
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.
- Jackolantern
- Posts: 10891
- Joined: Wed Jul 01, 2009 11:00 pm
Re: Javascript Help
Are you building these by hand? There are some pretty nice tools online for building image maps
The indelible lord of tl;dr
Re: Javascript Help
Thanks that helped me debug it, my path to the image was wronghallsofvallhalla 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.
Will check that outJackolantern wrote:Are you building these by hand? There are some pretty nice tools online for building image maps