Develop Reference

change the button color according to what we want with phaser 3

I'm just learning to make a button, to change the color of the button when we hover over one clickable image. for example when we point the cursor to one of the colored images, (red, blue, yellow), then when we click the color image that we like for example click the yellow color,
then the button changes, to yellow, is there an example for me in the phaser that points to it, using phaser 3

Add the images and the button, and use setTint() to change the button color. (Or setTintFill().)
var image1 = this.add.image(....);
var image2 = this.add.image(....);
...
image1.setInteractive().on('pointerdown', function() {myButton.setTint(0xff0000)});
image2.setInteractive().on('pointerdown', function() {myButton.setTint(0x0000ff)});
The funny thing in your example is that you want to use images as buttons, and a button as an image...

you can do this with vanilla JS, take a look on the example: https://codepen.io/lessadiogo/pen/yLyvxQQ
HTML:
<div class="img" data-color="yellow" onclick="changeBtnColor('yellow')"></div>
<div class="img" data-color="green" onclick="changeBtnColor('green')"></div>
<button>I got changed!</button>
CSS:
.img {
width: 100px;
height: 100px;
float: left;
}
.img[data-color=yellow] {
background-color: yellow;
}
.img[data-color=green] {
background-color: green;
margin-left: 15px;
}
button {
margin: 15px;
padding: 10px;
font-size: 14px;
}
span {
padding-top: 40px;
clear: both;
display: block;
font-size: 12px
}
Javascript:
function changeBtnColor(color) {
document.querySelector('button').style.background = color
}
Hope it helps.

