Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

I have a hyperlink and whenever I do a mouse over it should show other www.abc.com page. Eg: <a href="www.xyz.com">Title</a>, on mouse over it should show www.abc.com page. '

I appreciate your response. Either jquery or javascript solution is fine.

Thanks.

share|improve this question
    
What do you mean by "should show www.abc.com page"? Shall it just change the URL on the link or shall it actually show the page - in like a preview? –  Daniel Ziga Mar 1 '12 at 16:15
    
show the page - in like a preview –  4uSharePoint Mar 1 '12 at 16:15
add comment

3 Answers

In html:

<a href="www.xyz.com" title="www.abc.com page">Title</a>

By jQuery:

$("a[href=www.xyz.com]").attr("title", "www.abc.com page");

By JavaScript (linkElement should be gotten previously):

linkElement.title = "www.abc.com page";
share|improve this answer
    
I want to preview the entire www.abc.com page on mouse over to hyperlink –  4uSharePoint Mar 1 '12 at 17:03
    
Use onhover attribute. You should create a modal window in than event. –  Aviw Mar 1 '12 at 19:23
add comment

http://psoug.org/snippet/Preview_URLPage_On_Hover_216.htm

share|improve this answer
    
I tried that one, it is not working. Please let me know if it works for you. –  4uSharePoint Mar 1 '12 at 17:17
add comment

you can try this

Jquery:

function Tip()
{
  var s = $('[id*=myanchor]').attr('href');
 $('[id*=mydiv]').empty();
 $('[id*=mydiv]').append(s);
}

function Untip()
{
 $('[id*=mydiv]').empty();
}

css :

 a.tooltip div {display:none; padding:10px 3px; margin-left:18px; width:130px;}
 a.tooltip:hover div{display:inline; position:absolute; border:1px solid #cccccc; background:#ffffff; color:#6c6c6c;}

your anchor Tag should be like this :

 <a href="www.google.com" class="tooltip" id="myanchor" onmouseover="Tip();" onmouseout="Untip()">Title<div id="mydiv" style="background-color:Black;color:White;text-align:left !important; width:auto;height:auto;"></div></a>   
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.