• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 286
  • Last Modified:

Tooltip with web page preview

I am writing a jsp page with books.
How can I implement a tooltip with book's amazon page (in small size of course) every time the users hover over the book's image?
Thank you.
0
skiabox
Asked:
skiabox
  • 6
  • 6
1 Solution
 
leakim971PluritechnicianCommented:
could you right click on your page, choose view source and post it here?
it would be a good start
0
 
skiaboxAuthor Commented:
Ok here is the code :

<%--
    Document   : category
    Created on : May 21, 2010, 12:20:23 AM
    Author     : tgiunipero
--%>


<div id="categoryLeftColumn">

    <c:forEach var="category" items="${categories}">

        <c:choose>
            <c:when test="${category.name == selectedCategory.name}">
                <div class="categoryButton" id="selectedCategory">
                    <span class="categoryText">
                        ${category.name}
                    </span>
                </div>
            </c:when>
            <c:otherwise>
                <a href="<c:url value='category?${category.id}'/>" class="categoryButton">
                    <span class="categoryText">
                        ${category.name}
                    </span>
                </a>
            </c:otherwise>
        </c:choose>

    </c:forEach>

</div>

<div id="categoryRightColumn">

    <p id="categoryTitle">${selectedCategory.name}</p>
    
    <c:set var="totalCount" scope="session" value="${fn:length(categoryProducts)}"/>
    <c:set var="perPage" scope="session"  value="4"/>
    <c:set var="pageStart" value="${param.start}"/>
    <c:if test="${empty pageStart or pageStart < 0}">
       <c:set var="pageStart" value="0"/>
    </c:if>
    <c:if test="${totalCount < pageStart}">
       <c:set var="pageStart" value="${pageStart - 4}"/>
    </c:if>
        <a href="?start=${pageStart - 4}"><<</a>${pageStart + 1} - ${pageStart + 4} <a href="?start=${pageStart + 4}">>></a>
    <table id="productTable">

        <c:forEach var="product" items="${categoryProducts}" varStatus="iter"
                   begin="${pageStart}" end="${pageStart + perPage - 1}">

            <tr class="${((iter.index % 2) == 0) ? 'lightBlue' : 'white'}">
                <td>
                    <img src="${initParam.productImagePath}${product.imageName}.jpg"
                         alt="${product.imageName}">
                </td>

                <td>
                    ${product.name}
                    <br>
                    <span class="smallText">${product.description}</span>
                </td>

                <td>&euro; ${product.price}</td>

                <td>
                    <form action="addToCart" method="post">
                        <input type="hidden"
                               name="productId"
                               value="${product.id}">
                        <input type="submit"
                               name="submit"
                               value="add to cart">
                    </form>
                </td>
            </tr>

        </c:forEach>

    </table>
    
</div>

Open in new window




The url of the corresponding amazon link is saved in the underlying database I have created :

product.url (entity property)
0
 
leakim971PluritechnicianCommented:
i don't want your code but the html code in the browser
0
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

 
skiaboxAuthor Commented:
Here is view source result :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="css/bookstore.css">
        <link rel="shortcut icon" href="img/favicon.ico">

        <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
        <script src="js/jquery-ui-1.8.4.custom.min.js" type="text/javascript"></script>

        <script type="text/javascript">
            $(document).ready(function(){
                $('a.categoryButton').hover(
                    function () {$(this).animate({backgroundColor: '#b2d2d2'})},
                    function () {$(this).animate({backgroundColor: '#d3ede8'})}
                );

                $('div.categoryBox').hover(over, out);

                function over() {
                    var span = this.getElementsByTagName('span');
                    $(span[0]).animate({opacity: 0.3});
                    $(span[1]).animate({color: 'white'});

                }

                function out() {
                    var span = this.getElementsByTagName('span');
                    $(span[0]).animate({opacity: 0.7});
                    $(span[1]).animate({color: '#444'});
                }
            });
        </script>

        <title>The Affable Bean Green Grocer</title>
    </head>
    <body>
        <div id="main">
            <div id="header">
                <div id="widgetBar">

                    <div class="headerWidget">
                        
                    </div>

                
                    <div class="headerWidget">

                       

                        
                  </div>

                
                  <div class="headerWidget" id="viewCart">

                    <img src="img/cart.gif" alt="shopping cart icon" id="cart">

                  
                    <span class="horizontalMargin">
                      
                        
                          0
                        
                        
                      

                  
                      
                        
                        
                          items
                        
                      
                    </span>

                    
                </div>
                </div>

                <a href="/MyBookStore/">
                    <img src="img/logo.png" id="logo" alt="Affable Bean logo">
                </a>

                <img src="img/logoText.png" id="logoText" alt="the affable bean">
            </div>


