script to view front & back of stamp image

**asiatic** · 06-01-2010, 11:44 AM

i have a stamp website & i wish to put up the front & back image of the stamp. Is there any such script whereby the viewer on mouseover or on click can see the backside at the same time, or as a last resort a javascript popup on the same page to see front & back.

**djr33** · 06-01-2010, 11:52 AM

The way you are asking the question does not make much sense to me.

I think it is easier if you think of the "front" and the "back" as just two separate images.

A normal rollover (mouseover) will switch them. You want to see both?

What happens WITHOUT the rollover? Do you want to see only the front (image1)?

Then what you want to do is make the back (image2) popup next to image1 on top of whatever else is there?

So you just want an image "expand" script?

I don't know of anything exactly like this, but it's certainly possible. One of the easiest ways I can think of is to use display:hidden in the CSS for the 'back' image. Place that (using position:absolute and a high z-index) next to the other image. Then use Javascript to make it visible (not hidden) onmouseover, and onmouseout back to hidden.

**asiatic** · 06-01-2010, 12:10 PM

thanks for your very fast reply.

i will elaborate. On display will be an image of a postage stamp. A buyer wants to see the back of the stamp to view the hinge /gumming, etc.
When he does the mouseover on the stamp he should be able to see the back also, while the front also is visible on the same page. pl note i am just a layman & would request you to guide me.

DD is like a bible to me & besides stamps, yours is the only other site i check on regularly, its like an addiction! - believe me i have learnt a lot thru your forums.

**vwphillips** · 06-01-2010, 03:17 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>

<script type="text/javascript">
/*<![CDATA[*/

function PopUp(obj,src,left,top,width){
 if (!this.pop){
  this.pop=document.createElement('IMG');
  this.pop.style.position='absolute';
  this.pop.style.zIndex='101';
  document.body.appendChild(this.pop);
 }
 if (src){
  this.pop.src=src;
  this.pop.width=width||obj.width;
  this.pop.style.left=pos(obj)[0]+(left?left:obj.width)+'px';
  this.pop.style.top= pos(obj)[1]+(top?top:0)+'px';
 }
 this.pop.style.visibility=src?'visible':'hidden';
}

 function pos(obj){
  var rtn=[0,0];
  while(obj){
   rtn[0]+=obj.offsetLeft;
   rtn[1]+=obj.offsetTop;
   obj=obj.offsetParent;
  }
  return rtn;
 }

/*]]>*/
</script>

</head>

<body>

<center>
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="60" height="60" onmouseover="PopUp(this,'http://www.vicsjavascripts.org.uk/StdImages/Two.gif');" onmouseout="PopUp();"/>
<br />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="60" height="60" onmouseover="PopUp(this,'http://www.vicsjavascripts.org.uk/StdImages/Four.gif',-80,20,80);" onmouseout="PopUp();"/>
</center>
</body>

</html>

Thread: script to view front & back of stamp image

Thread Tools

Search Thread

script to view front & back of stamp image

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions