Solved

Preview image javascript...

Posted on 2006-11-09
11
469 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
 
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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

747 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now