Solved

Tooltip with web page preview

Posted on 2011-09-18
12
272 Views
Last Modified: 2012-05-12
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
Comment
Question by:skiabox
  • 6
  • 6
12 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 36557026
could you right click on your page, choose view source and post it here?
it would be a good start
0
 

Author Comment

by:skiabox
ID: 36562027
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
 
LVL 82

Expert Comment

by:leakim971
ID: 36562372
i don't want your code but the html code in the browser
0
 

Author Comment

by:skiabox
ID: 36563399
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
 
LVL 82

Expert Comment

by:leakim971
ID: 36563580
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
 

Author Comment

by:skiabox
ID: 36563700
The url is in the database.The property that expose the url is product.url
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Comment

by:skiabox
ID: 36563704
The image is not clickable right now.
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 36563719
ok so the url would be the link around the image

check this (and read my comment) : http://jsfiddle.net/zdqqF/
0
 

Author Comment

by:skiabox
ID: 36563858
Where should I put this code?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36563864
Could you comment it first?
0
 

Author Comment

by:skiabox
ID: 36564034
Never mind, I wrapped the image tag with a simple anchor tag and everything works fine.
Thank you for helping me on this.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36564117
cool, so what's next step?
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
The viewer will learn how to count occurrences of each item in an array.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

910 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now