画像のギャラリーがあり、いずれかの画像の上にマウスを置くと、画像が引き戻されてテキストが表示されます。
HTMLドキュメント内に次のHTMLコード(投稿の下部)がある場合、すべてが正常に機能します。
ただし、まったく同じHTMLコードをJavaサーブレット内に配置してページに戻すと、すべてが正常に見えますが、画像のプルバックは機能しなくなります。
なぜそれが起こるのか考えていますか?おそらく、正しく機能させるために何らかの更新を行う必要がありますか?
ギャラリー内のアイテムの1つに関連するコード:
<li>
<div class="header"><p><a href="product.jsp">Product 1 Shirt</a></p></div>
<div class="gallery_item">
<img src="gallery/thumb/gallery_01.jpg" width="214" height="194" class="cover" alt="" />
<p>Highlight 1</p>
<p>Highlight 2</p>
<p>Highlight 3</p>
<a href="product.jsp" class="btn alignleft" title="More Info">More Info</a>
<a href="gallery/fullsize/gallery_01.jpg" class="zoom" data-rel="prettyPhoto[gallery1]">Enlarge</a>
<a href="gallery/fullsize/gallery_02.jpg" data-rel="prettyPhoto[gallery1]"></a>
</div>
<div class="p2"><p>Price: $10</p></div>
<div class="p2"><p>In Stock: Yes</p></div>
</li>
要求に応じて:サーブレット:
public void service(HttpServletRequest request,
HttpServletResponse response) throws IOException,
ServletException
{
PrintWriter out = response.getWriter();
response.setContentType("text/html");
String requestType = request.getParameter("type");
String result;
if(requestType.equals("getproductlist"))
{
Products products = Products.getProductsInstance();
String keywords = request.getParameter(("keywords"));
String organization = request.getParameter(("organization"));
String price = request.getParameter(("price"));
String sort = request.getParameter(("sort"));
result = products.getProducts(keywords, organization, price, sort);
//this next lines of html are actually what is returned from products.getProducts. I'm just putting it here for clarity. All the variables (name, h1, etc) are okay.
result += "<li>"
+ "<div class=\"header\"><p><a href=\"product.jsp\">"+ name +"</a></p></div>"
+ "<div class=\"gallery_item\">"
+ "<img src=\"gallery/thumb/gallery_01.jpg\" width=\"214\" height=\"194\" class=\"cover\" alt=\"\" />"
+ "<p>"+ h1 +"</p>"
+ "<p>"+ h2 +"</p>"
+ "<p>"+ h3 +"</p>"
+ "<a href=\"product.jsp\" class=\"btn alignleft\" title=\"More Info\">More Info</a>"
+ "<a href=\"gallery/fullsize/gallery_01.jpg\" class=\"zoom\" data-rel=\"prettyPhoto[gallery1]\">Enlarge</a> "
+ "<a href=\"gallery/fullsize/gallery_02.jpg\" data-rel=\"prettyPhoto[gallery1]\"></a>"
+ "</div>"
+ "<div class=\"p2\"><p>Price: "+ itemPrice +"</p></div>"
+ "<div class=\"p2\"><p>In Stock: "+ inStock +"</p></div> "
+ "</li>";
out.println(result);
out.close();
}