Solved

Preview image javascript...

Posted on 2006-11-09
11
478 Views
Last Modified: 2012-05-05
hey all, i'm looking for a javascript that can preview images like show on photos.com or monstertemplates.com. I want to mouseover and then see a larger image. Thanx all.

er
0
Comment
Question by:engineroom
11 Comments
 
LVL 6

Expert Comment

by:sodalitas
ID: 17908050
You can do this without javascript if you want, check out this site for examples using css.

http://www.cssplay.co.uk/menu/index.html
0
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 17908068
Here is a

<img src="img1.gif" width="100" onmouseover="this.width=400;" onmouseout="this.width="100">
0
 
LVL 3

Author Comment

by:engineroom
ID: 17908493
which one sodalitas? Thanx
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

 
LVL 6

Expert Comment

by:sodalitas
ID: 17908988
0
 
LVL 3

Author Comment

by:engineroom
ID: 17909118
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?
0
 
LVL 3

Author Comment

by:engineroom
ID: 18102349
any more guys? Anyone else?
0
 
LVL 11

Accepted Solution

by:
mvan01 earned 500 total points
ID: 18221495
Hi engineroom,

The examples you provided use a script from here:

http://www.javascriptkit.com/script/script2/simpleimagetrail.shtml

It is implemented on monstertemplates.com like this ... HTML:

<IMG SRC="http://images.templatemonster.com/screenshots/13400/13414-m.jpg" border=0  border=1 style="border-color: 777777"             
   onmouseover="showtrail('http://images.templatemonster.com/screenshots/13400/13414-bswi.jpg ','Template 13414',430,419)"
   onmouseout="hidetrail()">

Peace and joy.  mvan

JavaScript:

/*
Simple Image Trail script- By JavaScriptKit.com
Visit http://www.javascriptkit.com 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";
      document.onmousemove=""
      gettrailobj().left="-500px"
      clearTimeout(timer);
}

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: '';
                  
            width+=30
            height+=55
            defaultimageheight = height
            defaultimagewidth = width
      
            document.onmousemove=followmouse;

            
            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;
            gettrailobj().display="block";
      }
}

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;
            }
      }
      gettrailobj().left=xcoord+"px"
      gettrailobj().top=ycoord+"px"

}
0
 
LVL 3

Author Comment

by:engineroom
ID: 18228142
Let me give that a shot and see what happens. Thanx!
0
 
LVL 3

Author Comment

by:engineroom
ID: 18252642
i haven't forgotten, i haven't gotten to this yet, but i will thanx again!
0
 
LVL 3

Author Comment

by:engineroom
ID: 18517631
sorry i let this go. I don't like doing that. Thanx again everyone
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question