CSS Sprites mit <xp:image>

[MLoy]

Hallo miteinander,

ich habe eine XPage mit einem Repeat-Control.
In diesem Control wird ein Bild mit einer berechneten URL wiederholt (bannerRepVar = Collection Name des Controls):

Code

<xp:image id="image4" styleClass="BannerImage">
	<xp:this.url>
		<![CDATA[#{javascript:		
			if(bannerRepVar.banner!=null){
				var url = getURLFromURLList(bannerRepVar.banner);
					if(url!=""){
						return url;
					}else{
						return "/noPic.png"; 
					}
				}			
		return "/noPic.png";}]]>
	</xp:this.url>
</xp:image>

Funktioniert soweit bestens.

Jetzt würde ich gerne bei einem MouseOver ein alternatives Bild anzeigen.
Ideal wäre wenn ich CSS Sprites verwenden könnte um ein flackern bzw. ein laden beim Hover zu vermeiden.
Leider sind all meine Versuche gescheitert.
Die Bilder haben alle die Auflösung 100x200px wobei die oberen 100x100px das "normale" Bild sind und die unteren 100x100px das Bild, das beim Hover angezeigt werden soll.
Hat hier jemand nen Hinweis für mich? Wenn CSS Sprites nicht gehen, wäre auch eine Alternative mit 2 getrennten Bildern denkbar.

Danke schon mal!
Gruß
Marcus

[pram]

CSS-Sprites gehen nur mit Hintergrundbildern.
aus deinen xp:image müsstest du demnach einen DIV oder Panel machen mit entsprechender Größe und background-style.
Aus dem Stegreif:

Code

<div class="sprite100x100" style="#{javascript: return 'background-url: ' + getURL(...)}"></div>

Du mussst dann noch die CSS-Klassen "sprite100x100" und "sprite100x100:hover" passend definieren

Gruß
Roland

[MLoy]

Perfekt!
Hat nach ein paar kleineren Änderungen funktioniert.
Ich hab mich für den Panel entschieden, da ich auch noch ein onCLick Event für das Bild gebraucht habe.
Für alle, die es interessiert hier mal der Sourcecode (inkl. CSS):

Code

<xp:panel id="imagePanel"
	style="#{javascript: return 'background-image:url( ' + getURLFromURLList(bannerRepVar.banner)+') '}"
	styleClass="BannerImage">
	<xp:eventHandler event="onclick"
		submit="true" refreshMode="complete">
		<xp:this.action><![CDATA[#{javascript:doStuff(...);}]]></xp:this.action>
	</xp:eventHandler>
</xp:panel>

Und hier die CSS Klassen:

Code

.BannerImage{
	min-width:100px;
	min-height: 100px;
	background-repeat: repeat-y;
	background-position: 0px 0px;
}
.BannerImage:hover{
	min-width:100px;
	min-height: 100px;
	background-repeat: repeat-y;
	background-position: 0px 100px;
}

Vielen Dank nochmal an Roland!!