Show hyperlink and popup window when Mouseover on image !

Question

Hello , I am developing a web application using asp.net, telerik RadAjax control. I have to need to develop when mouseover the image then show a hyperlink and when click the clink then open a new window(like facebook profile picture change). Please Help me...

Answer 1

Something like this? http://jsfiddle.net/d8BSC/

Here's the markup:

<div id="cow-wrapper">
    <div id="cow-link">
        <a href="http://www.google.com" target="_blank">Link to Google</a>
    </div>
    <img src="http://co2calculator.files.wordpress.com/2008/09/grazing-cow-1b.jpg" />
</div>

Then you just set the div containing the link to be absolutely positioned and hide it initially. Then using jQuery, do this:

var cowLink = $('#cow-link');
var cow = $('#cow-link + img');
var cowPos = cow.position();
var linkLeft = cowPos.left + (cow.width() - cowLink.width());

cowLink.css({
    top: cowPos.top + 'px',
    left: linkLeft + 'px'
});

$('#cow-wrapper').hover(function() {
    cowLink.show();
}, function() {
    cowLink.hide();
});

This just calculates the top and left for the link div by finding the left of the cow image + the width of the cow image, minus the width of the div. Then you just have to set the div to hide and show when it's being hovered over. I used a wrapper div so that when you move over the link it doesn't disappear.