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

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, чтобы при перемещении по ссылке она не исчезала.