Onclick map - Button of a different color

Question

Thank you. it works perfectly.
I have one more question: we want to colorize 2 or 3 buttons on the map. How to proceed to get a button of a different color ?

the code below:
<style type="text/css">
.page{background: url(/graphics/carte/Marseille.png) no-repeat;max-width: 1280px;height: 700px;}
.radiobox {background: url(/graphics/radiobutton_unselected2.png) no-repeat center center;}
.graphical_select radiobox {background: url(/graphics/radiobutton_selected2.png) no-repeat center center;}
.radiobox, .graphical_select radiobox {width: 30px;height: 30px;}

#Q7_location_1_graphical{position:relative; top:30px;right: 75px;}
#Q7_location_2_graphical{position:relative; top:45px;left: 146px;}
#Q7_location_3_graphical{position:relative; top:-1px;right: 225px;}
#Q7_location_4_graphical{position:relative; top:-10px;right: 110px;}
#Q7_location_5_graphical{position:relative; top:-30px;left: -10px;}
#Q7_location_6_graphical{position:relative; top:10px;left: 65px;}
#Q7_location_7_graphical{position:relative; top:0px;right: 95px;}
#Q7_location_8_graphical{position:relative; top:-40px;left: -5px;}
#Q7_location_9_graphical{position:relative; bottom:70px;left: 178px;}
#Q7_location_10_graphical{position:relative; bottom:70px;left: 118px;}
#Q7_location_11_graphical{position:relative; bottom:90px;left: 65px;}
#Q7_location_12_graphical{position:relative; bottom:160px;left: 30px;}
#Q7_location_13_graphical{position:relative; bottom:172px;left: -13px;}
#Q7_location_14_graphical{position:relative; bottom:220px;left: -59px;}
#Q7_location_15_graphical{position:relative; bottom:255px;left: -37px;}
#Q7_location_16_graphical{position:relative; bottom:285px;left: 7px;}
#Q7_location_17_graphical{position:relative; bottom:320px;left: -85px;}
#Q7_location_18_graphical{position:relative; bottom:358px;left: 263px;}
#Q7_location_19_graphical{position:relative; bottom:370px;left: -2px;}
#Q7_location_20_graphical{position:relative; bottom:400px;right: 100px;}
#Q7_location_21_graphical{position:relative; bottom:390px;left: 73px;}
#Q7_location_22_graphical{position:relative; bottom:415px;left: 17px;}
#Q7_location_23_graphical{position:relative; bottom:405px;left: 54px;}
#Q7_location_24_graphical{position:relative; bottom:420px;left: -47px;}
#Q7_location_25_graphical{position:relative; bottom:405px;left: 174px;}
#Q7_location_26_graphical{position:relative; bottom:389px;right: 100px;}
</style>


<div class="input_cell clickable">
    [%RadioSelect(Q7_location, 1)%]
</div>
<div class="input_cell clickable">
    [%RadioSelect(Q7_location, 2)%]
</div>
<div class="input_cell clickable">
    [%RadioSelect(Q7_location, 3)%]
</div>
<div class="input_cell clickable">
    [%RadioSelect(Q7_location, 4)%]
</div>
<div class="input_cell clickable">
    [%RadioSelect(Q7_location, 5)%]
</div>
<div class="input_cell clickable">
    [%RadioSelect(Q7_location, 6)%]
</div>
<div class="input_cell clickable">
    [%RadioSelect(Q7_location, 7)%]
</div>
<div class="input_cell clickable">
    [%RadioSelect(Q7_location, 8)%]
</div>
<div class="input_cell clickable">
    [%RadioSelect(Q7_location, 9)%]
</div>
<div class="input_cell clickable">
    [%RadioSelect(Q7_location, 10)%]
</div>
<div class="input_cell clickable">
    [%RadioSelect(Q7_location, 11)%]
</div>
<div class="input_cell clickable">
    [%RadioSelect(Q7_location, 12)%]
</div>
<div class="input_cell clickable">
    [%RadioSelect(Q7_location, 13)%]
</div>
<div class="input_cell clickable">
    [%RadioSelect(Q7_location, 14)%]
</div>
<div class="input_cell clickable">
    [%RadioSelect(Q7_location, 15)%]
</div>
<div class="input_cell clickable">
    [%RadioSelect(Q7_location, 16)%]
</div>
<div class="input_cell clickable">
    [%RadioSelect(Q7_location, 17)%]
</div>
<div class="input_cell clickable">
    [%RadioSelect(Q7_location, 18)%]
</div>
<div class="input_cell clickable">
    [%RadioSelect(Q7_location, 19)%]
</div>
<div class="input_cell clickable">
    [%RadioSelect(Q7_location, 20)%]
</div>
<div class="input_cell clickable">
    [%RadioSelect(Q7_location, 21)%]
</div>
<div class="input_cell clickable">
    [%RadioSelect(Q7_location, 22)%]
</div>
<div class="input_cell clickable">
    [%RadioSelect(Q7_location, 23)%]
</div>
<div class="input_cell clickable">
    [%RadioSelect(Q7_location, 24)%]
</div>
<div class="input_cell clickable">
    [%RadioSelect(Q7_location, 25)%]
</div>
<div class="input_cell clickable">
    [%RadioSelect(Q7_location, 26)%]
</div>

Comments

Can you just change the color of the background images?

---

hi Zachary,

it's only the color of the button that I want to change: about 3 or 4 buttons only. It's a map of Paris where we choose our favorite district...

Best,

---

You want to change how some of the radio buttons look but not all the radio buttons?

---

yes that's it !

Answer 1

The following will replace the first three radio buttons:

<style>
#Q7_location_1_graphical.radiobox,
#Q7_location_2_graphical.radiobox,
#Q7_location_3_graphical.radiobox {
    background: url(http://example.com/image1.png) no-repeat center center;
}

#Q7_location_1_graphical.radioboxselected,
#Q7_location_2_graphical.radioboxselected,
#Q7_location_3_graphical.radioboxselected {
    background: url(http://example.com/image2.png) no-repeat center center;
}
</style>

The URLs must be replaced with the location of the new graphics, the first URL for the unselected graphic and the second URL for the selected graphic.

Comments

It's perfect, thank you !