Improve company productivity with a Business Account.Sign Up

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

how can i make a popup image html on mouseover event

hi...

someone know how can i make a popup image in html when happen moseover event at a text?

i have this code but it don't run

    <td height="83" rowspan="2">&nbsp;</td>
    <td width="87" height="87" bordercolor="#FFFFFF" bgcolor="#FFFFFF">
    <a onmouseover="popup ('<img src= images/texto1.gif>','90px');"> hola</a>
 
     
    <font color="blue"><span title="Calidad en desarrollos humanos , tu mejor opcion">FILOSOFIA</span></font><br />
   
    <font color= "green"><span title="Confianza , Honestidad, Respeto, Eficiencia, Eficacia, Cooperacion">VALORES</span></font><br />
index.html
0
tenriquez199
Asked:
tenriquez199
1 Solution
 
HagayMandelCommented:
With the help of Jquery
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Image in a box</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" language="javascript">
 $(document).ready(function(){ 	
	xOffset = 5;
	yOffset = 20;
    $("#trial").hover(function (e) {		
		$("#message")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px")
			.fadeIn("fast");	
			$("body").append("<div id='message'><img src='https://www.google.com/images/srpr/logo3w.png' width='200px' height='60px'></div>");					
    },
	function(){			
		$("#message").remove();
    });	
	$("#trial").mousemove(function (e) {					
			$('#message').css("top",(e.pageY - xOffset) + "px");
			$('#message').css("left",(e.pageX + yOffset) + "px");
			$('#message').fadeIn("fast");		    });
  	});  
	$("#trial").mouseleave(function () {		
		$("#message").hide();		
	});	
	
</script>
<style type="text/css">
<!--
#message {
	border:thin solid #CCCCCC;
	width: 200px;
	display:none;
	position:absolute;
}
-->
</style>
</head>

<body>
<a href="#" id="trial">Test text</a>
</body>
</html>

Open in new window

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.

Join & Write a Comment

Featured Post

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

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