java - 服务器生成悬停图像？

Question

我需要有取决于服务器端设置的悬停按钮。 IE。当设置为A时，图像为A.png和Ahover.png，当设置为B时，图像为B.png和Bhover.png等等。因此，对于每个设置，都定义了两个(或更多)图像。

假设我既不能在服务器端生成 CSS，也不能在内容文件中嵌入样式指令。

实际上我在一个 portlet 中。我的 portlet 可以有多个实例。每个实例可以有不同的设置(图像)。

问题是我需要定义两个图像——正常图像和悬停图像。

1) 如果我在 CSS 中定义它们，它们将不会改变以反射(reflect)设置更改(因为 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>