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!
SrinathSAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
leakim971Connect With a Mentor PluritechnicianCommented:
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
 
leakim971Connect With a Mentor PluritechnicianCommented:
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
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.