Develop Reference

How to do a web page diagram with clickable locations

Never done this before, but I think people used to capture the location of the click, if possible, and map that to a location in a bitmap image. That just seems like a whole pile of trouble to me, especially with a resizing of the image.
Now I suspect a better way is to have an SVG image, with anchor elements embedded, so they adjust their location with a resizing.
Is there, on the very slim chance, any other method?

Using svg is the easiest option there. Use svg.js, raphaёl or snap.svg or some other library. I prefer svg.js (plugins available, object oriented, syntax sugar for some methods, lightweight) but basically they are all the same though neither of them is perfect. So here is the code to create a clickable line (save it to .html file and run, don't forget to download svg.js):
<div id="svg"></div>
<script src="svg.js"></script>
<script>
onload = function() {
var draw = SVG('svg') //we are going to draw in a div with id='svg'
var line = draw.line('30%', 80, 180, 60) //coords can be in %, px or other css units
line.attr( { 'stroke': '#f00', 'stroke-width': 5 } ) //styled with css
//there are also shortcut methods like stroke('#f00')
.on('click', function() { draw.text('click') }) //method calls can be chained
}
</script>
Svg elements are part of html and they are styled with css, so it's much easier to manipulate them.
Download svg.js and see examples at https://svgdotjs.github.io/installation/
Read documentation at https://svgdotjs.github.io
Forget about mapping, it's boring unproductive and hard to maintain. There might be other options but I doubt there is something simpler than svg (if you use a library).
Since you were considering usage of mapping to make clickable locations on a diagram I suppose you are not drawing some trivial charts and existing charting libraries (there is plenty either svg based or not) won't serve you. Writing a library that will draw your kind of diagrams using svg library of your choice shouldn't be hard.
To make such a library I just write functions (or wrapper objects) to draw each class of objects (one function per class) that needs visual representation plus a couple of auxillary functions (e.g. for conversions between coordinate systems).

This is done with the usemap attribute of the img or object tag along with an associated map tag containing area tags that define arbitrary shapes, each of which can be associated with an href.
The following example is from the current HTML5 spec draft at W3C
<p>
Please select a shape:
<img src="shapes.png" usemap="#shapes"
alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.">
<map name="shapes">
<area shape=rect coords="50,50,100,100"> <!-- the hole in the red box -->
<area shape=rect coords="25,25,125,125" href="red.html" alt="Red box.">
<area shape=circle coords="200,75,50" href="green.html" alt="Green circle.">
<area shape=poly coords="325,25,262,125,388,125" href="blue.html" alt="Blue triangle.">
<area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"
href="yellow.html" alt="Yellow star.">
</map>

Image map selection in svg

I am putting together an interactive for a biology project. I want to have the user click on a hyperlinked area of an image to link to more information. I am excited by SVGs because selections can be linked directly to the path without creating an image map overlay.
I used Illustrator to create the SVG and assigned a link to the path in the Attributes panel, but I was disappointed that the link is not active in the browser.
Here is that SVG: http://nspowers.org/bio/flower.html.
Next, I tried ImageMapster. I referenced the US map example (http://jsfiddle.net/juvyh/)
$('img').mapster({
mapKey: 'state'
});
to generate this:
<img src="http://nspowers.org/bio/flower.svg"
usemap="#usa" style="width:202px;height:151px;">
<map id="usa_image_map" name="usa">
<area href="#" state="stamen" full="Flower Identification" shape="poly" coords="103.709,42.484 96.906,45.624 92.981,55.306 94.551,65.249 102.663,70.482 115.484,72.314 120.979,66.557 122.025,57.399 120.194,50.596 125.165,60.539 126.735,67.604 123.072,78.07 114.437,83.042 113.391,84.874 99.892,86.705 85.916,78.594 80.421,69.436 77.281,59.231 81.468,49.026 90.103,42.484 95.598,39.868">
here: http://jsfiddle.net/nspowers/juvyh/1971 using the Illustrator SVG code.
I do not understand why the selection area is different from the shading-on-hover.
I would appreciate learning the cause of this difference and if there is a better workflow to achieve paths that can be hyperlinked directly within the SVG that will display in the browser.

It appears that the fill="none" attribute on the polygon is what is suppressing the link.
If you change that to fill="rgba(0,0,0,0.0)" (fully transparent black) the link works fine.
Here is a jsfiddle: http://jsfiddle.net/FE9LD/
And here is a jsfiddle with some css to add in the highlight effect (may need latest chrome): http://jsfiddle.net/FE9LD/1/

If you set pointer-events="fill" it will use the fill area as a link no matter what the value of fill is.
<a xlink:href="http://nspowers.org/flower-desc.jpg" >
<polygon fill="none" pointer-events="fill" points="103.709,42.484 96.906,45.624 92.981,55.306 94.551,65.249 102.663,70.482 115.484,72.314
120.979,66.557 122.025,57.399 120.194,50.596 125.165,60.539 126.735,67.604 123.072,78.07 114.437,83.042 113.391,84.874
99.892,86.705 85.916,78.594 80.421,69.436 77.281,59.231 81.468,49.026 90.103,42.484 95.598,39.868 "/>
</a>
Demo here

Javascript - How to change color of parts of an image

I have an image that is plain white. I'm using the <map> and <area> tags to make little sections that call a function, but I also want to change the color of each section. How can I do this?
EDIT: I also want to make it so that I can change the color later, and I want to use Javascript because the color depends on what a certain variable is.
EDIT 2: The color change can't just be on mouse over.

this will initially set a color to it in css.
set an id to each of those tags
<map id="my_fake_id">
in CSS
#my_fake_id {
color:#color_number;
}
to change it later all you have to do is call a function, check that the value is equal to what you want it to be equal to, then set the css color to what you want.
var change_color = function(param){
var exampleValue = whatever-the-value-is;
if(param == exampleValue){
$("#my_fake_id").css('color','red');
}
}
EDIT:
see this fiddle for the correct idea and starting point
http://jsfiddle.net/mrQJu/2/

EDIT: Per your comment on the original question, this will not change the color permanently, only temporarily on mouse over.
There's a couple of ways that you could do it. First would be to overlay some divs for each area of the map and color the divs. You can also do this by overlaying images and having an image appear over the section of the map that you hover the mouse over.
So for example, if you have a map of the world and you want to highlight North America on mouse over, make an image of the North America section of the map and overlay the div on the existing image so that it appears on mouse over.
A better (and easier way) to do this is to create one image that is the width of the original image times the number of <area>s plus 1. The left most area of this long image will have your original image, with copies of your original image stacked next to each other to the right, each copy with the desired area highlighted.
-------------------
|orig.| 1 | 2 |
| | | |
-------------------
Then use CSS to shift the image to the left so that the highlighted area shows on mouse over. This has the added advantages of only needing to load one image in the browser, and it also reduces flicker.
Hope this makes sense; if you need further clarification leave a comment.

Something like this may work
<area shape="rect" COORDS="0,0,800,600" href="#" onmouseover="this.style.backgroundColor='#00FF00';" onmouseout="this.style.backgroundColor='transparent';"/>
Or if you want to change the color if the user selects it
<area shape="rect" COORDS="0,0,800,600" href="#" onclick="this.style.backgroundColor='#00FF00';"/>
If the color is based on a variable...
use onclick = changeMyColor()
function changeMyColor(){
var changeThisColor = document.getElementById('yourElement');
changeThisColor.innerHTML += '<area style="background-color:'+ yourColorVariable +';"
}

Using an IMG Map to display larger images

I am using an IMG Map that has many small pictures. When I hover over each image it will display a larger image. How do I do this? I do not mind using javascript, css, etc as long as it works. Please provide an example.
HTML OF IMG MAP
<img src="img.jpg" alt="Main Photo - Please View With Images On"
usemap="#Map" class="center" style="width:900px;" border="0" />
<map name="Map" id="Map">
<area class="1" shape="rect" coords="4,3,225,150" />
<area class="2" shape="rect" coords="2,152,221,303" />
<area class="3" shape="rect" coords="3,303,221,452" />
</map>
Each class would have a different image to display larger.

Here's a way to do it with ImageMapster:
http://jsfiddle.net/zSBL5/
To make this work with its built-in tooltip API you need to do a couple things. First add an attribute to each area like this:
<area data-key="2,all" shape="rect" coords="0,90,82,170"
href="http://www.shelterness.com/pictures/amazing-diy-photo-tiles-1-500x373.jpg" />
Note data-key. This is ImageMapster's "mapKey". The only reason we need it for your situation is to create a single area group called "all" that can be used to show the same tooltip for each area. Each area will have an attribute like this but with a different number, e.g. data-key="3,all", data-key="4,all", and so on.
Then here's the code to bind imagemapster:
$('img').mapster({
toolTipContainer: $('#tooltip-container'),
mapKey: 'data-key',
areas: [ {
key: 'all',
toolTip: true
}],
showToolTip: true,
onShowToolTip: function(data) {
if (this.href && this.href!='#') {
data.toolTip.html('<img src="'+this.href+'">');
}
}});​
Here's what each option means:
1) toolTipContainer should contain the HTML for a template to show the tooltip. In the fiddle, you'll see I added a hidden div with ID "tooltip-container"
2) mapKey is the name of the attribute you added to each area. This attribute can contain one or more comma separated values. Imagemapster groups together areas for highlighting that share the first value, so use different ones if you don't need to group any areas. The 2nd value should be the same for each area, I use this to activate tooltips for all areas.
3) areas is an array of area-specific formatting information. Usually you use this to control how the highlighting effects on each area are shown. In your case I'm just using it to activate tooltips for all areas. The key all matches every area, since they all have that as then 2nd key, and toolTip: true enables tooltips. Normally you would say toolTip: "some text specific to this area:" and that text would just get shown in your default tooltip container. In your case, we want to show an image, and I want to grab the image URL from the area itself, so I need to handle it in a function when the tooltip is shown.
4) showToolTip says enable tooltips for the whole map.
5) onShowToolTip defines a function that gets called whenever a tooltip is shown. From here you can intercept it and change the contents to show the image from that area.
This should be simpler - but the tooltip API in imagemapster is really designed around a very simple model where you just have some hardcoded text for each area. This is a workaround to grab the URL from the the href of each area.

