Image previewer

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
hame22
Forum Contributor
Posts: 214
Joined: Wed May 11, 2005 5:50 am

Image previewer

Post by hame22 »

Hi

I have a directory of images from which a user can select an image to display with a piece of content.

At the moment the user can preview the image by opening it in a new browser window. However what I would like to do is when the user moves their mouse over the link to the image the image previews next to it.

Does anyone have any ideas how to achieve this?

Thanks in advance
mickd
Forum Contributor
Posts: 397
Joined: Tue Jun 21, 2005 9:05 am
Location: Australia

Post by mickd »

What you would need to use is javascript and the onmouseover and onmouseout attibutes tags of the hyperlink.

This example doesn't exactly show you how to do what you want, but gives you an idea how they would do something similar in javascript. A slight modification of what you are changing onmouseover and onmouseout, and it should do it.
User avatar
dibyendrah
Forum Contributor
Posts: 491
Joined: Wed Oct 19, 2005 5:14 am
Location: Nepal
Contact:

Post by dibyendrah »

You have to add onMouseOver() event on that html element which you using. On each mouseover, that event will be executed. You can create a javascript function which will get called on each mouseover event.


Sample script :

Code: Select all

<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>

Code: Select all

<style type="text/css">
.border_b{
   border: 1px solid #000000;
}

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

Code: Select all

</head>
<body>
<div class="tiny" style="margin-left: 20px; OVERFLOW: hidden; width: 120px" width="120">
<a href="#" target="_blank">
<img class="border_b" src="cosmos.jpg" width="100" height="87" border="0" onMouseOver=show_200("cosmos.jpg","71895",200,150) onMouseOut=hide_div() onerror=gag(this,100)></a>
</div>

User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post by pickle »

Moved to Client Side.


while ~dibyendrah's code looks impressive, it could be as simple as:

Code: Select all

<a href = "#" onmouseover="subImage('image1.jpg');">Image 1</a><br />
<a href = "#" onmouseover="subImage('image2.jpg');">Image 2</a><br />
<a href = "#" onmouseover="subImage('image3.jpg');">Image 3</a><br />
<img src = "image0.jpg" id = "imageToSwap" />

Code: Select all

function subImage(imgName)
{
   document.getElementById('imageToSwap').src = imgName;
}
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Post Reply