我需要有取决于服务器端设置的悬停按钮。 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>
最佳答案
如果所有图片的大小都相同,那么您可以将普通图片和悬停图片合并为一张图片(顶部和底部各有一个)并使用不可知的 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>
关于java - 服务器生成悬停图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16225045/