I think you want something like the below given fiddle. Code written is very rough & can be optimized. Just check you want this or something else.
Demo: http://jsfiddle.net/3GF6s/3/

How can I best implement rollover and rollout events for multiple overlapping elements?

Problem:
I'm working on a website where there is a "dial" that displays a number of tabs representing different divisions of an umbrella company:
At the moment I have everything prepared in HTML/CSS (positioning of each of the tabs). The inner circles are on a higher z-index as the tabs will need to animate outward when rolled over (I can achieve this part). The images for the tabs actually look like this:
Unfortunately it didn't occur to me until now that because of the mechanics of rollover and rollout in JavaScript, the boundaries for each item are square, meaning they overlap all over the place. For example, the centre circle's rollover area is actually this:
Which detracts some massive clickable/rolloverable areas on the inner circle of tabs. This effect then stacks with each of the tabs, rendering a standard approach non-viable.
Approach:
This is fine, what I plan to do now is measure the distance and angle of the mouse from the centre of the dial and use these values to determine the relevant tab, and work from there. I'll basically do the following:
Collect angle (using atan2) and distance (using pythag).
Apply my .click() to the entire dial, and work with these values from there.
Use setInterval() to constantly check which item is rolled over and work with its animation from there.
Question:
I'm not exactly sure how to implement what I am doing (with JQuery). I know how to do all the Math stuff once I have the coordinates that I need, I'm just not confident in getting the actual coordinates (ensuring the same results cross-browser).
How can I best gather the coordinates of:
The centre of my dial.
The cursor (assuming that the cursor is within the same axis as the centre of my dial i.e. rolling over the centre of the dial will mean both sets of coordiantes are the same).
Note:
Taking the above, anything that achieves the same result (being able to have proper rollover detection for overlapping elements) is equally as helpful.

