JavaScript - Hotspots: Popup On Mouseover, Closes On Mouseoff, New Browser Window On Click

Hello everyone. I am trying to add the functionality of having a mouseover popup image with multiple different popup images. I have found the code seen below and altered it for my uses and was hoping to find out if someone can tell me why I am seeing the same image with each mouseover. Thanks.

<script type="text/javascript">
function ShowPopup(hoveritem)
{
hp = document.getElementById("hoverpopup");

// Set position of hover-over popup
hp.style.top = hoveritem.offsetTop + 18;
hp.style.left = hoveritem.offsetLeft + 20;

// Set popup to visible
hp.style.visibility = "Visible";
}

function HidePopup()
{
hp = document.getElementById("hoverpopup");
hp.style.visibility = "Hidden";
}
</script>
<table>
<tbody>
<tr>
<td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867796.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">
</a>
<div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851557.jpg" /></div>
</td>
<td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867803.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">
</a>
<div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851637.jpg" /></div>
</td>
<td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867802.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">
</a>
<div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851627.jpg" /></div>
</td>
<td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867799.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">
</a>
<div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851597.jpg" /></div>
</td>
<td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867797.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">
</a>
<div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851567.jpg" /></div>
</td>
<td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867798.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">
</a>
<div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851577.jpg" /></div>
</td>
<td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867800.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">
</a>
<div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851607.jpg" /></div>
</td>
<td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867801.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">
</a>
<div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851617.jpg" /></div>
</td>
<td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867804.jpg" /></a></td>
</tr>
</tbody>
</table>
<table width="270" cellspacing="1" cellpadding="1" border="0">
<tbody>
<tr>
<td><a href="javascriptopImage('http://entrixsports.com//ir/oi/1000954/1856598.jpg');"><img width="96" height="100" border="0" align="middle" alt="" src="http://entrixsports.com//ir/oi/1000954/1856097.jpg" /></a></td>
<td style="text-align: center;"><a href="javascriptopImage('http://entrixsports.com//ir/oi/1000954/1856227.jpg');"><img width="65" height="100" border="0" align="middle" src="http://entrixsports.com//ir/oi/1000954/1856098.jpg" alt="" /></a></td>
<td style="text-align: right;"><a href="http://entrixsports.com/linkTo/1304219/1000954" rel="nofollow" target="_blank"><img width="60" height="102" border="0" align="middle" alt="" src="http://entrixsports.com//ir/oi/1000954/1856099.JPG" /></a></td>
</tr>
</tbody>
</table>

Hey guys i'm making a clothing website and i was just wondering.. if i have a bunch of thumbnail sized images on the page atm, how would i go about so if people put their mouse over the thumbnail, it would load the full sized T-shirt? I obviously have the images on my computer and host for the Thumbnails and the Real-image sized shirts.


Thanks

xx

I'd seriously appreciate some guidance with the following:-

The site in question: http://www.professorbet.com/2010/football2010win.php

The problem: Popups work fine, as they open the mini thumbnails when you mouseover. However, as you scroll down the page, the images move with you. So, if you mouseover'd the top result (having not scrolled down) the graph would appear when it was supposed to. However, if you scrolled down 200px, and then mouseover'd the top result (or any result), the thumbnail would popup 200px lower than it should.

The guide site I used: http://www.dynamicdrive.com/dynamici...agetooltip.htm - it doesn't happen on their site (potentially because they're not as stupid as me).

I set up a dummy site of their site: http://www.professorbet.com/1.htm - I just copied the source code for everything and changed literally nothing. It still happens on my version of the site.

If this is a simple fix that anyone knows, I would love the help. If not, I'll just continue crying myself to sleep.

Thank you in advance!

Code:

<script type="text/javascript" src="ddimgtooltip.js">

