topic Infowindow sprite background-image at runtime in ArcGIS JavaScript Maps SDK Questions

Infowindow sprite background-image at runtime

RaviKonaparthi — Fri, 11 Jun 2010 14:08:09 GMT

Hi All,

I am working on creating an application where i need to change the background of my infowindow at runtime based on the graphic attributes. I am able to set the infowindow style in the CSS by overriding the .infowindow .sprite. But i am unable to change the sprite at runtime.

Can any one help me solving the issue?

Regards,
Ravi.

Re: Infowindow sprite background-image at runtime

RaviKonaparthi — Tue, 15 Jun 2010 15:36:48 GMT

Hi All,

Can any one help me on this?

Regards,
Ravi.

Re: Infowindow sprite background-image at runtime

RaviKonaparthi — Mon, 28 Jun 2010 11:26:02 GMT

Hi All,

I tried all the possible ways from my end with no luck. Can any one have solution for this feature?

Regards,
Ravi.

Re: Infowindow sprite background-image at runtime

RaviKonaparthi — Fri, 13 Aug 2010 12:27:09 GMT

Finally i found the solution and here it is...

CSS:

.orangeSprite
{
    background-image: url(images/orangeinfowindow.png) !important;
    _background-image: none !important;
    color: White;
    _filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='crop', src='images/orangeinfowindow.png') !important;
}

Code:

Before showing the infowindow, please use the below code:

var infoWindow = map.infoWindow;
var sprite = dojo.query('.sprite', infoWindow.domNode);
for (var i = 0; i < sprite.length; i++) {
       sprite.className = 'sprite orangeSprite'; //sprite is the default class for infowindow and orangeSprite has the actual sprite image to be displayed.
}

map.infoWindow.resize(380, 220);

Now call the resize() method.

You will get the new sprite image, instead of the default provided.

Regards,
Ravi.

Re: Infowindow sprite background-image at runtime

BenStuder — Fri, 13 Aug 2010 16:50:07 GMT

Finally i found the solution and here it is...

CSS:

.orangeSprite
{
    background-image: url(images/orangeinfowindow.png) !important;
    _background-image: none !important;
    color: White;
    _filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='crop', src='images/orangeinfowindow.png') !important;
}

Code:

Before showing the infowindow, please use the below code:

var infoWindow = map.infoWindow;
var sprite = dojo.query('.sprite', infoWindow.domNode);
for (var i = 0; i < sprite.length; i++) {
       sprite.className = 'sprite orangeSprite'; //sprite is the default class for infowindow and orangeSprite has the actual sprite image to be displayed.
}

map.infoWindow.resize(380, 220);

Now call the resize() method.

You will get the new sprite image, instead of the default provided.

Regards,
Ravi.

Clever, Ravi. I will have to try that.