To get the center:
var dialPos = $( "#Dial" ).offset();
var center = {
x: dialPos.left + $( "#Dial" ).width() / 2,
y: dialPos.top + $( "#Dial" ).height() / 2
};
Cursor coordinates:
$( "#Dial" ).mousemove(function( e ) {
var x = e.pageX - center.x;
var y = e.pageY - center.y;
});

You can define an image map over the stack of layers. The map will define clicking/hovering regions, and the browser will take care of hit detection. With Adobe ImageReady, I have mapped a portion of your reference image so that "Reprise" and "Initiative" are hotspots:
ImageReady produced the following HTML:
<img src="images/Imagemap.png" width="488" height="488" border="0" alt="" usemap="#Imagemap_Map">
<map name="Imagemap_Map">
<area shape="poly" alt="" coords="82,336, 138,303, 130,287, 123,265, 120,238, 125,206, 136,179, 158,152, 178,136, 209,122, 244,117, 244,55, 215,60, 184,67, 158,77, 122,101, 97,130, 73,169, 62,202, 59,224, 58,253, 61,281, 73,318" href="#">
<area shape="poly" alt="" coords="73,72, 112,111, 138,89, 161,76, 187,66, 214,59, 244,57, 244,0, 205,4, 165,12, 118,34, 94,51" href="#">
</map>
(As you can see, mapping arbitrary regions can be exausting, and I dare to say virtually impossible without the use of a tool.)
You'd apply the map to a transparent image on top of everything. The final assembly can be imagined as the following stack:
The regions were highlighted just for reference. The real composition should be 100% transparent.
Good luck!