Changing a Sprite

[RobinWoodsong]

We want to change the size and color of the pan nav buttons that show when you specify {nav:true} in esri.Map.

I found that the graphic is a background image and the name is fixed-pan-sprite.png.

I can't find the graphic 'fixed-pan-sprite.png' or any reference to the graphic in my css or javascript.

Does anyone know where this graphic is kept and referenced from?

Thanks,
Robin Woodsong
City of Boulder

[Anonymous User]

This graphic is sort of "hidden." It is streamed from the API and can be found here. A sprite is one smaller piece of a larger hidden graphic that is loaded when the page is loaded. The API uses some fancy CSS to call up one part of the larger image, usually for use as an icon. Use the Net / Images view from the Firebug add-on for Firefox to see all of the images loaded from the API.

An easier way to customize your pan buttons may be to use this ESRI sample. This allows you to use your own graphics, and your own placement on the page. You could even make one image map (one graphic with four arrows) with hotspots for map.panDown(), map.panLeft(), etc.

Or you could override the CSS for that sprite. That would be added to <style> in the html heading, or in your seperate CSS file. It would look something like this:

<style type="text/css"> 
.map .container .fixedPan {
 background-image:url("fixed-pan-sprite.png");
 cursor:pointer;
 height:15px;
 overflow:hidden;
 position:absolute;
 width:15px;
 }
</style>

Keep in mind; with the above example, you would have to download fixed-pan-sprite.png and save it locally. You could then modify its colors, but if you start changing the height and width (ie: 15px by 15px default), it won't look right unless you also resize the image accordingly (because of it being a sprite, a smaller part of a larger graphic).

[RobinWoodsong]

Thank you so much, that's exactly what I am looking for!