[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Tooltip with web page preview

Posted on 2011-09-18
12
Medium Priority
?
280 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
Ready to get certified? Check out some courses that help you prepare for third-party exams.
The viewer will learn how to dynamically set the form action using jQuery.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

656 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