?
Solved

Tooltip with web page preview

Posted on 2011-09-18
12
Medium Priority
?
278 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
Will your db performance match your db growth?

In Percona’s white paper “Performance at Scale: Keeping Your Database on Its Toes,” we take a high-level approach to what you need to think about when planning for database scalability.

 

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 2000 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

WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
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:
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).
Suggested Courses

752 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