/***********************************************
* Image w/ description tooltip v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

Code:

/* Image w/ description tooltip v2.0
* Created: April 23rd, 2010. This notice must stay intact for usage 
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/


var ddimgtooltip={

	tiparray:function(){
		var tooltips=[]
		//define each tooltip below: tooltip[inc]=['path_to_image', 'optional desc', optional_CSS_object]
		//For desc parameter, backslash any special characters inside your text such as apotrophes ('). Example: "I\'m the king of the world"
		//For CSS object, follow the syntax: {property1:"cssvalue1", property2:"cssvalue2", etc}

		tooltips[0]=["red_balloon.gif", "Here is a red balloon<br /> on a white background", {background:"#FFFFFF", color:"black", border:"5px ridge darkblue"}]
		tooltips[1]=["duck2.gif", "Here is a duck on a light blue background.", {background:"#DDECFF", width:"200px"}]
		tooltips[2]=["../dynamicindex14/winter.jpg"]
		tooltips[3]=["../dynamicindex17/bridge.gif", "Bridge to somewhere.", {background:"white", font:"bold 12px Arial"}]

		return tooltips //do not remove/change this line
	}(),

	tooltipoffsets: [20, -30], //additional x and y offset from mouse cursor for tooltips

	//***** NO NEED TO EDIT BEYOND HERE

	tipprefix: 'imgtip', //tooltip ID prefixes

	createtip:function($, tipid, tipinfo){
		if ($('#'+tipid).length==0){ //if this tooltip doesn't exist yet
			return $('<div id="' + tipid + '" class="ddimgtooltip" />').html(
				'<div style="text-align:center"><img src="' + tipinfo[0] + '" /></div>'
				+ ((tipinfo[1])? '<div style="text-align:left; margin-top:5px">'+tipinfo[1]+'</div>' : '')
				)
			.css(tipinfo[2] || {})
			.appendTo(document.body)
		}
		return null
	},

	positiontooltip:function($, $tooltip, e){
		var x=e.pageX+this.tooltipoffsets[0], y=e.pageY+this.tooltipoffsets[1]
		var tipw=$tooltip.outerWidth(), tiph=$tooltip.outerHeight(), 
		x=(x+tipw>$(document).scrollLeft()+$(window).width())? x-tipw-(ddimgtooltip.tooltipoffsets[0]*2) : x
		y=(y+tiph>$(document).scrollTop()+$(window).height())? $(document).scrollTop()+$(window).height()-tiph-10 : y
		$tooltip.css({left:x, top:y})
	},
	
	showbox:function($, $tooltip, e){
		$tooltip.show()
		this.positiontooltip($, $tooltip, e)
	},

	hidebox:function($, $tooltip){
		$tooltip.hide()
	},


	init:function(targetselector){
		jQuery(document).ready(function($){
			var tiparray=ddimgtooltip.tiparray
			var $targets=$(targetselector)
			if ($targets.length==0)
				return
			var tipids=[]
			$targets.each(function(){
				var $target=$(this)
				$target.attr('rel').match(/\[(\d+)\]/) //match d of attribute rel="imgtip[d]"
				var tipsuffix=parseInt(RegExp.$1) //get d as integer
				var tipid=this._tipid=ddimgtooltip.tipprefix+tipsuffix //construct this tip's ID value and remember it
				var $tooltip=ddimgtooltip.createtip($, tipid, tiparray[tipsuffix])
				$target.mouseenter(function(e){
					var $tooltip=$("#"+this._tipid)
					ddimgtooltip.showbox($, $tooltip, e)
				})
				$target.mouseleave(function(e){
					var $tooltip=$("#"+this._tipid)
					ddimgtooltip.hidebox($, $tooltip)
				})
				$target.mousemove(function(e){
					var $tooltip=$("#"+this._tipid)
					ddimgtooltip.positiontooltip($, $tooltip, e)
				})
				if ($tooltip){ //add mouseenter to this tooltip (only if event hasn't already been added)
					$tooltip.mouseenter(function(){
						ddimgtooltip.hidebox($, $(this))
					})
				}
			})

		}) //end dom ready
	}
}

//ddimgtooltip.init("targetElementSelector")
ddimgtooltip.init("*[rel^=imgtip]")

Hi,

I'm kinda hoping this is possible but haven't found any reference to it...

I have a parent page that opens a popup on click that launches a sidebar navigation on the right of the screen and resizes the parent page. What I am wanting to do is create a second popup (approx 250px high) that opens below the navigation (which is only around 600px high) but I have noticed that even when you have no status bar in the popup windows, they can still end up overlapping because of additional tools or plugins that the viewer has in their browser.

Is there any way to get the popups to butt up against each other instead of overlapping? More like a relative popup?

Any assistance would be appreciated. :-)

Hello

I'm a beginner when it comes to javascript. I found a nice script that did what I wanted, which was have 3 "buttons" that on hover change a different image to the side of them. However, I also would like the button that if clicked to go to a section of the website - so an internal link.
I was slightly confused when reading that to have a link in javascript isn't good practice. How could I achieve this?

I would really appreciate any help, thank you

below is the code

Code:

<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>
</head>

<body bgcolor="FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('information-white-alt.png','training-quote.png','training-white-alt.png','consultancy-quote.png','information-white-alt.png','information-quote.png')">
<table width="350" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><a href="javascript:;" onMouseOver="MM_swapImage('b1up','','information-white-alt.png','biganchor','','information-quote.png',1)" onMouseOut="MM_swapImgRestore()"><img src="information-white.png" name="b1up" width="270" height="74" border="0" id="b1up"></a></td>
    <td rowspan="3"><div align="center"><img src="home-statement.png" name="biganchor" width="500" height="222" id="biganchor"></div></td>
  </tr>
  <tr>
    <td><a href="javascript:;" onMouseOver="MM_swapImage('biganchor','','training-quote.png','b2up','','training-white-alt.png',1)" onMouseOut="MM_swapImgRestore()"><img src="training-white.png" name="b2up" width="270" height="74" border="0" id="b2up"></a></td>
  </tr>
  <tr>
    <td><a href="javascript:;" onMouseOver="MM_swapImage('biganchor','','consultancy-quote.png','b3up','','information-white-alt.png',1)" onMouseOut="MM_swapImgRestore()"><img src="information-white.png" name="b3up" width="270" height="74" border="0" id="b3up"></a></td>
  </tr>
</table>

Hi people !
I went to this page:

http://www.javascriptkit.com/script/....shtml#current

and I applied that script to my website, everything work perfectly.
I only have a question about it:

* What should I add to the code to avoid the sound activate even when I'm hovering over the margin of the image?

* Would it be possible that the sound activate only when the mouse is hovered over the image and not the margin as well ?

* Is the only solution; to insert every image in their own div and then letting the div handle the margin?

this is the site www.blackbandanamovement.com
the images I'm talking about are in the footer.
thanks in advance

I got this javascript Click sound effect to work - http://www.javascriptkit.com/script/...oundlink.shtml

My question is how do I make it work on my iphone4 ?

I tested the above site on my phone and there is no audio when I tap the screen.

The html5 <audio> seems to work with my mobile device on this site - http://css-tricks.com/examples/SoundOnHover/

I am new to javascript

thx

hi currently i am using this to goto new page:

Code:

  <div    onClick="document.location='nextpage.html';"   class="active">sometext</div>

how can i make it a popup to that page if i click anywhere in the div, thanks for any help.

I am looking to have a link open a closeable window that is contained within a browser window. If you click on the "sizing charts" link on this website, this is exactly what I am looking to do:

http://www.bella.com/mapper.php?pageid=40

The window is contained within the current browser window, it can be dragged around, but not outside the parameters of the browser window.

Is there a title for this technique that I can research? Not looking to waste anybodys time, but if I can get steered in the right direction it would be greatly appreciated.

Thanks

Hi

Ive found out how to force another browser window to open at a certain size when a link is clicked.

Here's the whole line of code including the layer, the javascript and the image,

<div id="Layer6" style="position:absolute; width:10px; height:8px; z-index:6; left: 561px; top: 310px"><a href="javascript:;" onClick="MM_openBrWindow('navigation%20instructions.htm','','width=50,height=50')"><img src="images/info.gif" width="15" height="15" border="0"></a></div>

How do I adapt this so I can also specify the x&y co-ordinates of the opened window relative to the window that launched it.

thanks alot

Masten

I guess this case applies to both popup windows opened by window.open() and by showModalWindow().

I have two buttons in popup window, "Cancel" and "Save". If the user clicks either button, there is a "process" at parent window before close() at popup being called. The problem now is, if the user click the "X" sign at top right corner of that popup window, how to trigger the "process"?

I think I can do nothing in popup window since the closure is unexpected programmatically. Can I put some kind of listener in parent window to detect if popup is closed?

I have a map with hotspots, and when you hover over a hot spot, a hidden DIV appears. Thanks to my favorite coding forum, this one, I was able to successfully accomplish this first bit of code. The only problem I'm having now is getting the DIV to remain open while I move my mouse from the hotspot to the DIV. As soon as I move my mouse away from the hotspot, the DIV disappears. I need to put links in the DIVs, and users will need to be able to move their mouse away from the hotspot to click on the link, but currently can't.

I experimented with setTimeout, but didn't get too far. If anyone could help me, I'd appreciate it. I really need to get this working.

Code:

<img src="images/map.png" alt="" usemap="#map"/>
			
<map id="map" name="map">
<area shape="rect" coords="211,84,225,97" href="#" alt=""/>
<area shape="rect" coords="226,78,240,92" href="#" alt=""/>
<area shape="rect" coords="353,66,376,89" href="#" alt=""/>
</map>

<div id="hidden">
	<div class="location" style="left:25px; top:-290px;">
		<img src="images/location01.jpg" alt=""/>
	</div>
				
	<div class="location" style="left:25px; top:-275px;">				
		<img src="images/location02.jpg" alt=""/>
	</div>

	<div class="location" style="left:275px; top:-285px;">
		<img src="images/location03.jpg" alt=""/>
	</div>
</div> <!-- #hidden -->

Code:

function show(which) {
	var area = document.getElementById("map").getElementsByTagName("area");
	var locations = document.getElementById("hidden").getElementsByTagName("div");

	for (var a=0; a < area.length; ++a) {
		if(area[a] == which) locations[a].style.display="block";
		}
	}
					
function hide() {
	var locations = document.getElementById("hidden").getElementsByTagName("div");

	for (var d=0; d < locations.length; ++d) {
		locations[d].style.display="none";
		}
	}
					
function init() {
	var area = document.getElementById("map").getElementsByTagName("area");

	for (var a=0; a < area.length; ++a) {
		area[a].onmouseover = function() { show(this); }
		area[a].onmouseout = hide;
		}
	}

window.onload = init;

Hi all,

I am using the following script posted on this site: http://www.javascriptkit.com/script/...oundlink.shtml

It works great, but I want to extend this script and mute the sound using a checkbox. This checkbox has the id: sound. If checked, I want to hear the sounds, when unchecked, no sounds should be heard.

This is the code I currently have for the checkbox:
Code:

function playSound() {
    if (document.getElementById('sound').checked){
        -something needs to be added here to make it work?-
    }
}

Anyone have an idea how to make this work?

Many thanks

Hi All

How popup windows are made using Javascript? I am not talking about the popups cretaed using window.open. I am talking about the window which appears to display some advertisements in most of the sites.

Charles

Hey there everybody!

I'm learning javascript, and I am having trouble figuring out how to do this. Maybe you guys can help me out.

What I need is for my main page to have a text field. Above the text field there should be a set of images for bold, italics, underline, etc; when you click on them it inserts the html code <b></b> at the cursor point.

Next I want there to be a link, that when clicked will open a popup box with smileys. When you click on one of the smiley images it should insert the smiley code (example :smile: ) into the parent window text field. And would it be possible to make that work with pages of emotes? Or perhaps a second popup window?

I hope I explained that without it sounding confusing. I would really appreciate any help.

Here is my basic code, it does not include a popup code however.
Code:

<html>
<script type="text/javascript">
function insert(el,ins) {
window.lstText={};
    if (el.setSelectionRange){
        el.value = el.value.substring(0,el.selectionStart) + ins + el.value.substring(el.selectionStart,el.selectionEnd) + el.value.substring(el.selectionEnd,el.value.length);
    }
    else if (document.selection && document.selection.createRange) {
        el.focus();
        var range = document.selection.createRange();
        range.text = ins + range.text;
    }
}
</script>
<body>
<form>


<textarea rows="20" cols="100" name="txt1" onfocus="window.lstText=this;">
This is sample text, click anywhere in here then
choose on of the buttons above to see text inserted.
</textarea><br /><br />
<img src="http://i570.photobucket.com/albums/ss141/vwcorrado/Docs_smiley.jpg" onclick="insert(window.lstText,'hello')">

<input type="button" value="hi" onclick="insert(window.lstText,'hi')">
<br />
</form>
</body>
</html>