Improve company productivity with a Business Account.Sign Up

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 522
  • Last Modified:

Preview image javascript...

hey all, i'm looking for a javascript that can preview images like show on or I want to mouseover and then see a larger image. Thanx all.

1 Solution
You can do this without javascript if you want, check out this site for examples using css.
Pravin AsarPrincipal Systems EngineerCommented:
Here is a

<img src="img1.gif" width="100" onmouseover="this.width=400;" onmouseout="this.width="100">
engineroomAuthor Commented:
which one sodalitas? Thanx
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

engineroomAuthor Commented:
Thanx. Have you see the examples i provided? I like the way the images are never off screen, even if you scroll or make your browser short. Any ideas?
engineroomAuthor Commented:
any more guys? Anyone else?
Hi engineroom,

The examples you provided use a script from here:

It is implemented on like this ... HTML:

<IMG SRC="" border=0  border=1 style="border-color: 777777"             
   onmouseover="showtrail(' ','Template 13414',430,419)"

Peace and joy.  mvan


Simple Image Trail script- By
Visit for this script and more
This notice must stay intact

var offsetfrommouse=[15,25]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration=0; //duration in seconds image should remain visible. 0 for always.

var defaultimageheight = 40;      // maximum image size.
var defaultimagewidth = 40;      // maximum image size.

var timer;

function gettrailobj(){
if (document.getElementById)
return document.getElementById("preview_div").style

function gettrailobjnostyle(){
if (document.getElementById)
return document.getElementById("preview_div")

function truebody(){
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body

function hidetrail(){      
      gettrailobj().display= "none";

function showtrail(imagename,title,width,height){
      i = imagename
      t = title
      w = width
      h = height
      timer = setTimeout("show('"+i+"',t,w,h);",200);
function show(imagename,title,width,height){
    var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth - offsetfrommouse[0]
      var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight)

      if( (navigator.userAgent.indexOf("Konqueror")==-1  || navigator.userAgent.indexOf("Firefox")!=-1 || (navigator.userAgent.indexOf("Opera")==-1 && navigator.appVersion.indexOf("MSIE")!=-1)) && (docwidth>650 && docheight>500)) {
            ( width == 0 ) ? width = defaultimagewidth: '';
            ( height == 0 ) ? height = defaultimageheight: '';
            defaultimageheight = height
            defaultimagewidth = width

            newHTML = '<div class="border_preview" style="width:'+  width +'px;height:'+ height +'px"><div id="loader_container"><div id="loader"><div align="center">Loading template preview...</div><div id="loader_bg"><div id="progress"> </div></div></div></div>';
            newHTML = newHTML + '<h2 class="title_h2">' + ' '+title + '</h2>'
          newHTML = newHTML + '<div class="preview_temp_load"><img onload="javascript:remove_loading();" src="' + imagename + '" border="0"></div>';
            newHTML = newHTML + '</div>';
            if(navigator.userAgent.indexOf("MSIE")!=-1 && navigator.userAgent.indexOf("Opera")==-1 ){
                  newHTML = newHTML+'<iframe src="about:blank" scrolling="no" frameborder="0" width="'+width+'" height="'+height+'"></iframe>';

            gettrailobjnostyle().innerHTML = newHTML;

function followmouse(e){

      var xcoord=offsetfrommouse[0]
      var ycoord=offsetfrommouse[1]

      var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
      var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight)

      if (typeof e != "undefined"){
            if (docwidth - e.pageX < defaultimagewidth + 2*offsetfrommouse[0]){
                  xcoord = e.pageX - xcoord - defaultimagewidth; // Move to the left side of the cursor
            } else {
                  xcoord += e.pageX;
            if (docheight - e.pageY < defaultimageheight + 2*offsetfrommouse[1]){
                  ycoord += e.pageY - Math.max(0,(2*offsetfrommouse[1] + defaultimageheight + e.pageY - docheight - truebody().scrollTop));
            } else {
                  ycoord += e.pageY;

      } else if (typeof window.event != "undefined"){
            if (docwidth - event.clientX < defaultimagewidth + 2*offsetfrommouse[0]){
                  xcoord = event.clientX + truebody().scrollLeft - xcoord - defaultimagewidth; // Move to the left side of the cursor
            } else {
                  xcoord += truebody().scrollLeft+event.clientX
            if (docheight - event.clientY < (defaultimageheight + 2*offsetfrommouse[1])){
                  ycoord += event.clientY + truebody().scrollTop - Math.max(0,(2*offsetfrommouse[1] + defaultimageheight + event.clientY - docheight));
            } else {
                  ycoord += truebody().scrollTop + event.clientY;

engineroomAuthor Commented:
Let me give that a shot and see what happens. Thanx!
engineroomAuthor Commented:
i haven't forgotten, i haven't gotten to this yet, but i will thanx again!
engineroomAuthor Commented:
sorry i let this go. I don't like doing that. Thanx again everyone
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now