Show image and text on mousover

Hello guys,

Is there any way with Javascript or CSS  to display a small html that contains a background image and text (basically, its a business card) when the user mousover a link? Can you please provide me with some examples? Can this be done with an iFrame?

Thanks
pvg1975Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Gurvinder Pal SinghCommented:
use this hover event
http://api.jquery.com/hover/

you just have to toggle the display status of an html event when you hover in and hover out.
0
pvg1975Author Commented:
Thanks for the prompt reply. I saw the example, but it allows me to show text only. I need to show text plus some graphics.

Thanks!

Paula
0
leakim971PluritechnicianCommented:
Check this :

(You can customize the table inside the div as you want)
<!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.5.1.min.js"></script>
<script language="javascript" >
	$(document).ready(function() {
		$("a").hover(function(e) {
			$("#card").css({"display":"block","left":e.pageX+"px","top":e.pageY+"px"});
		}, function() { $("#card").hide(); });
	});
</script>
</head>
<body>
<a href="javascript:void(0)">MOUSE OVER HERE</a>
<div id="card" style="display:none;position:absolute;">
<table background="http://newsletter.experts-exchange.com/images/2009_07.jpg"><tr height="150"><td width="300" style="color:#CCC"><h1>Paula</h1></td></tr></table>
</div>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Marco GasiFreelancerCommented:
Suppose you have an element called 'main' that has to show a small window onmouseover. You can write in your css these rules:

main span{
  display:none;
}

main span:hover{
    position:absolute;
    display:block;
    width:250px;//set dimensions
    height:40px;
    background: url('path_to_image.jpg') top left no-repeat;
    color:black;// choose one
    text-align:center;//set alignement
    border:1px solid black;//set border
    z-index:99;
}

in your html write this:

<div id='main'>
<span>Write here the text you wish to show</span>
</div>

That's all: no javascript needed, simple and flexible.

Cheers
0
pvg1975Author Commented:
WOW That is AWESOME! You even put my name on the card! LOL

THANKS THANKS THANKS!!!
0
leakim971PluritechnicianCommented:
You're welcome! Thanks for the points!
0
pvg1975Author Commented:
Hi Margus!

Thanks for your comment, it looks like I assigned the points at the same time you were writing the post. Even if Im using Leakim example yours is great and very appreciated too :)


Thanks again!

Paula.
0
pvg1975Author Commented:
leakim971, it works perfect but it appears on every link. Is there anyway to make it appear on just one particular link?

Thanks!
0
pvg1975Author Commented:
Opening a new question for this now!
0
leakim971PluritechnicianCommented:
Sorry I was away
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.