Afficher le lien hypertexte et la fenêtre contextuelle lorsque la souris sur l'image!

Question

Je développe une application web en utilisant asp.net, contrôle telerik RadAjax. Je dois devoir développer quand mouseover l'image puis montrer un lien hypertexte et quand cliquetez le clink alors ouvrez une nouvelle fenêtre (comme le changement d'image de profil de facebook). S'il vous plaît Aidez-moi ...

Answer 1

Quelque chose comme ça? http://jsfiddle.net/d8BSC/

Voici le balisage:

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

Alors que vous venez de la div contenant le lien pour être placé de façon absolue et le cacher au départ. Ensuite, en utilisant jQuery, faites ceci:

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

Ce calcule juste le haut et à gauche pour le lien div en trouvant la gauche de l'image de la vache + la largeur de l'image de la vache, moins la largeur de la div. Ensuite, il vous suffit de définir le div pour masquer et montrer quand il est survolé. J'ai utilisé un div wrapper de sorte que lorsque vous passez sur le lien, il ne disparaît pas.