Back To Website Design Forum

Image preview?

Post January 6th, 2006, 2:31 pm

Hi all !
I was wondering does anyone know how an image on a website can be previewed by simply mousing over text.I have an image preview but it pops up in a new window that is huge,when text is clicked!I actually want it either to fit the previewed image in a pop up or preview on mouseover?I have tried a couple of scripts that are supposed to fit the image but even when changing the size of the pop up etc they don't work for me :? I am only new at all this webdesign stuff,so not sure if the way i am describing what i want is even correct LOL.Any help would be much appreciated.Please keep it simple for me ,no technical lingo LOL :oops:
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post January 6th, 2006, 2:31 pm

  • Impel GD
  • Professor
  • Professor
  • No Avatar
  • Joined: Oct 26, 2004
  • Posts: 838
  • Loc: Cologne, Germany
  • Status: Offline

Post January 6th, 2006, 4:00 pm

istockphoto.com uses the Simple Image Trail javascript.

Here's an example of the code they apply to a thumbnail:

Code: [ Download ] [ Select ]
onmouseover="showtrail('http://www1.istockphoto.com/file_thumbview_approve/414666/2/istockphoto_414666_lost_bread_1.jpg','Lost Bread 1','Lost Bread','3.0000','0','1',180);"
onmouseout="hidetrail();"
  1. onmouseover="showtrail('http://www1.istockphoto.com/file_thumbview_approve/414666/2/istockphoto_414666_lost_bread_1.jpg','Lost Bread 1','Lost Bread','3.0000','0','1',180);"
  2. onmouseout="hidetrail();"

Post January 6th, 2006, 7:55 pm

