0

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

1 回答 1

0

如果图像大小相同，则可以将普通图像和悬停图像组合在一张图像中（顶部和底部各一张），并使用与实际文件无关的 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-25T22:22:52.897 回答