Infowindow sprite background-image at runtime

[RaviKonaparthi]

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.

[RaviKonaparthi]

Hi All,

Can any one help me on this?

Regards,
Ravi.

[RaviKonaparthi]

Hi All,

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

Regards,
Ravi.

[RaviKonaparthi]

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.

[BenStuder]

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.