• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 328
  • 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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
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

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

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