Показать гиперссылку и всплывающее окно при наведении мыши на изображение!

Question

Я занимаюсь разработкой веб-приложения с использованием asp.net, telerik RadAjax control. Мне нужно разработать, когда наведите курсор мыши на изображение, затем отобразите гиперссылку, а когда щелкните клик, откройте новое окно (например, изменение изображения профиля Facebook). Пожалуйста, помогите мне ...

Answer 1

Как то так?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>

Затем вы просто устанавливаете div, содержащий ссылку, для абсолютного позиционирования и скрываете ее изначально.Затем, используя jQuery, сделайте следующее:

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, чтобы скрывать и показывать, когда он находится над ним.Я использовал div-обертку, чтобы при перемещении по ссылке она не исчезала.