Change one DIVs Color on several

Question

I am trying to change a divs background color by clicking one of the images. The new DIV color should be the second part of the image id.

CSS

#box {
width: 200px;
height: 200px;
background-color: #3FA5D5;
}
.black {
background-color: #000000 !important;
}
.red {
background-color: #990000 !important;
}
.blue {
background-color: #990000 !important;
}
.green {
background-color: #990000 !important;
}

HTML

<div id="box">BGCOLOR TO CHANGE HERE</div>
<br />
<img id="color black" src="images/black.png" alt="" />
<img id="color red" src="images/red.png" alt="" />
<img id="color blue" src="images/blue.png" alt="" />
<img id="color green" src="images/green.png" alt="" />

Please show the code you have attempted. Note: Your ids are in an invalid format. — Gone Coding, Oct 08 '14 at 15:17
What have you tried so far? Also, FYI, spaces in an HTML id attribute aren't valid. See this question here: http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html I'd suggest you store that value in a class instead. The id field is for uniquely identifying an element, not storing metadata. — Surreal Dreams, Oct 08 '14 at 15:19
You need to show some effort on the jquery side. Stack Overflow is not here to write your code for you. — pquest, Oct 08 '14 at 15:29

Gone Coding · Answer 1 · 2014-10-08T15:43:23.987

Your ID values are not valid. Use data attributes to store the "meta data" (e.g. the color names or hex values etc):

e.g:

<img class="color" data-color="black" src="images/black.png" alt="" />

Then the code simplifies to something like: http://jsfiddle.net/TrueBlueAussie/43txyxeg/

$('img.color').click(function(){
    $('#box').removeClass("black red blue green").addClass($(this).data('color'));
});

It is usually preferable to use class for styling (as you have done, however if you are only changing the color you can simplify the code and throw away the styles:

http://jsfiddle.net/TrueBlueAussie/43txyxeg/2/

$('img.color').click(function(){
    $('#box').css({"background-color": $(this).data('color')});
});

Note: The data-attribute approach means you can have any color value (even hex colors): e.g.

http://jsfiddle.net/TrueBlueAussie/43txyxeg/5/

<img class="color" data-color="#123456" src="images/blah.png" alt="" />

Try this - added alts so the broken images are clickable: http://jsfiddle.net/43txyxeg/6/ — Surreal Dreams, Oct 08 '14 at 15:45
@Surreal Dreams: Was already clickable on Chrome, but appreciated. Thanks :) — Gone Coding, Oct 08 '14 at 15:47

score 0 · Answer 2 · answered Oct 08 '14 at 15:18

0

I suppose you want to be able to change the color of the div when corresponding images are clicked. For which you can do

$('img.color').click(function(){
    $('#box').css('backgroundColor', this.src.split('/')[1].split('.')[0]);
});

Of course, you need to change id to class because that's how you are using it.

answered Oct 08 '14 at 15:18

Amit Joki

53,955
7
67
89

If only they used a class name instead of invalid IDs :) – Gone Coding Oct 08 '14 at 15:18
@TrueBlueAussie ain't targeting them anymore :) – Amit Joki Oct 08 '14 at 15:20
Assuming the filenames are always the correctly spelled HTML color values is a stretch :) – Gone Coding Oct 08 '14 at 15:41

score 0 · Answer 3 · answered Oct 08 '14 at 15:24

Example

There are a few things wrong with your code, check out the example.

I have updated your html to use classes and data attributes.

<div id="box">BGCOLOR TO CHANGE HERE</div>
<br />
<img class="color-select" data-color="black" src="images/black.png" alt="" />
<img class="color-select" data-color="red" src="images/red.png" alt="" />
<img class="color-select" data-color="blue" src="images/blue.png" alt="" />
<img class="color-select" data-color="green" src="images/green.png" alt="" />

Added the javascript, that requires Jquery.

$(document).ready(function() {
    $('.color-select').click(function() {
        $('#box').css("background",$(this).data("color"));
    });

});

T J · Answer 4 · 2014-10-08T15:51:48.013

0

The id element should not contain white space - Assuming your image name is a valid css color name, as shown in example, you can do:

$(function (e) {
    $("img").click(function(){
        var color = this.src.substring(this.src.lastIndexOf('/')+1,this.src.lastIndexOf('.'));
        $("#box").css("background",color);
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">BGCOLOR TO CHANGE HERE</div>
<br />
<img id="color black" src="images/black.png" alt="blabk" />
<img id="color red" src="images/red.png" alt="red" />
<img id="color blue" src="images/blue.png" alt="blue" />
<img id="color green" src="images/green.png" alt="green" />

edited Oct 08 '14 at 15:51

answered Oct 08 '14 at 15:37

T J

40,740
11
73
131

Assuming the filenames are always the *correctly spelled* HTML color values is a stretch. Cute reuse of data though :) You had best fix their invalid IDs too. – Gone Coding Oct 08 '14 at 15:38
Add alt tags and the images become clickable even if they are broken. – Surreal Dreams Oct 08 '14 at 15:46
@SurrealDreams isn't it clickable..? it's clickable for me in chrome.. anyway added `alt`... – T J Oct 08 '14 at 15:52
FireFox wasn't showing me anything, but it does with alt tag values. – Surreal Dreams Oct 08 '14 at 15:54

Change one DIVs Color on several

CSS

HTML

4 Answers4