[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 326
  • Last Modified:

jQuery Image Over Text - How?

Hello,

I would like to display an image when I mouse over particular text in a webpage. i.e., I need to display the user image when I mouse over each user name. The webpage is developed purely in HTML. Any further resources / scripts would be greatly appreciated! Thanks!
0
SrinathS
Asked:
SrinathS
  • 4
  • 3
2 Solutions
 
leakim971PluritechnicianCommented:
Check this :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script language="javascript">
	$(document).ready(function() {
		$(".pic").hide();
		$(".txt").hover(function(e) {
				$(".pic").css({"position":"absolute", "left":e.pageX, "top":e.pageY}).toggle();
		});
	});
</script>
</head>
<body>
<table>
<tr><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td></tr>
<tr><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td></tr>
<tr><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td></tr>
<tr><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td></tr>
<tr><td>text</td><td>text</td><td>text</td><td>text</td><td class="txt"><b>COME HERE</b></td><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td></tr>
<tr><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td></tr>
<tr><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td></tr>
<tr><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td></tr>
</table>
<div class="pic"><img src="http://www.usefilm.com/images/4/6/7/0/4670/1195576-medium.jpg" /></div>
</body>
</html>

Open in new window

0
 
SrinathSAuthor Commented:
Wow! I understand the basic usage. How can I customize the mouse over effect? i.e., Currently it's displaying the image suddenly. I would like to display an image above text. I mean how can I get smoother rollover effect?
Thanks for your quick response!
0
 
leakim971PluritechnicianCommented:
you can use delay in toggle for example : toggle("slow")

http://api.jquery.com/toggle/

Check slideToggle too : http://api.jquery.com/slideToggle/

Other jQuery effect : http://www.w3schools.com/jquery/jquery_effects.asp
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
SrinathSAuthor Commented:
Good to see your reply. I will implement this tonight. Thanks.
0
 
leakim971PluritechnicianCommented:
You're welcome!
0
 
SrinathSAuthor Commented:
Solved.
0
 
leakim971PluritechnicianCommented:
Thanks for the points!
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now