服務器生成的懸停圖像？

Question

我需要懸停按鈕，這取決於服務器端的設置。即當設置爲A時，圖像是A.png和Ahover.png，當設置爲B時，圖像是B.png和Bhover.png等等。所以，對於每個設置，定義兩個（或更多）圖像。

假設我既不能在服務器端生成CSS，也不能在內容文件中嵌入樣式指令。

其實我在一個portlet中。我的portlet可以有多個實例。並且每個實例可以有不同的設置（圖像）。

問題是我需要定義兩個圖像 - 正常和懸停。

1）如果我在CSS定義他們，他們不會改變反映設定變更（因爲服務器不會產生CSS）

2）我不能定義懸停風格的行內（CSS限制），所以我無法在HTML代碼中定義這兩個圖像

3）我不知道如何編寫jQuery代碼，因爲顯然無法使用jQuery設置僞類型樣式。

下面是示例代碼

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %> 
<%@ taglib uri="http://liferay.com/tld/util" prefix="liferay-util" %> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 

<%@ page import="javax.portlet.PortletPreferences"%> 

<portlet:defineObjects /> 

<!-- available variables --> 
<!-- contextPath = <c:out value="${contextPath}"/> --> 
<!-- image.big.normal = <c:out value="${image.big.normal}"/> --> 
<!-- image.big.hover = <c:out value="${image.big.hover}"/> --> 

<div class="promotion-frame"> 

    <div class="promotion-icon jqueryeffect"> 
     By jQuery 
    </div> 

    <div class="promotion-icon" style="background-image: url('<c:out value="${contextPath}"/><c:out value="${image.big.normal}"/>')"> 
     By Inline Style 
    </div> 

    <!-- but how to set hover image??????? --> 

    <div class="promotion-title"> 
     Communicator 
    </div> 

</div> 

<liferay-util:html-bottom> 

    <script type="text/javascript"> 


     var divId = 'p_p_id_<c:out value="${portletDisplay.id}"/>_'; 
     var backgroundImageStyle = "url('"; 
     backgroundImageStyle += '<c:out value="${contextPath}"/>'; 
     backgroundImageStyle += '<c:out value="${image.big.normal}"/>'; 
     backgroundImageStyle += "')"; 

     jQuery.noConflict(); 

     jQuery('#' + divId + ' ' + '.jqueryeffect').css('background-image', backgroundImageStyle); 

     // but how to set hover image??? 

    </script> 
</liferay-util:html-bottom> 

Answer 1

如果圖像大小相同，則可以結合正常的，並且在一個圖像（一個在頂部和底部）懸停圖像，並使用一個CSS規則是不可知的實際文件..

所以

.promotion-icon{ 
    /*define width and height that fits the icon*/ 
    background-position: left top; /*assuming that the normal state of the icon is at the top*/ 
    background-repeat:no-repeat; 
    background-color:tansparent; 
} 
.promotion-icon{ 
    background-position:left bottom; 
} 

現在，這個代碼將工作

<div class="promotion-icon" style="background-image: url('<c:out value="${contextPath}"/><c:out value="${image.big.combined}"/>')"> 
    By Inline Style 
</div>