Develop Reference

The color of and <input type="color"> element on a page DOESN'T match its value attribute

I am working on a personnal exercise where I create a small app to allow users to update colors of different parts of an SVG using the <input type = "color"> element.
The SVG I am playing with is a simple cloud drawings with writing in it. You can modify 3 parts: cloud's stroke color, cloud's fill color and writing's color.
See it live:
live: https://argonathmos.github.io/SVGfun/
code: https://github.com/argonathmos/SVGfun
It is a simple UI with 3 areas:
A Random button that applies random colors to each parts of the
SVG.
Three <input type="color"> element for each part of the SVG to
modify each colors by hand.
A Download button that allows the
user to export the SVG with the custom colors applyied to it.
Here is what I notice that bothers me and don't know how to fix yet:
When I click "random", the SVG colors are updated, as well as the value of the <input type="color"> elements, as well as the color of the element on the page (ie the little squares color matches the colors of the associated SVG section).
When I apply a color individually through the <input type="color"> element the color of the SVG is updated as well as the value of the <input type="color"> element, and so is the color of the input color element on the page (the little square).
But If I click "random" after having already selected a color from the color picker by hand:
The SVG colors are updated, the value attribute of the <input type="color"> elements as well, but the color of the element on the page doesn't update its stays the same as the previously hand picked color. (ie the little square color DOESN'T match the color of the associated SVG section eventhough the value attribute of the element does.)

The problem appears to be, that you are using
strokeColorInput.setAttribute('value',strokeColor);
to update the value of your color input fields. That is able to set the color for fields you did not already make an explicit choice in, but once you did, it doesn’t work as expected any more.
(This is probably a manifestation of the well-known attribute vs property problem/issue here, see What is the difference between properties and attributes in HTML?)
Make that
strokeColorInput.value = strokeColor;
instead, and it appears to be working fine.

Change strokeColorInput.setAttribute, fillColorInput.setAttribute, pathColorInput.setAttribute to:
strokeColorInput.value = strokeColor;
fillColorInput.value = fillColor;
pathColorInput.value = uniquePathcolor;
as you are updating HTML values. .setAttribute is for CSS attribute values.

How to show a portion of canvas

My canvas has a background image. That image has different part such as level-1,level-2 etc. I will create few buttons. When button-1 is clicked only show level-1 portion of background image and hide other levels. Similarly for button-2 is clicked only show level-2. For example the background could look like this image:

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 +';"
}

Swapping pixels in an icon with javascript?

I have a menu made up of icons and labels. When an icon is clicked the relevant label turns blue. I've recently heard about a technique called swapping pixels, and I wondered if it was possible to make the icon turn blue also?
Pure Javascript if possible!
This is the code that I have at the moment...
function init() {
[].forEach.call(document.querySelectorAll('.navico'), function(el) {
el.addEventListener('click', imageButtonClickHandler);
});
function imageButtonClickHandler() {
this.id.search("aboutnav");
if(this.id.match("aboutnav")) {
grey();
var a = document.getElementById("a");
a.style.color = 'blue';
a.style.fontSize = '15px';
}
the function 'grey' that gets called in the function above is JQuery and was created by my partner so I don't understand it, but it basically turns the selected menu option back to grey after it is deselected or a different icon is clicked.
Thanks in advance.

If the icon is an image, there isn't a way to use JavaScript to modify the image directly. There are, however, techniques for modifying how images look by using other images.
For example, if "turning the icon blue" meant that you wanted to change a specific pattern of colors in the icon you could create another image with just the parts you want to turn blue and everything else in the image transparent (think cut-out). Then, position the image at the same location as your icon with a higher z-index but set its visibility:hidden (or display:none, if you'd rather). Then turning the image blue would just mean showing the image.
If turning the icon blue meant that you wanted it to just have a blue "tinge" to it, you could create a semi-transparent png and use the same technique. You could also accomplish a blue tinge by just creating an element (say a div) and setting the background color to blue, then setting the transparency. In this way you could choose arbitrary colors instead of having to create an image for each color you wanted to use.

Click on a Canvas - Get a list of options depending where clicked

I am not sure how to do this. Can it be done? How can it be done eligently? And hopefully can it be done without the need for another plugin library (jquery is ok) - I am trying to cut down the number of js files.
I have a canvas with a map in it. The user can click on the map. Then I want a white square to appear near to where the user clicked (rounded corners and a black border) with a few options on it for the user to select one. These can be text options, eg 'Country Summary', 'GDP', etc. Then the user selects one and the info appears in a area to the left, and the white option square automatically disappears.
Is this possible? Can it be done without the need for a window with a blue bar at the top and all the other window baggage?
Hope someone can help.
Jon

Yes, it can be done. You don't have to do it in the canvas, you can use regular HTML for that part.
Just add a new element to the page with the following CSS properties
position:absolute;
display:inline;
(as well as some CSS for rounded corners and black borders)
and then set its X and Y properties to the X and Y mouse coordinates of the event.
Then work with that element as you would with anything else.