Pop Up picture

[chandroo]

Please refer to the following link:-http://www.swishzone.com/index.php?area=pr...mp;tab=overviewI like the way the pointer shows an enlarged same picture on the side and at the same allowing it to enlarge separately. Anyway you can guide me on this script?Thanks.Chandroo

[justsomeguy]

All of the code you need is on that page somewhere. This is the HTML code for one table cell that contains one of the thumbnail images.

<td align="center" valign="middle" width="126" height="100"><a href="products/sites/site100/index.html" class="moreinfo" target="_blank" onmousemove="MovePreview('Romantique');" onmouseover="ShowPreview('Romantique', '100');" onmouseout="ShowPreview('Romantique', '100');">Romantique</a><br><table height="10" width="90" valign="middle" border="0" cellpadding="0" cellspacing="0"><tr><td height="6" valign="middle">$29.95</td><td height="6" valign="middle"> <a href="products/sites/site100/index.html" target="_blank"><img src="images/arrow_right_blue.gif" border="0" alt="View Demo"></a></td><td height="10" valign="middle"> <a href="swishsites/SetupSwishsite100.exe"><img src="images/arrow_down_green.gif" border="0" alt="Download"></a></td><td height="10" valign="middle"> <a style="cursor: pointer;" onclick="ShowPreview('Romantique_History')"><img src="images/history.gif" border="0" alt="Change History"></a></td></tr><tr><td height="0" colspan="4" align="middle"><a href="products/sites/site100/index.html" class="moreinfo" target="_blank" onmousemove="MovePreview('Romantique');" onmouseover="ShowPreview('Romantique', '100');" onmouseout="ShowPreview('Romantique', '100');"><img border="0" width="90" id="site100_panel1" height="70" src="products/sites/purchase/images/site_loading.gif" alt="View Demo"></a></td></tr><tr><td height="0" colspan="4" align="middle"><input type="checkbox" name="p_id" value="200">Add to order<br><br></td></tr></table></td>

So, this is the link itself:<a href="products/sites/site100/index.html" class="moreinfo" target="_blank" onmousemove="MovePreview('Romantique');" onmouseover="ShowPreview('Romantique', '100');" onmouseout="ShowPreview('Romantique', '100');">Romantique</a>That gives the page to load when you click (the href), and the events to fire on mouseover, mouseout, and mousemove. Here are the Javascript ShowPreview and MovePreview functions that show, hide, and move the preview window:

	  function ShowPreview(PreviewName, PreviewNumber)	  {	  var PreviewImgName = PreviewName + "_Img"	  var PreviewImgSrc = "images/" +PreviewName + ".gif"	  var PreviewPanel = document.getElementById(PreviewName);	  var PreviewImg = document.getElementById(PreviewImgName);	  if(PreviewPanel.innerHTML=='' && PreviewNumber != 0)	  {	  PreviewPanel.innerHTML = 'some code to embed a flash movie and show the image';	  }	  if(LastPreviewPanel != '' && LastPreviewPanel != PreviewName)	  {	  var LastPreview = document.getElementById(LastPreviewPanel);	  if(LastPreview.style.visibility == "visible")	  {	  LastPreview.style.visibility = "hidden"	  }	  }	  if(PreviewPanel.style.visibility=="visible")	  {	  PreviewPanel.style.visibility = "hidden";	  }	  else	  {	  if(null!=PreviewImg)	  {	  PreviewImg.src = PreviewImgSrc;	  }	  PreviewPanel.style.visibility = "visible";	  PreviewPanel.style.left = posx+20;	  PreviewPanel.style.top = posy;	  	  }	  LastPreviewPanel = PreviewName;	  }	  function MovePreview(PreviewName)	  {			var PreviewPanel = document.getElementById(PreviewName);			PreviewPanel.style.left = posx+20;			PreviewPanel.style.top = posy;	  }

The ShowPreview function loads the image into a div with the ID of whatever image is getting previewed, so there are divs like this on the page as well:<div class="preview" id="Romantique"></div>Presumably the preview class hides that by default, and the ShowPreview function loads the image into it and then shows it in the appropriate place. There is another Javascript function to get the position of the mouse cursor so that the function knows where to put the preview, and the MovePreview function makes the preview window move when the mouse cursor moves. The GetMousePos function just sets the posx and posy variables equal to the location of the cursor, so when the other functions use posx and posy they will correspond to the cursor location.Essentially, all this does is show and hide a div, load an image into the div, and make the div move whenever the mouse moves.