服务器生成的悬停图像？

我需要悬停按钮，这取决于服务器端的设置。即当设置为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>

来源

2013-04-25 Dims

所有这些图像的大小相同吗？ – 2013-04-25 22:18:12

如果图像大小相同，则可以结合正常的，并且在一个图像（一个在顶部和底部）悬停图像，并使用一个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>

来源

2013-04-25 22:22:52

服务器生成的悬停图像？

回答

相关问题