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?
 
leakim971Connect With a Mentor PluritechnicianCommented:
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
 
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
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

 
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
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.