How combine mouseover with pop up feature?

**tbk9901** · 08-10-2011, 03:36 AM

Hi, I'm very new @ JavaScript.

Is there a script that can combine a mouseover with a pop-up feature? I'm using 2 GIFs (1 gif is "address", 2nd gif is "address-red") with the mouseover. The pop-up feature would just be 1 line of text saying "Click here for map."

many thanks.

I found the pop up feature I like http://www.dynamicdrive.com/dynamici...tmltooltip.htm
but don't know if I can combine the 2 scripts.

Here is my coding for the mouseover:

<!-- for mouse rollover -->

<script language="JavaScript" type="text/JavaScript">

<!--

function MM_preloadImages() { //v3.0

  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}



function MM_swapImgRestore() { //v3.0

  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

}



function MM_findObj(n, d) { //v4.01

  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

  if(!x && d.getElementById) x=d.getElementById(n); return x;

}



function MM_swapImage() { //v3.0

  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

//-->

</script>

<!-- end mouse rollover script -->

and here is the coding in the body:

<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('address','','/images/address-red.gif',1);"><img name="address" src="/images/address.gif" alt="2002 Jimmy Durante Blvd., Suite 304, Del Mar, CA, 92014" /></a>

If you're wondering why didn't I just include the address as regular html text, it's because I could NOT find a way of force justifying 1 line of text. I looked and looked and finally gave up.

**XManBG** · 08-10-2011, 09:45 PM

Just to show you how you can make it. The functions of Photoshop are just unnecessary complicated. In the example below, I'm using the jQuery hover() method. There are of course other ways too, and the CSS should be performed better.

Code:

<html>
<head>
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>

<body>
	<div id="tooltip" style="z-index:999;top:100px;left:100px;position:absolute;display:none; background-color:#85FF3C;padding:5px; ">This is a tool tip</div>
	<img id="pict" src="address.gif" style="position:absolute;top:50px;left:50px"/>

	<script type="text/javascript">
		$('#pict').hover(function(){
			$(this).attr('src','address-red.gif');
			var posx = 0;
			var posy = 0;
			$(this).mousemove(function(event){
				posx = event.pageX - parseFloat($(this).css('left'));
				posy = event.pageY - parseFloat($(this).css('top'));
				$("#tooltip").css('top',(posy+5)+"px");
				$("#tooltip").css('left',(posx+$(this).width()+15)+"px");
			});
			$("#tooltip").fadeIn('fast');
		},function(){
			$(this).attr('src','address.gif');
			$("#tooltip").fadeOut('fast');
		});
	</script>
</body>
</html>

Thread: How combine mouseover with pop up feature?

Thread Tools

Search Thread

How combine mouseover with pop up feature?

Quick answer

Bookmarks

Bookmarks

Posting Permissions