Thanks for trying to help & replying Impel but this is not what i wanted :( I knew i was not explaining myself correctly .I want an image preview on mouseover.
For example when a link for an image is rolled over eg (preview) the image appears in a small box ,if they like what they see then they can click the link to go to the tutorial i have written.I hope this makes more sense :roll:

Post January 6th, 2006, 8:43 pm

I'm trying to create an image gallery in tables. My table has two columns and several rows. I merged several of the cells in the right column to create one larger cell. My aim was to create a mouseover effect on the thumbnails in the left column, which changes the content of the right (larger) cell to a larger preview of the image.

Is this possible?

Thanks,
Brady
brady@bradymills.com
  • justG
  • Professor
  • Professor
  • User avatar
  • Joined: Feb 14, 2004
  • Posts: 970
  • Loc: LI, NY, US
  • Status: Offline

Post January 6th, 2006, 11:26 pm

Peek, how about something like this?

Brady, you might want to start a new thread for your question, as its response is most likely quite different from that to Peek's question.

Post January 7th, 2006, 2:13 am

I really like the script you posted here. I may rather do something like this on my gallery. I'm having one slight problem though. When I open the page, and scroll over one image, it works...but then when I scroll over the next image, it's the same enlargment as the previous?

Any idea why?

Here's the code starting from the top. I added a comment where the pics start and end in the body...

Code: [ Download ] [ Select ]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="slimsite.css" rel="stylesheet" type="text/css">

<script type="text/javascript" language="JavaScript">
// Init section
  zakroma = "";
  obj_float_div = false;
  active_img_mark = null;
  show_delay = null;
  preloads = new Object;
  gags = new Array;

  window.onerror = function() { return true; }
  window.onload = function(e) { if (document.getElementById && document.createElement) tooltip.define(); }

function run_after_body() {
  document.write('<textarea id="gate_to_clipboard" style="display:none;"></textarea>');
  document.onmousemove = document_onmousemove;
  if (window.onscroll) window.onscroll = hide_div();
  document.write('<div class="float" id="div_200" style="left: -3000px; background: #ffffff;"><img id="img_200" class="border_b" width="200" height="150"></div>');
  setInterval("changer();",333);
  for (var i = 4; i <= 4+7; i += 1) {
   var rnd_200 = i; rnd_200 = (rnd_200 < 10) ? '0' + rnd_200 : rnd_200;
   preloads['loader_'+i] = new Image;
   preloads['loader_'+i].src = zakroma + "/main/200x150/" + rnd_200 + ".gif";
   preloads['loader_'+i].width = 200;
   preloads['loader_'+i].height = 150;
  }
}

function get_obj(id_name) {
  if (document.getElementById) {
   return document.getElementById(id_name);
  } else if (document.all) {
   return document.all[id_name];
  } else {
   return null;
  }
}

function document_onmousemove(e) {

  if ( !obj_float_div ) return;

  var pos_X = 0, pos_Y = 0;
  if ( !e ) e = window.event;
  if ( e ) {
   if ( typeof(e.pageX) == 'number' ) {
     pos_X = e.pageX; pos_Y = e.pageY;
   } else if ( typeof(e.clientX) == 'number' ) {
     pos_X = e.clientX; pos_Y = e.clientY;
     if ( document.body && ( document.body.scrollTop || document.body.scrollLeft ) && !( window.opera || window.debug || navigator.vendor == 'KDE' ) ) {
      pos_X += document.body.scrollLeft; pos_Y += document.body.scrollTop;
     } else if ( document.documentElement && ( document.documentElement.scrollTop || document.documentElement.scrollLeft ) && !( window.opera || window.debug || navigator.vendor == 'KDE' ) ) {
      pos_X += document.documentElement.scrollLeft; pos_Y += document.documentElement.scrollTop;
     }
   }
  }

  var scroll_X = 0, scroll_Y = 0;
  if ( document.body && ( document.body.scrollTop || document.body.scrollLeft ) && !( window.debug || navigator.vendor == 'KDE' ) ) {
   scroll_X = document.body.scrollLeft; scroll_Y = document.body.scrollTop;
  } else if ( document.documentElement && ( document.documentElement.scrollTop || document.documentElement.scrollLeft ) && !( window.debug || navigator.vendor == 'KDE' ) ) {
   scroll_X = document.documentElement.scrollLeft; scroll_Y = document.documentElement.scrollTop;
  }

  var win_size_X = 0, win_size_Y = 0;
  if (window.innerWidth && window.innerHeight) {
   win_size_X = window.innerWidth; win_size_Y = window.innerHeight;
  } else if (document.documentElement && document.documentElement.clientWidth && document.documentElement.clientHeight) {
   win_size_X = document.documentElement.clientWidth; win_size_Y = document.documentElement.clientHeight;
  } else if (document.body && document.body.clientWidth && document.body.clientHeight) {
   win_size_X = document.body.clientWidth; win_size_Y = document.body.clientHeight;
  }

  pos_X += 15; pos_Y += 15;

  if (obj_float_div.offsetWidth && obj_float_div.offsetHeight) {
   if (pos_X - scroll_X + obj_float_div.offsetWidth + 5 > win_size_X) pos_X -= (obj_float_div.offsetWidth + 25);
   if (pos_Y - scroll_Y + obj_float_div.offsetHeight + 5 > win_size_Y) pos_Y -= (obj_float_div.offsetHeight + 20);
  }

  obj_float_div.style.left = pos_X + "px"; obj_float_div.style.top = pos_Y + "px";

}

function show_200(img_src,wp_id,img_w,img_h) {
  if (show_delay) {
   clearTimeout(show_delay); show_delay = null;
  } else {
   obj_float_div = get_obj('div_200');
   show_delay = setTimeout('show_200("' + img_src + '","' + wp_id + '",' + img_w + ',' + img_h+ ');', 400);
   return;
  }
  var img_mark = 'img_wp_id_' + wp_id;
  active_img_mark = img_mark;
  if (preloads[img_mark] && preloads[img_mark].complete) {
   swap_img(img_mark);
  } else {
   var rnd_200 = Math.round(Math.random()*4) + 7;
   swap_img('loader_' + rnd_200);
  }
  if ( ! preloads[img_mark] ) {
   preloads[img_mark] = new Image;
   preloads[img_mark].src = zakroma + img_src;
   preloads[img_mark].width = img_w;
   preloads[img_mark].height = img_h;
   preloads[img_mark].onerror = function() { gag(preloads[img_mark],200); }
  }
  show_div('div_200');
}

function changer() {
  if ( !obj_float_div || !preloads[active_img_mark] || !get_obj('img_200')) return;
  if ( get_obj('img_200').src != preloads[active_img_mark].src && preloads[active_img_mark].complete ) swap_img(active_img_mark);
}

function swap_img(img_mark) {
  var obj_base_img = get_obj('img_200');
  if (!obj_base_img) return;
  obj_base_img.src  = preloads[img_mark].src;
  obj_base_img.width = preloads[img_mark].width;
  obj_base_img.height = preloads[img_mark].height;
}

function show_div(div_mark) {
  if (show_delay) {
   clearTimeout(show_delay); show_delay = null;
  } else {
   obj_float_div = get_obj(div_mark);
   show_delay = setTimeout('show_div("' + div_mark + '");', 400);
   return;
  }
  if ( ! obj_float_div ) return;
  if (obj_float_div.offsetWidth) {
   obj_float_div.style.width = "auto";
   obj_float_div.style.height = "auto";
   if (obj_float_div.offsetWidth > 300) obj_float_div.style.width = "300px";
  }
  document_onmousemove;
  obj_float_div.style.visibility = 'visible';
}

function hide_div() {
  //var rnd_200 = Math.round(Math.random()*4) + 7; swap_img('loader_' + rnd_200);
  clearTimeout(show_delay); show_delay = null;
  if ( ! obj_float_div ) return;
  obj_float_div.style.visibility = 'hidden';
  obj_float_div.style.left = "-3000px";
  obj_float_div = false;
}

function append_to_div(div_mark,doc) {
  var obj_box = get_obj(div_mark);
  if ( obj_box && typeof(obj_box.innerHTML) == 'string' ) obj_box.innerHTML += doc;
}

function gag(object,type) {
  if (gags[object.src]) return;
  if (type == 100) {
   object.src = zakroma + "/main/200x150/gag_100.gif";
   object.height = 75; // äëÿ Opera
   object.style.height = "75px"; // äëÿ Gecko, IE
  } else {
   object.src = zakroma + "/main/200x150/gag_200.gif";
   object.height = 150;
   object.style.height = "150px";
  }
  object.style.display = "block"; // äëÿ Gecko
  gags[object.src] = true;
}
</script>
<script type="text/javascript" language="JavaScript">run_after_body();</script>
<style type="text/css">
.border_b{
  border: 1px solid #000000;
}

.float{
  visibility: hidden;
  position: absolute;
  left: -3000px;
  z-index: 10;
}
</style>



</head>

<body>
<table width="100%" height="75" border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td height="75" width="100%"colspan="2" bgcolor="#000000">
    <div id="header">Slim Louis</div></td>
 </tr>
 </table>
<ul id="navigation">
    <li><a href="index.html">Home</a></li>
    <li><a href="bio.html">Bio</a></li>
    <li><a href="music.html">Music</a></li>
        <li><a href="calendar.html">Calendar</a></li>
    <li><a href="photos.html">Photos</a></li>
    <li><a href="contact.html">Contact</a></li>
    <li><a href="guestbook.html">Guestbook</a></li>
   </ul>

<table width="100%" height="158%" border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td width="67%" height="487" align="right" valign="top" bgcolor="#FFFFFF"><table width="100%" border="0" cellpadding="0">
    <tr valign="middle">
     <td height="47" colspan="4"><div id="header2">Photo Gallery:</div>
      <hr align="center" width="100%" size="1"></td>
    </tr>
    



<!----HERE"S WHERE THE PICS START---->


<tr align="center" valign="middle">
     <td width="21%" height="15%"><div class="tiny"> <img src="photos/thumbnail1.gif" border="0" class="border_b" onMouseOver=show_200("387800079_m2.jpg","71895") onMouseOut=hide_div() onerror=gag(this,100)>
      </div></td>
     <td colspan="3" rowspan="3" bgcolor="#000000"><img src="387800079_m2.jpg" width="170" height="252"></td>
    </tr>
    <tr align="center" valign="middle">
     <td width="21%" height="103"><div class="tiny"> <img src="shlim.jpg" height="100" width="100" border="0" class="border_b" onMouseOver=show_200("shlim.jpg","71895",375,240) onMouseOut=hide_div() onerror=gag(this,100)>
      </div>
      </a></td>
    </tr>
    <tr align="center" valign="middle">
     <td width="21%" height="104"><div class="tiny"> <img src="borcvr.jpg" height="100" width="100" border="0" class="border_b" onMouseOver=show_200("borcvr.jpg","71895",200,200) onMouseOut=hide_div() onerror=gag(this,100)>
      </div>
      </a></td>
    </tr>



<!-----HERE'S WHERE THE PICS END---->



    <tr align="center" valign="middle">
     <td height="15%">&nbsp;</td>
     <td height="15%">&nbsp;</td>
     <td height="15%">&nbsp;</td>
     <td height="15%">&nbsp;</td>
    </tr>
    <tr align="center" valign="middle">
     <td height="15%">&nbsp;</td>
     <td height="15%">&nbsp;</td>
     <td height="15%">&nbsp;</td>
     <td height="15%">&nbsp;</td>
    </tr>
    <tr align="center" valign="middle">
     <td height="15%">&nbsp;</td>
     <td height="15%">&nbsp;</td>
     <td height="15%">&nbsp;</td>
     <td height="15%">&nbsp;</td>
    </tr>
    <tr align="center" valign="middle">
     <td height="15%">&nbsp;</td>
     <td height="15%">&nbsp;</td>
     <td height="15%">&nbsp;</td>
     <td height="15%">&nbsp;</td>
    </tr>
    <tr align="center" valign="middle">
     <td height="15%">&nbsp;</td>
     <td height="15%">&nbsp;</td>
     <td height="15%">&nbsp;</td>
     <td height="15%">&nbsp;</td>
    </tr>
    <tr align="center" valign="middle">
     <td width="21%" height="15%">&nbsp;</td>
     <td width="31%" height="15%">&nbsp;</td>
     <td width="20%" height="15%">&nbsp;</td>
     <td width="28%" height="15%">&nbsp;</td>
    </tr>
   </table>
  </td>
  <td width="25%" align="center" valign="top"><img src="slimmain.gif" width="323" height="480" alt="Slim Louis blues musician and blues bass player in Memphis, Tennessee TN"></td>
 </tr>
 <tr>
  <td height="15" colspan="2" align="right" valign="top" bgcolor="#FFFFFF">
   <div id="copyright"> Copyright &copy; 2006 Slim Louis. Design by <a href="http://www.bradymills.com"target="_blank.html" title="Click here to visit Brady Mills Graphics">Brady
    Mills Graphics</a>. </div></td>
 </tr>
</table>
</body>
</html>
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>Untitled Document</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <link href="slimsite.css" rel="stylesheet" type="text/css">
  8. <script type="text/javascript" language="JavaScript">
  9. // Init section
  10.   zakroma = "";
  11.   obj_float_div = false;
  12.   active_img_mark = null;
  13.   show_delay = null;
  14.   preloads = new Object;
  15.   gags = new Array;
  17.   window.onerror = function() { return true; }
  18.   window.onload = function(e) { if (document.getElementById && document.createElement) tooltip.define(); }
  20. function run_after_body() {
  21.   document.write('<textarea id="gate_to_clipboard" style="display:none;"></textarea>');
  22.   document.onmousemove = document_onmousemove;
  23.   if (window.onscroll) window.onscroll = hide_div();
  24.   document.write('<div class="float" id="div_200" style="left: -3000px; background: #ffffff;"><img id="img_200" class="border_b" width="200" height="150"></div>');
  25.   setInterval("changer();",333);
  26.   for (var i = 4; i <= 4+7; i += 1) {
  27.    var rnd_200 = i; rnd_200 = (rnd_200 < 10) ? '0' + rnd_200 : rnd_200;
  28.    preloads['loader_'+i] = new Image;
  29.    preloads['loader_'+i].src = zakroma + "/main/200x150/" + rnd_200 + ".gif";
  30.    preloads['loader_'+i].width = 200;
  31.    preloads['loader_'+i].height = 150;
  32.   }
  33. }
  35. function get_obj(id_name) {
  36.   if (document.getElementById) {
  37.    return document.getElementById(id_name);
  38.   } else if (document.all) {
  39.    return document.all[id_name];
  40.   } else {
  41.    return null;
  42.   }
  43. }
  45. function document_onmousemove(e) {
  47.   if ( !obj_float_div ) return;
  49.   var pos_X = 0, pos_Y = 0;
  50.   if ( !e ) e = window.event;
  51.   if ( e ) {
  52.    if ( typeof(e.pageX) == 'number' ) {
  53.      pos_X = e.pageX; pos_Y = e.pageY;
  54.    } else if ( typeof(e.clientX) == 'number' ) {
  55.      pos_X = e.clientX; pos_Y = e.clientY;
  56.      if ( document.body && ( document.body.scrollTop || document.body.scrollLeft ) && !( window.opera || window.debug || navigator.vendor == 'KDE' ) ) {
  57.       pos_X += document.body.scrollLeft; pos_Y += document.body.scrollTop;
  58.      } else if ( document.documentElement && ( document.documentElement.scrollTop || document.documentElement.scrollLeft ) && !( window.opera || window.debug || navigator.vendor == 'KDE' ) ) {
  59.       pos_X += document.documentElement.scrollLeft; pos_Y += document.documentElement.scrollTop;
  60.      }
  61.    }
  62.   }
  64.   var scroll_X = 0, scroll_Y = 0;
  65.   if ( document.body && ( document.body.scrollTop || document.body.scrollLeft ) && !( window.debug || navigator.vendor == 'KDE' ) ) {
  66.    scroll_X = document.body.scrollLeft; scroll_Y = document.body.scrollTop;
  67.   } else if ( document.documentElement && ( document.documentElement.scrollTop || document.documentElement.scrollLeft ) && !( window.debug || navigator.vendor == 'KDE' ) ) {
  68.    scroll_X = document.documentElement.scrollLeft; scroll_Y = document.documentElement.scrollTop;
  69.   }
  71.   var win_size_X = 0, win_size_Y = 0;
  72.   if (window.innerWidth && window.innerHeight) {
  73.    win_size_X = window.innerWidth; win_size_Y = window.innerHeight;
  74.   } else if (document.documentElement && document.documentElement.clientWidth && document.documentElement.clientHeight) {
  75.    win_size_X = document.documentElement.clientWidth; win_size_Y = document.documentElement.clientHeight;
  76.   } else if (document.body && document.body.clientWidth && document.body.clientHeight) {
  77.    win_size_X = document.body.clientWidth; win_size_Y = document.body.clientHeight;
  78.   }
  80.   pos_X += 15; pos_Y += 15;
  82.   if (obj_float_div.offsetWidth && obj_float_div.offsetHeight) {
  83.    if (pos_X - scroll_X + obj_float_div.offsetWidth + 5 > win_size_X) pos_X -= (obj_float_div.offsetWidth + 25);
  84.    if (pos_Y - scroll_Y + obj_float_div.offsetHeight + 5 > win_size_Y) pos_Y -= (obj_float_div.offsetHeight + 20);
  85.   }
  87.   obj_float_div.style.left = pos_X + "px"; obj_float_div.style.top = pos_Y + "px";
  89. }
  91. function show_200(img_src,wp_id,img_w,img_h) {
  92.   if (show_delay) {
  93.    clearTimeout(show_delay); show_delay = null;
  94.   } else {
  95.    obj_float_div = get_obj('div_200');
  96.    show_delay = setTimeout('show_200("' + img_src + '","' + wp_id + '",' + img_w + ',' + img_h+ ');', 400);
  97.    return;
  98.   }
  99.   var img_mark = 'img_wp_id_' + wp_id;
  100.   active_img_mark = img_mark;
  101.   if (preloads[img_mark] && preloads[img_mark].complete) {
  102.    swap_img(img_mark);
  103.   } else {
  104.    var rnd_200 = Math.round(Math.random()*4) + 7;
  105.    swap_img('loader_' + rnd_200);
  106.   }
  107.   if ( ! preloads[img_mark] ) {
  108.    preloads[img_mark] = new Image;
  109.    preloads[img_mark].src = zakroma + img_src;
  110.    preloads[img_mark].width = img_w;
  111.    preloads[img_mark].height = img_h;
  112.    preloads[img_mark].onerror = function() { gag(preloads[img_mark],200); }
  113.   }
  114.   show_div('div_200');
  115. }
  117. function changer() {
  118.   if ( !obj_float_div || !preloads[active_img_mark] || !get_obj('img_200')) return;
  119.   if ( get_obj('img_200').src != preloads[active_img_mark].src && preloads[active_img_mark].complete ) swap_img(active_img_mark);
  120. }
  122. function swap_img(img_mark) {
  123.   var obj_base_img = get_obj('img_200');
  124.   if (!obj_base_img) return;
  125.   obj_base_img.src  = preloads[img_mark].src;
  126.   obj_base_img.width = preloads[img_mark].width;
  127.   obj_base_img.height = preloads[img_mark].height;
  128. }
  130. function show_div(div_mark) {
  131.   if (show_delay) {
  132.    clearTimeout(show_delay); show_delay = null;
  133.   } else {
  134.    obj_float_div = get_obj(div_mark);
  135.    show_delay = setTimeout('show_div("' + div_mark + '");', 400);
  136.    return;
  137.   }
  138.   if ( ! obj_float_div ) return;
  139.   if (obj_float_div.offsetWidth) {
  140.    obj_float_div.style.width = "auto";
  141.    obj_float_div.style.height = "auto";
  142.    if (obj_float_div.offsetWidth > 300) obj_float_div.style.width = "300px";
  143.   }
  144.   document_onmousemove;
  145.   obj_float_div.style.visibility = 'visible';
  146. }
  148. function hide_div() {
  149.   //var rnd_200 = Math.round(Math.random()*4) + 7; swap_img('loader_' + rnd_200);
  150.   clearTimeout(show_delay); show_delay = null;
  151.   if ( ! obj_float_div ) return;
  152.   obj_float_div.style.visibility = 'hidden';
  153.   obj_float_div.style.left = "-3000px";
  154.   obj_float_div = false;
  155. }
  157. function append_to_div(div_mark,doc) {
  158.   var obj_box = get_obj(div_mark);
  159.   if ( obj_box && typeof(obj_box.innerHTML) == 'string' ) obj_box.innerHTML += doc;
  160. }
  162. function gag(object,type) {
  163.   if (gags[object.src]) return;
  164.   if (type == 100) {
  165.    object.src = zakroma + "/main/200x150/gag_100.gif";
  166.    object.height = 75; // äëÿ Opera
  167.    object.style.height = "75px"; // äëÿ Gecko, IE
  168.   } else {
  169.    object.src = zakroma + "/main/200x150/gag_200.gif";
  170.    object.height = 150;
  171.    object.style.height = "150px";
  172.   }
  173.   object.style.display = "block"; // äëÿ Gecko
  174.   gags[object.src] = true;
  175. }
  176. </script>
  177. <script type="text/javascript" language="JavaScript">run_after_body();</script>
  178. <style type="text/css">
  179. .border_b{
  180.   border: 1px solid #000000;
  181. }
  183. .float{
  184.   visibility: hidden;
  185.   position: absolute;
  186.   left: -3000px;
  187.   z-index: 10;
  188. }
  189. </style>
  193. </head>
  195. <body>
  196. <table width="100%" height="75" border="0" cellpadding="0" cellspacing="0">
  197.  <tr>
  198.   <td height="75" width="100%"colspan="2" bgcolor="#000000">
  199.     <div id="header">Slim Louis</div></td>
  200.  </tr>
  201.  </table>
  202. <ul id="navigation">
  203.     <li><a href="index.html">Home</a></li>
  204.     <li><a href="bio.html">Bio</a></li>
  205.     <li><a href="music.html">Music</a></li>
  206.         <li><a href="calendar.html">Calendar</a></li>
  207.     <li><a href="photos.html">Photos</a></li>
  208.     <li><a href="contact.html">Contact</a></li>
  209.     <li><a href="guestbook.html">Guestbook</a></li>
  210.    </ul>
  212. <table width="100%" height="158%" border="0" cellpadding="0" cellspacing="0">
  213.  <tr>
  214.   <td width="67%" height="487" align="right" valign="top" bgcolor="#FFFFFF"><table width="100%" border="0" cellpadding="0">
  215.     <tr valign="middle">
  216.      <td height="47" colspan="4"><div id="header2">Photo Gallery:</div>
  217.       <hr align="center" width="100%" size="1"></td>
  218.     </tr>
  219.     
  223. <!----HERE"S WHERE THE PICS START---->
  226. <tr align="center" valign="middle">
  227.      <td width="21%" height="15%"><div class="tiny"> <img src="photos/thumbnail1.gif" border="0" class="border_b" onMouseOver=show_200("387800079_m2.jpg","71895") onMouseOut=hide_div() onerror=gag(this,100)>
  228.       </div></td>
  229.      <td colspan="3" rowspan="3" bgcolor="#000000"><img src="387800079_m2.jpg" width="170" height="252"></td>
  230.     </tr>
  231.     <tr align="center" valign="middle">
  232.      <td width="21%" height="103"><div class="tiny"> <img src="shlim.jpg" height="100" width="100" border="0" class="border_b" onMouseOver=show_200("shlim.jpg","71895",375,240) onMouseOut=hide_div() onerror=gag(this,100)>
  233.       </div>
  234.       </a></td>
  235.     </tr>
  236.     <tr align="center" valign="middle">
  237.      <td width="21%" height="104"><div class="tiny"> <img src="borcvr.jpg" height="100" width="100" border="0" class="border_b" onMouseOver=show_200("borcvr.jpg","71895",200,200) onMouseOut=hide_div() onerror=gag(this,100)>
  238.       </div>
  239.       </a></td>
  240.     </tr>
  244. <!-----HERE'S WHERE THE PICS END---->
  248.     <tr align="center" valign="middle">
  249.      <td height="15%">&nbsp;</td>
  250.      <td height="15%">&nbsp;</td>
  251.      <td height="15%">&nbsp;</td>
  252.      <td height="15%">&nbsp;</td>
  253.     </tr>
  254.     <tr align="center" valign="middle">
  255.      <td height="15%">&nbsp;</td>
  256.      <td height="15%">&nbsp;</td>
  257.      <td height="15%">&nbsp;</td>
  258.      <td height="15%">&nbsp;</td>
  259.     </tr>
  260.     <tr align="center" valign="middle">
  261.      <td height="15%">&nbsp;</td>
  262.      <td height="15%">&nbsp;</td>
  263.      <td height="15%">&nbsp;</td>
  264.      <td height="15%">&nbsp;</td>
  265.     </tr>
  266.     <tr align="center" valign="middle">
  267.      <td height="15%">&nbsp;</td>
  268.      <td height="15%">&nbsp;</td>
  269.      <td height="15%">&nbsp;</td>
  270.      <td height="15%">&nbsp;</td>
  271.     </tr>
  272.     <tr align="center" valign="middle">
  273.      <td height="15%">&nbsp;</td>
  274.      <td height="15%">&nbsp;</td>
  275.      <td height="15%">&nbsp;</td>
  276.      <td height="15%">&nbsp;</td>
  277.     </tr>
  278.     <tr align="center" valign="middle">
  279.      <td width="21%" height="15%">&nbsp;</td>
  280.      <td width="31%" height="15%">&nbsp;</td>
  281.      <td width="20%" height="15%">&nbsp;</td>
  282.      <td width="28%" height="15%">&nbsp;</td>
  283.     </tr>
  284.    </table>
  285.   </td>
  286.   <td width="25%" align="center" valign="top"><img src="slimmain.gif" width="323" height="480" alt="Slim Louis blues musician and blues bass player in Memphis, Tennessee TN"></td>
  287.  </tr>
  288.  <tr>
  289.   <td height="15" colspan="2" align="right" valign="top" bgcolor="#FFFFFF">
  290.    <div id="copyright"> Copyright &copy; 2006 Slim Louis. Design by <a href="http://www.bradymills.com"target="_blank.html" title="Click here to visit Brady Mills Graphics">Brady
  291.     Mills Graphics</a>. </div></td>
  292.  </tr>
  293. </table>
  294. </body>
  295. </html>

Post January 7th, 2006, 7:25 pm

Just G That script is ok ,seems like an aweful lot of it LOL .Thanks for your help ,i do appreciate it.Is there a smaller script out there.?Am i just being picky :oops:
  • justG
  • Professor
  • Professor
  • User avatar
  • Joined: Feb 14, 2004
  • Posts: 970
  • Loc: LI, NY, US
  • Status: Offline

Post January 8th, 2006, 4:50 am

I don't know, Peek, I just did a Google search for ya. You can try it yourself and see what you can find. I believe I used the keywords "mouseover image preview," without the quotes. Good luck!

- Gita
  • Buts
  • Born
  • Born
  • No Avatar
  • Joined: Nov 14, 2006
  • Posts: 1
  • Status: Offline

Post November 14th, 2006, 3:08 am

I know this thread hasn't been active for almost a year now, and you probably already fixed your problem, but i figure a reply can still be helpful to people who arrive at this topic as a result of using a search engine.

I think the problem lies in the use of the same number (71895) three times. I encountered some issues that resembled yours, but all were solved when I made sure no image preview got the same number.

I think this will also solve the problem stated above. It's a shame this kind of sample code does not come with proper documentation or at least some commentary. :)

Good luck!
  • jayman76
  • Born
  • Born
  • No Avatar
  • Joined: Jul 08, 2007
  • Posts: 1
  • Status: Offline

Post July 8th, 2007, 9:33 am

Hi, this post helped me get this javascript going, thanks!

There is one slight problem that I can't seem to get around. On the istockphoto.com site the showtrail images stay within the visible window. If you click on the image at the bottom the showtrail image appears in the upper section of the window and no scrolling is required. I have the javascript and css and the showtail images appear partly off the visible window so you need to scroll the to see the full image.

What am I missing?

Thanks again!

Page 1 of 1

Post Information

  • Total Posts in this topic: 10 posts
  • Users browsing this forum: No registered users and 87 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© Unmelted Enterprises 1998-2009. Driven by phpBB © 2001-2009 phpBB Group.