Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Onclick map - Button of a different color

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>
related to an answer for: html - onclick map
asked Nov 16, 2017 by Sylvain V
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 !

1 Answer

0 votes
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.
answered Nov 16, 2017 by Zachary Platinum Sawtooth Software, Inc. (67,450 points)
It's perfect, thank you !
mobile responsive clickable map
...