在圖像上鼠標懸停時顯示超鏈接和彈出窗口！

Question

我正在開發一個使用asp.net，telerik RadAjax控件的Web應用程序。當鼠標懸停在圖像上時，我必須開發，然後顯示超鏈接，當點擊碰撞然後打開一個新窗口（如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，這樣當你移動鏈接時它不會消失。