Results 1 to 4 of 4

Thread: script to view front & back of stamp image

  1. #1
    Join Date
    Mar 2007
    Posts
    40
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Default script to view front & back of stamp image

    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.

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| español | Deutsch | italiano | português | català | un peu de français | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. #3
    Join Date
    Mar 2007
    Posts
    40
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

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

    asiatic (06-02-2010)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •