JavaScript - Mouseover Thumbnail = Full Image Popup

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>

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]")

Hello, and thanks for any help.

I'm developing a site to include a map of schools (http://www.fcsoablues.net/map.asp). I'm creating hotspot links to googlemaps for each school (in a new browser window). I've got that much working okay.

My problem is, I'd like to include popups for each hotspot that, on mouseover, show the name of the school. The popup should close on mouseoff. Without this, users only see the map full of school icons, and it's difficult to know which school is which.

Ideally, the popup should follow the cursor (not a must, though).

I've included the BODY of the code I'm using below.

Code:

<body>
 <img src="/FCSOA_IMAGES/Foothill-Citrus area map.jpg" width="1600" height="826" border="0" usemap="#Map" />
 <map name="Map" id="Map">
 
   <area shape="rect" coords="1169,166,1196,194" href="http://maps.google.com/maps?rlz=1C1AVSX_enUS420US420&amp;um=1&amp;ie=UTF-8&amp;q=alta+loma+high+school&amp;fb=1&amp;gl=us&amp;hq=alta+loma+high+school&amp;hnear=0x80c32def799fa121:0x5209947000caa933,Pomona,+CA&amp;ei=6x40T_WtDMaU2AXbtPnzAQ&amp;sa=X&amp;oi=local_group&amp;ct=image&amp;ved=0CAgQtgM&amp;iwloc=cids:11113758998891877583" target="_new" alt="Alta Loma High School" />
   
   <area shape="rect" coords="776,299,803,324" href="http://maps.google.com/maps?rlz=1C1AVSX_enUS420US420&amp;um=1&amp;ie=UTF-8&amp;q=claremont+high+school&amp;fb=1&amp;gl=us&amp;hq=claremont+high+school&amp;hnear=claremont+high+school&amp;cid=0,0,7887364383841814220&amp;ei=Mh80T-LLBanm2QX4s72RAg&amp;sa=X&amp;oi=local_result&amp;ct=image&amp;ved=0CA8Q_BI" target="_new" alt="Claremont High School" />
   
   <area shape="rect" coords="523,262,548,289" href="http://maps.google.com/maps?rlz=1C1AVSX_enUS420US420&amp;um=1&amp;ie=UTF-8&amp;q=San+Dimas+High+School&amp;fb=1&amp;gl=us&amp;hq=San+Dimas+High+School&amp;hnear=San+Dimas+High+School&amp;cid=0,0,9099100455580750144&amp;ei=Wx80T7X9D6O-2gXU9YGeAg&amp;sa=X&amp;oi=local_result&amp;ct=image&amp;ved=0CA8Q_BI" target="_new" alt="San Dimas High School" />
   
 </map>
</body>

Hello,

I am working on a page that has a jQuery full browser BG image and I am trying to also utilize a MooTools gallery. There seems to be some interference between the two JavaScripts as only one works (whichever one is last in order in the header of the HTML document).

Links:

http://www.courtneyhunt.com.au/press_bg.html
http://www.courtneyhunt.com.au/press_gallery.html

I am a complete novice with JavaScript so if anyone could help that would be great.

Thank you in advance.

I need help finding a script where you have a main picture and then below that will be thumbnails and when you click on them they are shown where the main picture is.

Thank you

Hi,

Hope that someone can help me with a little problem I have. I building a little page that has some photos of the family. Ive created little thumbnails and large versions of each image.

What im trying to achieve is that in div a: i have each of the thumbnails and in div b: it displays a large verison on the image thats clicked.

Ive seen a few methods when searching using java and ajax etc, but i'm not sure which is the best way to do this and the most simple so that I dont have to create a new page for each image.

Thanks for your help in advance.

Hi,
I have a table with 2 colums, the left column is to preview image and the right column is for 4 small thumbnails. Iwant the preview picture to change when clicked on the individual thumbnail.
Can someone please help me on this?
Code:

