How do i render and show another page when user hovers over the link?

Question

Hello,

I have one link. I want that when user hovers over the link, one page should get rendered which contains all <img> tag and should show it in one box (tooltip type). How can i do this?

Thanks in advance:)

Answer 1

Have a look at jquery tooltip. Very easy and powerfull way of doing what you want.

Answer 2

Can you show us what you tried? Or, can you paint some more details as to what your imagination captured? Basically, you are looking to perform an ajax call on mouseover, for example:

$(document).ready(function() {

    // when I mouseover an element with class="foo"
    $(".foo").mouseover(function() {

        // get me a reference to the next (hidden) div relative (or more precisely, sibling) to this element
        var $theDiv = $(this).next("div"); // or wherever it's at

        // using jQuery's $.data utility, I have stored the 'href' of the
        // page/view or whatever this mouseovered element points to.
        // the url parameter to load can optionally have a valid selector attached to it
        // to filter matching elements from the response
        $theDiv.load('linkToLoad.html' + '?dynamicImagePageThingieLink=' + $(this).data('link') + ' img', function() {

            // this will execute once the loading has finished
            alert('The next div has been filled up with image tags from linkToLoad.html');
            $theDiv.slideDown();
        });
    });
});

Answer 3

Qtip will do what you want very easily, something like this;

<div id="content">
    <a href="javascript:void(0);" rel="/images/image_one.jpg" class="">Image One</a>
    <a href="javascript:void(0);" rel="/images/image_two.jpg" class="">Image Two</a>
    <a href="javascript:void(0);" rel="/images/image_three.jpg" class="">Image Three</a>
</div>

<script type="text/javascript">

$(document).ready(function() 
{
    $('#content a[rel]').each(function()
    {
        $(this).qtip(
        {
            content: {  
                text: '<img class="throbber" src="/images/throbber.gif" alt="Loading..." />',
                url: $(this).attr('rel'), // Use the rel attribute of each element for the url to load
                title: {
                    button: 'Close' // Show a close link in the title
                }
             }
         })
     });
 });

 </script>

There are tons of options; check out the example and view the code.