显示超链接，弹出窗口，当鼠标悬停在图片！ [英] Show hyperlink and popup window when Mouseover on image !

问题描述

我开发使用asp.net web应用程序，Telerik的RadAjax控制。我有需要发展时，鼠标悬停图像，然后显示一个超链接，当点击碰杯然后打开一个新的窗口（如Facebook资料图片变化）。请帮我...

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

推荐答案

像这样的事情？ http://jsfiddle.net/d8BSC/

下面的标记：

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

然后你只需设置包含要绝对定位，最初隐藏链接股利。使用jQuery那么，这样做：

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();
});

这只是计算的顶部和通过寻找可牛影像的左+可牛影像的宽度，减去div的宽度留给链接股利。然后你只需设置的div隐藏和显示时，它的正上空盘旋。我用一个包装的div，这样，当您移动通过该链接就不会消失。

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.

这篇关于显示超链接，弹出窗口，当鼠标悬停在图片！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！