Swapping pixels in an icon with javascript? - 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.

Related

HTML5 Canvas change color HEX

I have a question about my HTML5 canvas, how can I change the color of a shape using HEX?
I have been able to change the color and size of a text but I would like to do the same to a shape, in this case a circle.
Right now you enter a text in a textbox and you can change color and size.
Also, I want to be able to click on the canvas to paint one circle, then change color and make another circle in a different color than the first one.
My code for the text jsfiddle.net/e43nfx1d/4/
My code for the circle jsfiddle.net/w8wsv7sr
It was pretty easy to do the changes on the text but now, with the circle, Im totally lost.
/Wilma
As I realized your question, your problem is to changing the color of filled circle.
There isn't any big problem here; You can change it as the same way of changing the text color.
Just like this:
context.fillStyle = "#333";
// Or any other color format that css supports
Here's your working example: http://jsfiddle.net/76koy1x7/

html, svg, css how to make mouse event not fire on transparent color

Is it possible to make a mouse event not fire on transparent color of an image?
I have a big background image and several small images which are shaped in different shapes (for example the shape of a ball). I want to catch mouse events on these small images. The problem is that events fire on the whole rect of an image. I can use image map on the background image but this is not a good idea because the small images will be changing under mouse (sprites).
You can check a number of things, either the fill of an svg shape, path or rect or also the opacity property depending on how you have made the element transparent.
For instance:
$('svg rect').mouseenter(function(){
if($(this).attr('opacity') != 0){
$('body').append('hovered element with colour');
}
});
Here is an example:
http://codepen.io/EightArmsHQ/pen/zxLbXO
Edit
With more complex images like
http://mobilite.mobi/wp-content/uploads/white-rabbit-wallpapers-9.
You have two options. The (to me, a graphic designer turned web designer) the simpler way would be to create an SVG hit map)
But a solution that would be far more thorough would be to use HTML5 / JavaScript canvas element which can have all of this stuff included, but will be more complex to initially code.
If you use the words canvas alpha hit detection I'm sure you'll be able to google some great results, such as
Image map by alpha channel
what you can do is add classes for those small small shapes. for example
<div class="big_back" id="big_back">
<div class="small_shapes" id="shape1">
</div>
<div class="small_shapes" id="shape2">
</div>
<div class="small_shapes" id="shape3">
</div>
</div>
and in jquery you can call the method as follow
$(document).ready(function() {
$(".small_shapes").mouseenter(function() {
alert("I enteres shapes");
});
});
If this is not what you are looking let me know.

How can I use images to change the colour of objects?

can I make an object coloriser like this? Is about car coloriser.
List of 23 thumbs images which means a colour or a mix of colours.
When you click the colour to show the image with car in the right colour.
You need to have an image of each car with each color.
For each thumb image, give it an id corresponding to its color, and one class for a listener.
Create a click listener for the class, and display the correct image based on the clicked thumb image id.
If you want a better answer you're going to have to provide some code.

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

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.

Categories

Resources