[GIS] OpenLayers – Navigation History CSS

openlayers-2

I am having a problem assigning background-images to my OpenLayers NAVIGATION HISTORY tool on a custom OpenLayers panel.

Here is the code I use to create the tools and add them to my panel:

        nav = new OpenLayers.Control.NavigationHistory(); //CREATE THE NAVIGATION HISTORY CONTROL
            map.addControl(nav) //ADD THE CONTROL TO THE MAP

//CREATE THE CONTROL ARRAY - THESE CONTROLS WILL BE ADDED TO THE CUSTOM 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, //THIS ROW ADDS THE NAVIGATION HISTORY TOOLS (nav.next, nav.previous) INTO THE ARRAY OF CONTROLS TO BE ADDED TO THE PANEL   
            new OpenLayers.Control.Button({title: "Click once for hover info, click it again to turn off the functionality", 
                id: 'btnHiLite',
                trigger: activateHiLite})               
            ];

    var toolbar = new OpenLayers.Control.Panel({'div':  document.getElementById('tlbr')}); //CREATE THE PANEL

    toolbar.addControls(panelControls); //ADD THE CONTROLS ARRAY TO THE PANEL
    map.addControl(toolbar); //ADD THE PANEL TO THE MAP

Here is the CSS that works for the Navigation History control. The problem is that it assigns the same background-image to both Nav History controls. I would like to assign different backgound-images for each. 

//THIS IS THE CSS FOR THE NAVIGATION CONTROL 
//BUT IT DOESN"T LET ME APPLY CSS INDIVIDUALLY TO THE nav.next AND nav.previous PROPERTIES OF THE NAVIGATION HISTORY CONTROL
.olControltoolPanel .olControlNavigationHistory  { 
    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/view_previous_on.png');
    background-repeat: no-repeat;
    }

Any suggestions would be appreciated. Thank you for taking the time to look into this issue!

This issue has been solved thanks to generous assistance of Dariapra. Here is the code fix as I implemented it:

The navigation history controls are added to a PANEL control and given the following CSS;

 //THIS IS THE CSS FOR THE NAV.NEXT BUTTON WHEN ACTIVATED
.olControltoolPanel .olControlNavigationHistoryNextItemActive { 
    ...your CSS here...
background-image: url('img/view_next_on.png');
background-repeat: no-repeat;
    ....other CSS if needed....
}

  //THIS IS THE CSS FOR THE NAV.NEXT BUTTON WHEN DEACTIVATED
.olControltoolPanel .olControlNavigationHistoryNextItemInActive { 
    ...your CSS here...
background-image: url('img/view_next_off.png');
background-repeat: no-repeat;
    ....other CSS if needed....
}

//THIS IS THE CSS FOR THE NAV.PREVIOUS BUTTON WHEN ACTIVATED
.olControltoolPanel .olControlNavigationHistoryPreviousItemActive { 
    ...your CSS here...
background-image: url('img/view_previous_on.png');
background-repeat: no-repeat;
    ....other CSS if needed....
}

  //THIS IS THE CSS FOR THE NAV.PREVIOUS BUTTON WHEN DEACTIVATED
.olControltoolPanel .olControlNavigationHistoryNextItemInActive { 
    ...your CSS here...
background-image: url('img/view_previous_off.png');
background-repeat: no-repeat;
    ....other CSS if needed....
}

Best Answer

All the icons used to style the navigation history control are stored in a sprite containing four icons; for each button, 'previous' and 'next', there are two icons corresponding to the states 'active' and 'inactive'.

In the CSS code you have to provide the path to the new sprite - that is, the one used instead the default one - and, besides, the parameters used to clip each quadrant (or icon). The latter is done by the following CSS classes that can be found in the default OpenLayers theme:

  • olControlNavigationHistoryPreviousItemActive
  • olControlNavigationHistoryPreviousItemInactive
  • olControlNavigationHistoryNextItemActive
  • olControlNavigationHistoryNextItemInactive

Perhaps this post in my blog, 'Styling OpenLayers NavigationHistory control', can help you.

Related Question