Skip to main content

Blard #24: An image rollover JSP .tag

Posted by jfalkner on March 27, 2006 at 11:05 PM PST

This is an example of a good use of JSP .tag files, a DHTML widget for making image rollovers. It was originally encoded as an example during a Develop Mentor Java Web Tier course I taught. As with all my stuff, it is free for commercial and non-commercial use. If you like it, please remember to mention who originally wrote the code.

Here is the code. Save it in your WEB-INF/tags directory.

<%@ tag isELIgnored="false" %>
<%@ attribute name="image1" required="true" %>
<%@ attribute name="image2" required="true" %>
<%@ attribute name="link" required="true" %>
<%@ attribute name="name" required="true" %>

<a href="${link}">
<image src="${image1}" border="0"
  name="${name}"
  onmouseover="document.${name}.src='${image2}'"
  onmouseout="document.${name}.src='${image1}'"></a>

Using the code requires importing the taglib and setting attributes for the name, image1, image2, and link attributes. The name can be anything, but it must be unique out of all the other tags on the page. The two image attributes are the images to show initially and when the mouse is over respectively. The link attribute is for setting a hyperlink.

Here is an example JSP.

<%@ taglib prefix="x" tagdir="/WEB-INF/tags" %>
<html>
<h1>HelloWorld</h1>

<x:Rollover
  name="news"
  image1="http://www.proteomecommons.org/archive/1129421002687/news.jpg"
  image2="http://www.proteomecommons.org/archive/1129421002687/news-bite.jpg"
  link="http://www.google.com"/><br/>
 
</html>