Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool Thumbnail images - on mouse over larger image appears

    Hi, every1, new to the forum.

    I was wondering if someone could assist me with a problem, i am trying to use the simple mouseover function to to able for my user to mouse over an thumbnail image and them the full size image apears in a black space on the webpage!

    plus, is there a way to have only 1 image instead of having a small one and a large one. i.e a large image can be resized for the thumbnail and appears normal in the mouseover.

    Thanks
    Jonathon

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,073
    Thanks
    38
    Thanked 498 Times in 492 Posts
    Change to the sizes you need and replace the image links.
    See: http://www.nova.edu/optometry/pharma...EnlargeMO.html

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the info

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,073
    Thanks
    38
    Thanked 498 Times in 492 Posts
    You're most welcome.
    Let us know if you have any implementation problems.
    Good Luck!

  • #5
    New to the CF scene
    Join Date
    May 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hey surely there has to be code that is much simpler then that, to just make an image appear in a different place on the webpage?

    Jonathon

  • #6
    New Coder
    Join Date
    May 2008
    Posts
    56
    Thanks
    9
    Thanked 1 Time in 1 Post
    I worked on a simular issue not long ago.
    Between internet searches and this forum this is what I came up with... Hope it helps.

    css
    Code:
    .thumbnail{
    position: relative;
    z-index: 20;
    }
    
    .thumbnail:hover{
    background-color: #FFFFFF;
    z-index: 60;
    }
    
    .thumbnail span{ 
    position: absolute;
    background-color: #FFFFFF;
    padding: 5px;
    left: -1000px;
    border: 4px double #000099;
    visibility: hidden;
    color: blue;
    text-decoration: none;
    }
    
    .thumbnail span img{ 
    border: solid 2px #000099;
    background-color: #FFFFFF;
    padding: 2px;
    }
    
    .thumbnail:hover span{ /*CSS for enlarged image on hover*/
    visibility: visible;
    background-color: #FFFFF;
    top: -120px;
    left: 115px; /*adjust the position where enlarged image should offset horizontally */
    text-align: center;
    }
    html
    Code:
    <a class="thumbnail" href="#thumb" onclick="javascript:window.open (href=file.jpg','null','toolbar=no,status=no,scrollbars=yes,resizable=yes, width=450,height=600'); return false;">
    
    <img src="file.jpg" class="gallery-border" alt="" /><span> discription <img src ="file.jpg" class="gallery-height300" alt="" /></span></a>
    Dedicate some time to Educate your mind

  • #7
    New to the CF scene
    Join Date
    May 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hi, i am very new to all of this and i sort of understand the code but cant rework it to my spec!

    Im sure it is possible to get it much simpler! hope someone will understand ill try explain what i require!

    Imagine a shopping website, on a product page there is a set of thumbnails of images underneath the product content with a black space to the right of it when i mouse over on one of the images, a larger image appears in the blank space beside it, then disppears on mouse out/another thumbnail enlarges there! Do you get what i mean? and can you write code to help me?

    regards Jonathon

  • #8
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,073
    Thanks
    38
    Thanked 498 Times in 492 Posts
    Don't like the earlier post, then try this:
    Code:
    <html>
    <head>
    <title>Single Gallery</title>
    <script type="text/javascript">
    // From: http://www.codingforums.com/showthread.php?t=154649
    //  and: http://www.webdeveloper.com/forum/newreply.php?do=postreply&t=204715
    //  and: http://www.webdeveloper.com/forum/showthread.php?t=205077
    
    var Horses = [
      ['http://www.westsierrahanoverians.com/images/fortunato_foal2.jpg','3 days old'],
      ['http://www.westsierrahanoverians.com/images/fortunato_foal.jpg','3 monhs old'],
      ['http://www.westsierrahanoverians.com/images/fortunato_canter.jpg','Canter'],
      ['http://www.westsierrahanoverians.com/images/forunato_trot.jpg','Trot'],
      ['http://www.westsierrahanoverians.com/images/wakanova_conf.jpg','Wakanova'],
      ['http://www.westsierrahanoverians.com/images/princess_canter.jpg','Princess'],
      ['http://www.westsierrahanoverians.com/images/dona_fran_trot.jpg','Dona Fran trot'],
      ['http://www.westsierrahanoverians.com/images/wakanova_trot2.jpg','Wakanova trot']  // Note: no comma 
    ];
    
    function SetImage(IDS,imgPtr) {
      var ids = '';
      var ImageList = new Array();
      if (IDS.indexOf('F') == 0) { ImageList = Horses; ids = 'BigHorses'; }
      document.getElementById(ids).src=ImageList[imgPtr][0];
      document.getElementById(ids).alt=ImageList[imgPtr][0];
      document.getElementById(ids+'Caption').innerHTML = ImageList[imgPtr][1];
    }
    function InitHorses() {
      for (var i=0; i<Horses.length; i++) {
        document.write('<img id="FC'+i+'" src="'+Horses[i][0]+'" alt="'+Horses[i][0]+'"' 
        + ' height="75" width="75" onMouseOver="SetImage(this.id,'+i+')"><p>');
      }
    }
    </script>
    </head>
    <body>
    <table border="0"><tr>
     <th>
      <div style="height:360;width:100;overflow:auto">
       <script type="text/javascript">InitHorses()</script>
      </div>
     </th>
     <td style="width:100">&nbsp;</td>
     <td> 
     <img id="BigHorses" height="425" width="600"
      src='http://www.westsierrahanoverians.com/images/fortunato_foal2.jpg'
      alt='http://www.westsierrahanoverians.com/images/fortunato_foal2.jpg'
     >
     <br><span id="BigHorsesCaption">Horses Caption</span>
     <br>
     </td>
    </tr></table>
    </body>
    </html>
    Doesn't get much simpler and still do something!

    If you cannot modify, then post where the images are located and we'll try to modify.


  •  

    Posting Permissions

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