Jump to content

Hover text over an Image


Donal-ctn

Recommended Posts

Story lads, I'm stuck with one final part I want to add to my Web Application, its just a simple movie review XML database styled with XSLT and displayed in a browser via a servlet. In the page displaying the film covers I just want the name of the movie to appear as hover text over it via Javascript when I run the mouse over the picture. I've been trying for ages and havent had any luck so any help would be greatly appreciated. I'll post some examples below. Heres the image that I want the text to hover on: probj.pngHeres the XML code for said page

<?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xsl" href="DvdTopTen.xsl"?> <december_top_ten_dvds><dvd><cover_art>darkrise.jpg</cover_art><title>The Dark Knight Rises</title><starring>Christian Bale, Tom Hardy and Anne Hathaway</starring><plot>Eight years on, a new terrorist leader, Bane, overwhelms Gotham's finest, and the Dark Knight resurfaces to protect a city that has branded him an enemy.</plot><imdb_rating>8.8</imdb_rating> </dvd> <dvd><cover_art>bourneleg.jpg</cover_art><title>The Bourne Legacy</title><starring>Jeremy Renner, Rachel Weisz and Edward Norton</starring><plot>An expansion of the universe from Robert Ludlum's novels, centered on a new hero whose stakes have been triggered by the events of the previous three films.</plot><imdb_rating>6.9</imdb_rating> </dvd> <dvd><cover_art>iceage.jpg</cover_art><title>Ice Age: Continental Drift</title><starring>Ray Romano, Denis Leary and John Leguizamo</starring><plot>Manny, Diego, and Sid embark upon another adventure after their continent is set adrift. Using an iceberg as a ship, they encounter sea creatures and battle pirates as they explore a new world.</plot><imdb_rating>6.7</imdb_rating> </dvd> <dvd><cover_art>ted.jpg</cover_art><title>Ted</title><starring>Mark Wahlberg, Mila Kunis and Seth MacFarlane</starring><plot>As the result of a childhood wish, John Bennett's teddy bear, Ted, came to life and has been by John's side ever since - a friendship that's tested when Lori, John's girlfriend of four years, wants more from their relationship.</plot><imdb_rating>7.4</imdb_rating> </dvd> <dvd><cover_art>totalre.jpg</cover_art><title>Total Recall (2012)</title><starring>Colin Farrell, Bokeem Woodbine and Bryan Cranston</starring><plot>A factory worker, Douglas Quaid, begins to suspect that he is a spy after visiting Rekall - a company that provides its clients with implanted fake memories of a life they would like to have led - goes wrong and he finds himself on the run.</plot><imdb_rating>6.3</imdb_rating> </dvd> <dvd><cover_art>loop.jpg</cover_art><title>Looper</title><starring>Joseph Gordon-Levitt, Bruce Willis and Emily Blunt</starring><plot>In 2074, when the mob wants to get rid of someone, the target is sent 30 years into the past, where a hired gun awaits. Someone like Joe, who one day learns the mob wants to 'close the loop' by transporting back Joe's future self.</plot><imdb_rating>7.9</imdb_rating> </dvd> <dvd><cover_art>resi.jpg</cover_art><title>Resident Evil: Retribution</title><starring>Milla Jovovich, Sienna Guillory and Michelle Rodriguez</starring><plot>Alice fights alongside a resistance movement in the continuing battle against the Umbrella Corporation and the undead.</plot><imdb_rating>5.9</imdb_rating> </dvd> <dvd><cover_art>doctor.jpg</cover_art><title>The Good Doctor</title><starring>Orlando Bloom, Riley Keough and Taraji P. Henson</starring><plot>A young doctor goes to unconscionable extremes in order to remain in the service of a female patient with a kidney disorder.</plot><imdb_rating>5.3</imdb_rating> </dvd> <dvd><cover_art>trade.jpg</cover_art><title>Trade of Innocents</title><starring>Dermot Mulroney, Mira Sorvino and John Billingsley</starring><plot>A couple grieving the loss of their own daughter set out to rescue young girls sold into the slave trade.</plot><imdb_rating>7.5</imdb_rating> </dvd> <dvd><cover_art>trubcurve.jpg</cover_art><title>Trouble With the Curve</title><starring>Clint Eastwood, Amy Adams and John Goodman</starring><plot>An ailing baseball scout in his twilight years takes his daughter along for one last recruiting trip.</plot><imdb_rating>6.8</imdb_rating> </dvd> </december_top_ten_dvds>
Heres the XSL file:
<?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"><xsl:output method="html"/> <xsl:include href= "topinclude.xsl"/> <!-- TODO customize transformation rules syntax recommendation http://www.w3.org/TR/xslt--><xsl:template match="*"> <table border="1" bgcolor= "#A4A4A4"><tr bgcolor="#A4A4A4"><th>Cover Art</th><th>Title</th><th>Starring</th><th>Plot</th><th>IMDB Rating</th></tr><xsl:apply-templates select="dvd"/></table> </xsl:template> <xsl:template match="dvd"> <tr><td onMouseover="this.style.backgroundColor='#FA5858'" onMouseout="this.style.backgroundColor='#A4A4A4'" BGCOLOR="#A4A4A4" BORDER="4"><img src="{cover_art}"></img></td> <td onMouseover="this.style.backgroundColor='#FA5858'" onMouseout="this.style.backgroundColor='#A4A4A4'" BGCOLOR="#A4A4A4" BORDER="4"><center><xsl:value-of select="title"/></center></td><td onMouseover="this.style.backgroundColor='#FA5858'" onMouseout="this.style.backgroundColor='#A4A4A4'" BGCOLOR="#A4A4A4" BORDER="4"><center><xsl:value-of select="starring"/></center></td><td onMouseover="this.style.backgroundColor='#FA5858'" onMouseout="this.style.backgroundColor='#A4A4A4'" BGCOLOR="#A4A4A4" BORDER="4"><center><xsl:value-of select="plot"/></center></td><td onMouseover="this.style.backgroundColor='#FA5858'" onMouseout="this.style.backgroundColor='#A4A4A4'" BGCOLOR="#A4A4A4" BORDER="4"><center><xsl:value-of select="imdb_rating"/></center></td></tr> </xsl:template> </xsl:stylesheet>
And if its any use here is the servlet code:
/** To change this template, choose Tools | Templates* and open the template in the editor.*/ import javax.xml.transform.stream.StreamSource;import javax.xml.transform.stream.StreamResult;import javax.xml.transform.TransformerFactory;import javax.xml.transform.Transformer;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse; /**** @author* */ @WebServlet(name="DVDServlet", urlPatterns={"/DVDServlet"})public class DVDServlet extends HttpServlet { protected void processRequest(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("text/html;charset=UTF-8");PrintWriter out = response.getWriter(); String path = getServletContext().getRealPath("/WEB-INF/"); String XSLFileName = path + "/DvdTopTen.xsl"; String XMLFileName = path + "/DvdTopTen.xml"; try {TransformerFactory transformerFactory = TransformerFactory.newInstance();StreamSource xmlSource = new StreamSource(XMLFileName);StreamSource stylesheet = new StreamSource(XSLFileName); Transformer transformer = transformerFactory.newTransformer(stylesheet);transformer.transform(xmlSource, new StreamResult(out)); } catch (Exception e) {System.err.println("Encountered Exception" + e.getMessage());e.printStackTrace(out);} finally {out.close();}} // <editor-fold defaultstate="collapsed" desc="HttpServlet methods. Click on the + sign on the left to edit the code.">/** * Handles the HTTP <code>GET</code> method.* @param request servlet request* @param response servlet response* @throws ServletException if a servlet-specific error occurs* @throws IOException if an I/O error occurs*/@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {processRequest(request, response);} /** * Handles the HTTP <code>POST</code> method.* @param request servlet request* @param response servlet response* @throws ServletException if a servlet-specific error occurs* @throws IOException if an I/O error occurs*/@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {processRequest(request, response);} /** * Returns a short description of the servlet.* @return a String containing servlet description*/@Overridepublic String getServletInfo() {return "Short description";}// </editor-fold> }
Edited by Donal-ctn
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...