We Keep Coding

JavaScript How to make an image to change color onmouseover?

I have a button and an image and want them to change color onmouseover.
The button changes color fine:
<script>
function secondColor(x) {
x.style.color="#000000";
}
function firstColor(x) {
x.style.color="#ffaacc";
}
</script>
<input onmouseover="secondColor(this)" onmouseout="firstColor(this)" type="submit"><br>
How can I do the same thing with the image? Is there any way:
<img src="..." ......
Or do I have to have a second image to replace the first one onmouseover and this is the only way?

If you don't care that much about supporting older browsers, you could use the new CSS3 filter brightness. In chrome, you could write something like this:
var image = document.getElementById('img');
image.addEventListener('mouseover', function() {
image.setAttribute('style','-webkit-filter: brightness(1.5)');
}, false);
image.addEventListener('mouseout', function() {
image.setAttribute('style','-webkit-filter: brightness(1.0)');
}, false);
I don't recommend this approach, though. Using another picture while hovering would be a better solution.

I know that this is old, but you don't need two images. Checkout my example using one image.
You can simply change the position of the background image.
<div class="changeColor"> </div>
JavaScript
var dvChange = document.getElementsByClassName('changeColor');
dvChange[0].onmouseover = function(){
this.style.backgroundPosition = '-400px 0px';
}
dvChange[0].onmouseout = function(){
this.style.backgroundPosition = '0px 0px';
}
CSS
.changeColor{
background-image:url('http://www.upsequence.com/images/multibg.png');
width:400px;
height:400px;
background-position: 0px 0px;
}
.changeColor:hover{
background-image:url('http://www.upsequence.com/images/multibg.png');
width:400px;
height:400px;
background-position: -400px 0px;
}
You can also try changing the opacity of the images onmouseover and onmouseout.
I don't have an example for that, but its super easy to find and I am sure it has be answered already on stack exchange somewhere.
In the JSFiddle below there is Javascript and non-Javascript examples.
http://jsfiddle.net/hallmanbilly/gtf2s8ts/
Enjoy!!

I think you have to use a second image. I recently cam across the following article describing how to do image crossfading on hover using css. Crossfading Image Hover Effect

You can change image SRC on mouse over, you can load two images and use fade effects to "change" them. But better, you can use image as DIV background, make sprite and just move BG on mouse over.
Loading of two different images bring you to disappearing when hover and second image loading. Better do not use JS at all. Make sprite from two images, put it as BG of DIV and write two CSS for DIV, normal and when hover.

If you have access to JQuery use hover function. If you want to change image
$('#imageid').hover(function(){
//change image or color or opacity
$(this).attr('src', newImageSrc);
});
add this function in document ready function.

fadeTo() fades ALL images instead of the hovered image

I'm using the .fadeTo() jQuery effect on the featured images on wordpress. How I have setup the code is that if the mouse hovers over the image, it fades to 0.7, when the mouse leaves, it fades back to 1:
jQuery(function($) {
$(window).load(function() {
$('.image').mouseover(function() {
$('.image').fadeTo('fast', 0.7);
});
$('.image').mouseout(function() {
$('.image').fadeTo('fast', 1);
});
});
});
The class given is ".image" and I have put it in a div within the wordpress loop on the featured image code likes this:
<div class="image"><?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?> <!-- If has featured image, GET --></div>
The problem that I'm running into is that every time I'm hovering over a SINGLE image, it fades ALL images on the page. What I really want is to have it fade the image that my mouse is hovering over, what am I doing wrong?

Since all images have the .image class on them, jQuery is returning all of those images when you hover over any of them.
Try changing the
$('.image').fadeTo('fast', 0.7);
to
$(this).fadeTo('fast', 0.7);
and same for the mouseout event as well.
Here's a quick EXAMPLE to help.

Once you have a mouseover event on that element fired you do not need to call the jQuery selector again.
Using $('.image') you will call all elements with that class and apply the fade to them. If you use this instead then you refer only to the element that has the mouse over it. You can try this instead:
$('.image').mouseover(function() {
$(this).fadeTo('fast', 0.7);
});
$('.image').mouseout(function() {
$(this).fadeTo('fast', 1);
});

how to remove hover on click

I'm working on a jQuery game. I have a 4 divs in a 2x2 design. The player needs to pick 1 option and verify with another button. The thing is, I have a hover effect adding a class which changes the background with a low opacity, and a click effect setting the background with a higher opacity. For divs 2, 3 and 4 it works fine - I hover and background changes color with opacity 0.3 and when I move the mouse out, it goes back to white. And when I click it, it changes the background to 0.4 and the hover doesn't affect them anymore. However, this is not working for the first div: the div changes background color on hover, but when I click it ,it keeps the hover color, and when I mouse out I see the click color, and every time I hover it changes the hover color again and so on.
Why is it happening only on div 1?
Code:
//hover effects
$(".respuesta1,.respuesta2,.respuesta3,.respuesta4").hover(
function () {
$(this).addClass("respuestahover");
},
function () {
$(this).removeClass("respuestahover");
});
//on click function for div1
$(".respuesta1").on("click", function () {
//if it hasnt been clicked, toogle class and change var to true
if (prendido1 == false) {
$(this).toggleClass("respuesta1b");
prendido1 = true;
//if any of the other divs are clicked by the time you are clicking unclicked 1, turn them off
if (prendido2 == true) {
$(".respuesta2").toggleClass("respuesta2b");
prendido2 = false;
}
if (prendido3 == true) {
$(".respuesta3").toggleClass("respuesta3b");
prendido3 = false;
}
if (prendido4 == true) {
$(".respuesta4").toggleClass("respuesta4b");
prendido4 = false;
}
//if is already clicked, turn off and change var to false
} else {
$(this).toggleClass("respuesta1b");
prendido1 = false;
}
});
The last part is repeated for every div "respuesta2", "respuesta3", etc..
Any idea?
EDIT
I was trying to clean up the code to make a jsFiddle and I think I got it to work:
http://jsfiddle.net/bqySN/2/
I'll just leave the code there if anyone is interested, be aware the code is unpolished and it need more generalisations.
EDIT 2
After some testing I actually found the problem:
if I alter the order of my css clases the app goes crazy:
This one is correct, with hover first
.respuestahover{
background-color:#f00;
opacity:0.2;
}
.respuestab{
background-color:#f00;
opacity:0.5;
}
This one is incorrect, hover second:
.respuestab{
background-color:#f00;
opacity:0.5;
}
.respuestahover{
background-color:#f00;
opacity:0.2;
}
I'm not really sure why it is behaving like that, but I'm glad I figure it out.