The accepted answer works, but it has a couple of caveats. setTint is a multiplicative function: it takes the pixel colour of the game object (images, in this case) and multiplies it by the given colour. If your base images are pure white, then it will work great and you've got no problem. However, if your images (or text, or whatever you use) are a different colour, then it won't work as expected.
Take the following example, where I've used a Text object:
The first line of text has a base colour of #F2E675. The second line of text has a base colour of #FFFFFF (pure white), but with .setTint(0xFF00FF) applied. And it works great!
However, the third line has the same pale yellow base colour as the first (#F2E675). When I apply .setTint(0xFF00FF), it actually comes out as #F20075 - more like a kind of hot fuscia. And this is because the base colour is different, and since tint multiplies, the outcome looks different. And if your text (or image) is black, then setTint() will do nothing, because - just like maths - multiplying a number by #000000 will still give you #000000.
If you're using Text as I am here, you can instead use setColor(). The following image is identical to the one above - 3 lines of text in pale yellow, pure white and pale yellow again, but this time using .setColor('#FF00FF') on both the white & yellow text. As you can see, in both instances, the text is actually showing as #FF00FF.
Note that setColor() is a function of Text. If you want to swap colours for an image, either use setTint as above, or (if that doesn't give you the results you want) generate a separate rollover image and use that.

Is there a way to achieve smoother transitions between images using lightbox2?

I'm using Lightbox2: http://lokeshdhakar.com/projects/lightbox2/.
The plugin seems to have been written in a way that produces a 'flash' effect when navigating to a new image in a collection. I believe this is because the old image simply disappears, rather than fading out first or crossfading (this would be ideal) with the new image that is fading in.
For a demo of this flaw, just view the example on the Lightbox2 link above.
Is there a way to add some sort of fade out transition when the user advances to the next image? As a developer rather unskilled in JS, what could I add to the lightbox.js script that would allow me to achieve 100% smooth transitions between images?

I can't work out a way to fade out the image like you suggested, but I think this really helps to avoid the white flash between images.
In the lightbox.css file between lines 43 and 51, simply change the background colour to black, or something similar, basically meaning you'll get a black flash instead of white. If you still want a white border around the image, just add one here (You'll also need to remove lines 59 to 61). So you'll end up with this:
.lb-outerContainer {
position: relative;
background-color: black;
*zoom: 1;
width: 250px;
height: 250px;
margin: 0 auto;
border-radius: 4px;
border: 4px solid white;
}
Also, if you're not happy with the fade in speed, take a look at line 313 in the lightbox.js file.
Specifically on line 316, change ('slow') to a numerical value e.g. (800).
// Display the image and its details and begin preload neighboring images.
Lightbox.prototype.showImage = function() {
this.$lightbox.find('.lb-loader').stop(true).hide();
this.$lightbox.find('.lb-image').fadeIn('slow');
this.updateNav();
this.updateDetails();
this.preloadNeighboringImages();
this.enableKeyboardNav();
};

Apply a color tint to a specific color in an image using javascript

I have a lightbulb image, which the glass bulb is pure white (#ffffff) and the cap is gray (#757575). Is there a way to change my image from:
to: (the #ffffff color will become #f3e73c)
using javascript only (or probably, jQuery)?
(sorry, still can't post pictures, all I can give is the links)

here you go: CSS approach:
http://jsfiddle.net/ea77vbLf/
.bulb{
height: 65px;
width: 65px;
background-image: url(http://i.stack.imgur.com/RkEGo.png);
}
.bulb:hover{
background-image: url(http://i.stack.imgur.com/qPrTk.png);
}
CHECK THIS OUT! CSS WITH JAVASCRIPT/JQUERY CHANGES COLOR EVERY 3 SECS!
http://jsfiddle.net/ea77vbLf/1/

Why not make the white part of the image transparent instead of white, then place it in a DIV of the same size, and change the background colour of the div

jQuery Hover Function - When hover over a DIV, an IMG (sprite) should change background

Having a little issue over here.
I am trying to make a background image change to it's hover position (sprite), when i hover on a "DIV".
The image is inside this "DIV".
I have done an example in JSFIDDLE, but without sprite, just a background color.
Example JSFiddle
Tried this, but nothing:
$( "#box" ).hover(function(){
$( "#box_sm" ).css("background","black");
});

Why do you need js for it, you can do this in css only:
#box:hover > #box_sm{
background: white;
}
As you want to change your sprite then you can try changing its background-position property like this:
#box_sm{
background: url('yoururlofsprite') 0px 0px no-repeat;
}
#box:hover > #box_sm{
background: url('yoururlofsprite') 20px 20px no-repeat;
}
If you are asking about why your fiddle is not working because you forgot to include jquery from the left top Framewoks and Extensions. Also change your background to other default color to see the code working.
Your fiddle

Your JSFiddle demo has 2 problems:
Firstly, jQuery isn't included (you can include it that with the Frameworks and Extensions dropdown in the left sidebar). Your demo is throwing:
Uncaught ReferenceError: $ is not defined
Secondly, you're changing the #box_sm background colour from white to white, so you will not notice any changes even after jQuery is added.
Here is a modified JSFiddle demo that I've included jQuery on and set the default background colour of the #box_sm element to blue. When you now hover over the #box element, the #box_sm element's background will change to white.
If you want the background to change back when no longer hovering, you can drop the JavaScript completely and just make use of CSS's :hover:
#box:hover #box_sm {
background-color: white;
}
JSFiddle demo.

Hover over image, darken background only

I would like to be able to hover over an image and only the background itself to turn black (with opacity to control how much). I already have have an effect for the image itself when it's on hover, but I would like to add an effect where the background which is white to turn to a darker color. Being able to manipulate it later on with opacity and transition would be best, but I have not been able to find css3 or jquery code that works for this so far to get me to that point. Any help would be appreciated.
html
<div class="template_design2" style="margin-top:100px; margin-left:5px;"></div>
css
.template_design2 {
background-image:url(img/template_design2.jpg);
width:740px;
height:280px;
background-repeat:no-repeat;
float:left;
}
.template_design2:hover {
background-position:0 -280px;
}

You need to add a class to your <a>s that contain the background images, so you can target them.
You use .template_design:hover, so to target the first one (since it has no class, but you can use its ID to test it works quickly, then assign all <a>s inside .template_design a class so you can target them all at the same time):
.template_design:hover a#zapzonePoster { opacity: 0.5; }
Here's a fiddle showing how it works:
http://jsfiddle.net/v6aNY/
So once you know that's working, you could then assign a class so it would be more like:
.template_design:hover a.thumbnail { opacity: 0.5; }
... which will target all of them, so you only need one rule to govern it, instead of many.
Here's the same fiddle updated with a class of .thumbnail:
http://jsfiddle.net/v6aNY/1/