<div id="categoryLeftColumn">

    

        
            
                <div class="categoryButton" id="selectedCategory">
                    <span class="categoryText">
                        Computers
                    </span>
                </div>
            
            
        

    

        
            
            
                <a href="category?2" class="categoryButton">
                    <span class="categoryText">
                        Cooking
                    </span>
                </a>
            
        

    

        
            
            
                <a href="category?3" class="categoryButton">
                    <span class="categoryText">
                        Politics
                    </span>
                </a>
            
        

    

        
            
            
                <a href="category?4" class="categoryButton">
                    <span class="categoryText">
                        History
                    </span>
                </a>
            
        

    

</div>

<div id="categoryRightColumn">

    <p id="categoryTitle">Computers</p>
    
    
    
    
    
       
    
    
        <a href="category?start=-4"><<</a>1 - 4 <a href="category?start=4">>></a>
    <table id="productTable">

        

            <tr class="lightBlue">
                <td>
                    <img src="img/products/category1image1.jpg"
                         alt="category1image1">
                </td>

                <td>
                    C Programming Language
                    <br>
                    <span class="smallText">Prentice Hall; 2 edition (April 1, 1988)</span>
                </td>

                <td>&euro; 44.41</td>

                <td>
                    <form action="addToCart" method="post">
                        <input type="hidden"
                               name="productId"
                               value="1">
                        <input type="submit"
                               name="submit"
                               value="add to cart">
                    </form>
                </td>
            </tr>

        

            <tr class="white">
                <td>
                    <img src="img/products/category1image2.jpg"
                         alt="category1image2">
                </td>

                <td>
                    Starting Out with C++
                    <br>
                    <span class="smallText">Addison Wesley; 7 edition (October 1, 2011)</span>
                </td>

                <td>&euro; 98.01</td>

                <td>
                    <form action="addToCart" method="post">
                        <input type="hidden"
                               name="productId"
                               value="2">
                        <input type="submit"
                               name="submit"
                               value="add to cart">
                    </form>
                </td>
            </tr>

        

            <tr class="lightBlue">
                <td>
                    <img src="img/products/category1image3.jpg"
                         alt="category1image3">
                </td>

                <td>
                    New Perspectives on Microsoft Office 2007
                    <br>
                    <span class="smallText">Course Technology; 2nd edition (March 11, 2009)</span>
                </td>

                <td>&euro; 94.11</td>

                <td>
                    <form action="addToCart" method="post">
                        <input type="hidden"
                               name="productId"
                               value="3">
                        <input type="submit"
                               name="submit"
                               value="add to cart">
                    </form>
                </td>
            </tr>

        

            <tr class="white">
                <td>
                    <img src="img/products/category1image4.jpg"
                         alt="category1image4">
                </td>

                <td>
                    Information Systems Essentials
                    <br>
                    <span class="smallText">McGraw-Hill/Irwin; 3 edition (September 24, 2008)</span>
                </td>

                <td>&euro; 107.78</td>

                <td>
                    <form action="addToCart" method="post">
                        <input type="hidden"
                               name="productId"
                               value="4">
                        <input type="submit"
                               name="submit"
                               value="add to cart">
                    </form>
                </td>
            </tr>

        

    </table>
    
</div>


            <div id="footer">
                <br>
                <hr id="footerDivider">
                <p id="footerText" class="reallySmallText">
                    <a href="#">Privacy Policy</a>
                    &nbsp;&nbsp;::&nbsp;&nbsp;
                    <a href="#">Contact</a>
                    &nbsp;&nbsp;&copy;&nbsp;&nbsp;
                    2011 my book store</p>
            </div>
        </div>
    </body>
</html>

Open in new window

0
 
leakim971PluritechnicianCommented:
where is the url of the book page? for each book, you should have this info (or a key) to build the URL of the amazon link
0
 
skiaboxAuthor Commented:
The url is in the database.The property that expose the url is product.url
0
 
skiaboxAuthor Commented:
The image is not clickable right now.
0
 
leakim971PluritechnicianCommented:
ok so the url would be the link around the image

check this (and read my comment) : http://jsfiddle.net/zdqqF/
0
 
skiaboxAuthor Commented:
Where should I put this code?
0
 
leakim971PluritechnicianCommented:
Could you comment it first?
0
 
skiaboxAuthor Commented:
Never mind, I wrapped the image tag with a simple anchor tag and everything works fine.
Thank you for helping me on this.
0
 
leakim971PluritechnicianCommented:
cool, so what's next step?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

  • 6
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now