<table width="816" height="303" border="1">
  <tr>
    <td width="396" height="297">&nbsp;</td>
    <td width="404" valign="top"><table width="100%" border="1">
      <tr>
        <td width="52%" height="166"><img src="../Avizhome/images/calendar1.jpg" width="200" height="200"/> </td>
        <td width="48%"><img src="../Avizhome/images/calendar1.jpg" width="200" height="200" /></td>
      </tr>
      <tr>
        <td height="174"><img src="../Avizhome/images/calendar1.jpg" width="200" height="200" /></td>
        <td><img src="../Avizhome/images/calendar1.jpg" width="200" height="200" /></td>
      </tr>
    </table></td>
  </tr>
</table>

Hello, I would like some help with a two stage display of thumbnails. I have managed to display all thumbnail product images of my targetId in a scrolling div from the contents of my targetId image folder. I have also managed to display the thumbnail as a larger image in a html image. I would now like to apply a href link to the larger image so that I can display using jsquery lightbox, but I can't figure out what code i need and where it should go. Please help!

Code:

<head>
<script type="text/javascript">
 function replaceImg(path) {
 	var imgDest = document.getElementById('image');
	var imgSrc = path;
	imgDest.setAttribute("src", imgSrc);
	}
</script>

</head>
<body>

    <div class="productimage"><img id="image" img src="product_images/<?php echo $targetID; ?>/<?php echo $targetID; ?>.jpg" width="253" height="378" border="0" /></div>

    <div class="gallerypics"><?php
		$counter = 0; 
     foreach (glob("product_images/$targetID/thumb/*.jpg") as $pathToThumb)
    {
        $filename = basename($pathToThumb);
        echo ('<div class="gallerypicsframe"><a href="javascript:replaceImg(\'product_images/'.$targetID.'/'.$filename.'\')"><img src="'.$pathToThumb.'"" width="60" height="90" border="0"/></a></div>');
        $counter++;
    }
?>

</body>

Hi,

I'm have set up a gallery site, pretty standard stuff with thumbnails to the right and big image to the left. I would like to add a fade in on the big image when the thumbnail is clicked and don't really know how to implement it.
The big images are contained in a div called <#left> while the thumbs are within a div called <div class="gallery">

I have searched Google and these forums for a solution but haven't had any luck...can anyone help me out with this?

Thanks

J

Hello all..I am new to this forum and also new to html and js. I started college at the ripe old age of 55 and I have to take this course for my required degree I have a table 5 across with thumbnails inside and a larger cell at the bottom with a picture of me. I need to write a javascript function that will make the big picture change when I click on the thumbnail...there is also a smaller cell at the bottom that would change that text to a description as well,when thumbnail clicked. Ihave no clue where to start. Any help would be much appreciated!! Thanks In advance

<style>
.table th {border-style: solid; border-color: red;background-color: #CCCCFF;
}
</style>
<body>
<table border="1" class="table">
<thead>
<th colspan = "5">Click an Image to Enlarge
</th>
</thead>
<tbody>
<tr>
<td>
<img src = "Thumbnails/ada1838-thumb.JPG" alt =
"ada1838-thumb" >
</td>
<td>
<img src = "Thumbnails/adaplaque-thumb.JPG" alt = "adaplaque-thumb">
</td>
<td>
<img src = "Thumbnails/babbageborn-thumb.JPG" alt = "babbageborn-thumb">
</td>
<td>
<img src = "Thumbnails/aediagram-thumb.JPG" alt =
"aediagram-thumb">
</td>
<td>
<img src = "Thumbnails/babbage1860-thumb.JPG" alt = "babbage1860-thumb">
</td>
</tr>

<tr><td colspan= "5" ><img src= "All_Images/Me@home.JPG" alt = "Me @ Home" width = "800px" height= "800px" align="center">

</td>
</tr>
<thead>
<th colspan = "5">
</th>
</thead>
</table>
</body>
</html>

I would like to have an image color change when mousing over it, thus defining it as a link. What do I have to do to make this happen? Thanks.

