Solved

how can i make a popup image html on mouseover event

Posted on 2012-04-01
1
157 Views
Last Modified: 2012-04-11
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
Comment
Question by:tenriquez199
1 Comment
 
LVL 16

Accepted Solution

by:
HagayMandel earned 500 total points
ID: 37795338
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

Featured Post

U.S. Department of Agriculture and Acronis Access

With the new era of mobile computing, smartphones and tablets, wireless communications and cloud services, the USDA sought to take advantage of a mobilized workforce and the blurring lines between personal and corporate computing resources.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

832 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question