Solved

Tooltip with web page preview

Posted on 2011-09-18
12
277 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Transaction Monitoring Vs. Real User Monitoring

Synthetic Transaction Monitoring Vs. Real User Monitoring: When To Use Each Approach? In this article, we will discuss two major monitoring approaches: Synthetic Transaction and Real User Monitoring.

 

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
 

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

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

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

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
This video teaches users how to migrate an existing Wordpress website to a new domain.

705 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