Hi
I want to create a javascript form validation but i cant with the following code.
What is wrong with the code? How to create a form validation without changing the following code-
Code:

<html>
<head><title>Javascript Validation</title>
<style>
  .lf{
position:relative;
left: 30px;
 float right;
 }
</style>
<script>
 function validate()
{
var c=document.getElementById("f1").value;
  if(c.length<1)
 alert(" Name Field can't be blank");

 if(c.length<=5)
 alert("Enter a valid name");

var a=parseInt(document.getElementById("f6").value);alert(a);
var b=document.getElementById("f7").value;alert(b);
var d=document.getElementById("f8").value;alert(d);
var lp=0;
  if((d%400)==0 && (d%100==0) || (d%4==0))
  lp=1;


  if((a==31) && ((b=="4") || (b=="6") || (b=="9") || (b=="11")) )  
    alert("Date out of Range"); 
 if((lp==0) && ((a=="29") || (b=="2")  )  
    alert("Date out of Range"); 


} 


</script>

</head>
<body>
 <div style="width:50%;background-color:lightgray;"> 
<fieldset>

 <legend  style="color:brown;font-weight:bold;"> SignUp Form</legend>
<table height=300>
 
<form>
   <tr><td> FirstName:&nbsp;&nbsp;<input type="text" name="fn" id="f1"  class="lf" size=50 /></td></tr>
  <tr><td> Address: &nbsp;&nbsp;&nbsp; <input type="text" name="adr" id="f2" class="lf" size=50 /></td></tr><br/><br/>
  <tr><td> Zip:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" name="zp" id="f3" class="lf" size=20 /></td></tr><br/><br/>
  <tr><td> UserName:&nbsp;<input type="text" name="fn" id="f4" class="lf" size=30 /></td></tr>
  <tr><td> Password: &nbsp;&nbsp;<input type="password" name="fn" id="f5" class="lf" size=30 /></td></tr>
  <tr><td> DOB: <br /><br />Day:&nbsp;&nbsp;&nbsp;<input type="text" name="dy" id="f6" />
  		Month:&nbsp;<input type="text" name="m1" id="f7" />
  		Year:&nbsp;<input type="text" name="m2" id="f8" /></td></tr>
 <tr><td> Email:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" name="fn" id="f9"  size=50 /></td></tr>
  <tr><td><center>

  <input type="submit" value="submit" onClick="validate()" />
</center></td></tr> 
</form>

</table>


</fieldset></div></body>
</html>

Hello folks, I'm new here.
This is just a question regarding a script I'm after that enlarges an image onmouseover and shrinks the other two images.

It is probably best I explain this by using drawings.
As you can see, in figure 1, I have a line of three images connected in boxes (although shape will probably change to something more complex later)


(Figure 1)

Then in figure 2, when the user rolls the mouse over the middle image, it enlarges, and the other two shrink, whilst still remaining very much side by side/in the same position.


(Figure 2)

The same action would apply when the user rolls their mouse over any of the three images, I'm just using the middle purely as an example!

Is there any way to do this or script I can use? My javascripting skills aren't brilliant!

Cheers.

hi there, i am a novice at this and have copied and pasted code to try and acheive what i need but am having trouble. I have two functions, one to show random ads but the second is to show the "ads" in a larger image in a different place when mouseover. Although this code works i now want to adapt it to show a slightly different picture. Here is the code i am using and a presume the problem lies with the showIt(this.src) as i dont want it to show the same picture. Any help would be great. Thank you

here is the script i am using

<head>
<script type="text/javascript" src="??????????.js"></script>
<script type="text/javascript">
function showIt(imgsrc)
{
var holder = document.getElementById('imageshow');
var newpic= new Image();
newpic.src=imgsrc;
holder.src=imgsrc;
holder.width =300;
holder.height=300;
}
</script>
</head>

and here is the main body code

<a href="http://www.???????.com/" rel="nofollow" target="_blank"><img src="???????.jpg" width="100" height="100" border="1" onmouseover="showIt(this.src)"></a>'