You are adding a class on hover... why would you do that via javascript if you can just use the :hover state from css? For example:
#foo .element p { color: red; }
#foo .element:hover p { color: blue; }
EDIT:
Sorry, I miss the original question.
If you want to remove the hover effect after clicking, you have lot of different ways to do this. You can remove the class defined with the hover via css, or if you want a jQuery solution you can use mouseenter/mouseleave with .on and then unbind with off.
See the following fiddle example.

You should simplify the bindings to just target them a little more generically, then remove the hover classes on all of them:
$(".respuesta").on("click", function (index) {
$(this).removeClass("hover");
// do other things
});
You can also use the index to find which number they are if they're in a list.
if you want the hover to not override the click, give the click an active class and tell the hovers to work on everything but them:
$('.respuesta:not(.active)').hover(function() {
// do something
}

Content Fade In over background

I'm working on this site: http://mccraymusic.com/newsite/ and I am having trouble figuring how to fade in the navigation bar correctly over the background AFTER the background has faded when clicking "enter site." I know the navigation bar isn't styled yet. I'm pretty sure I have the right code for the navigation to fade in. Just not sure how to make it work so it fades in when I want it.
Thanks

I suspect you need to use a callback in jQuery. Basically, the second function runs AFTER the first has completed.
http://www.w3schools.com/jquery/jquery_callback.asp

Here is a fiddle of it http://jsfiddle.net/YL4p7/
Fadein has a builtin callback, just add you animation into that callback and it will execute after the background has faded in.
also add relative position to #container so that it can be seen over the bg image.
$(function() {
var images = ["black.jpg","bg.jpg"];
$('<img>').attr({'src':'http://mccraymusic.com/newsite/assets/images/'+images[0],'id':'bg','alt':''}).appendTo('#bg-wrapper').parent().fadeIn(0);
$('.move').animate({
top:200,
left:250,
});
$('.entersite').click(function(e) {
e.preventDefault();
var image = images[1];
$('#bg').parent().fadeOut(200, function() {
$('#bg').attr('src', 'http://mccraymusic.com/newsite/assets/images/'+image);
$(this).fadeIn(1000, function() {
$('.navbar').fadeIn(1000);
});
});
$('.move').animate({"left": "-=50px", "top": "-=200px"});
});
});​

I want to have the top tab stay on when clicked

Hi I am using this menu found here:
http://www.sohtanaka.com/web-design/examples/horizontal-subnav/
Problem I am having is that I want to have the Top Nav stay when clicked and showing the subs also. I hope anyone can help me out!
The Top Nav should still be active when the new page is loaded. I know how to do this server-side but not client-side with JS/jQuery

With a quick view at the page source I find this jQuery code that handles the hover event:
$("ul#topnav li").hover(function() { //Hover over event on list item
$(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color + image on hovered list item
$(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
$(this).css({ 'background' : 'none'}); //Ditch the background
$(this).find("span").hide(); //Hide the subnav
});
If you want the subnav bar to stay visible after a click or something just create an if() statement within the 'hover out' function that checks if something has been clicked, i.e.
} , function() { //on hover out...
$(this).css({ 'background' : 'none'}); //Ditch the background
if(subnavclick==0){
$(this).find("span").hide(); //Hide the subnav
}
});
And within your subnav .click() function add the setting of the subnavclick variable like so:
$("span").click(function(){
subnavclick==1;
//do other stuff
});
This should work for you....

Try changing
$("ul#topnav li").hover(function() { //Hover over event on list item
$(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color + image on hovered list item
$(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
$(this).css({ 'background' : 'none'}); //Ditch the background
$(this).find("span").hide(); //Hide the subnav
});
to
$("ul#topnav li").click(function() { //Hover over event on list item
$(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color + image on hovered list item
$(this).find("span").show(); //Show the subnav
}

Instead of doing the effect on a mouseover event as stated in the script now, you should make it work on the click event.

Most of the js code is redundant as the functionality is provided by css anyway. Just add a "clicked" class that mimics the hover pseudo-class of the li's and add and remove this on click.
http://jsfiddle.net/VirusZ/THYsK/
Also you must update the z-indices so that the submenus appear on hover even with a clicked element visible.

To generalize, you'll need to do this in your CSS file and in the JS. You'll want to find ul#topnav li:hover{...} and clone it to something like ul#topnav li.active{...}. This is the class we will apply to the currently selected menu item.
ul#topnav li.current{
background: #f00 url(topnav_current.gif) repeat-x;
}
From there, it will depend on exactly how your site will work. Will each Tab bring you to a new page, or will clicking a tab trigger an ajax retrieval?
If you're using AJAX, you can capture the LI's click events to set a class. (LIVE DEMO). If you're going with a new page on every click, you will need to have JS parse the url and set the correct item's class using $(item).addClass('current');