I am having a problem applying CSS to two custom OpenLayers buttons. I create a PANEL toolbar and then add 8 buttons to it. The ZoomBox, DragPan, ZoomOut, ZoomIn, and nav.next and nav.previous buttons all style the way they should. The issue is with the two BUTTON items.
As near as I can tell the OpenLayers BUTTON object only allows one CSS style called .olControlButtonItemInactive.
THE PROBLEM: I have two BUTTON objects in the PANEL and I want each one to have a different style. But, if I change the name of the CSS class from olControlButtonItemInactive the CSS no longer is picked up by the button.
I thought I could just assign a unique ID attribute to each BUTTON (for instance button #1 has an ID of 'btnMaxExtent' and button #2 has an ID of 'btnHiLite'), then create a CSS style for each one called, respectively, olControlbtnMaxExtentItemInactive and olControlbtnHiLiteItemInactive and then assign these two button styles to the olControltoolPanel class but it does not work.
Here is the script I use to create the buttons on my panel:
var panelControls = [
new OpenLayers.Control.ZoomBox({title: "Draw a box to ZOOM IN", text: 'Click Me'}),
new OpenLayers.Control.DragPan({title: "Click to PAN around map"}),
new OpenLayers.Control.ZoomOut({title: "Click to ZOOM OUT one level"}),
new OpenLayers.Control.ZoomIn({title: "Click to ZOOM IN one level"}),
new OpenLayers.Control.Button({title: "Click to go to MAX EXTENT",
id: 'btnMaxExtent',
trigger: zoomToExtent}),
nav.next, nav.previous,
new OpenLayers.Control.Button({title: "Click once for hover info, click it again to turn off the functionality",
id: 'btnHiLite',
trigger: activateHiLite})
];
Just for completeness here is the script I use to add the controls to my panel:
var toolbar = new OpenLayers.Control.Panel({'div': document.getElementById('tlbr')});
toolbar.addControls(panelControls);
map.addControl(toolbar);
And here is the CSS I have now that works for the BUTTON objects but it makes both BUTTONs look the same.
I want each button to have its own CSS. If I take this same CSS script and create one for each of the BUTTONS with the names .olControlbtnMaxExtentItemInactive and .olControlbtnHiLiteItemInactive they do not work.
.olControltoolPanel .olControlButtonItemInactive {
border-top: 1px solid #96d1f8;
background: #6ed665;
background: -webkit-gradient(linear, left top, left bottom, from(#3e9c50), to(#6ed665));
background: -webkit-linear-gradient(top, #3e9c50, #6ed665);
background: -moz-linear-gradient(top, #3e9c50, #6ed665);
background: -ms-linear-gradient(top, #3e9c50, #6ed665);
background: -o-linear-gradient(top, #3e9c50, #6ed665);
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #9c494e;
font-size: 12px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
background-image: url('Img/zoom-world-mini.png');
background-repeat: no-repeat;
}
Any suggestions would be appreciated. Thanks for taking the time to look at this!
Best Answer
After trying a lot of different options here is what I did to make it work. The original problem was that I wanted to assign different CSS to two different OpenLayers.Control.BUTTON objects but for some reason they were both getting the same CSS.
What I did was remove the script that created the buttons from inside the panelControls array. Now I create variables for both buttons, assign the appropriate attributes to each variable, and then add the variable for the buttons to the panelControls array.
Each button object also gets its own block of CSS assigned to it when it is declared. Now each button gets looks different! Here is the JavaScript I use;
and here is the CSS for both buttons. They both look similiar but have different images:
}
}