Preview window for little images

Question

veledrom 32 Master Poster

14 Years Ago

Hi,

I want to create quick preview window for images listed in my website. For example: if you go to this site http://www.templatemonster.com there are little images on the right end side. When mouse over on any image, a bit preview window opens. I want something like this. How can i do it?

Thanks

javascript

4 Contributors
5 Replies
131 Views
1 Week Discussion Span
Latest Post 14 Years Ago Latest Post by essential

All 5 Replies

essential 84 Posting Shark

14 Years Ago

I havent finished it yet, but you'll have to tell me if it does what you exactly needed.

Here's my work over this deal:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#css21" media="screen"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Window-target" content="_top" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Free Live Help!</title>
<style type="text/css" media="screen">
/* <![CDATA[ */

/* ]]> */
</style> 
<script type="text/javascript">
// <![CDATA[
var ie = Boolean((( !!document.all === true && !!!document.getElementById ) ? 1 : 0 ))
window.onload = ( function() {
  var xDiv = document.createElement( "div" );
  var xImage = (( ie ) ? document.all.tags( "img" ) : document.getElementsByTagName("img") );
   var divX = (( ie ) ? document.all.main : document.getElementById("main") );
   for ( var i = 0; i < xImage.length; ++i ) {
   xImage[ i ].onmouseover = ( function( e ) {
     var xImg = new Image();
   xImg.src = this.src;     
     var xHeight = (( this.height ) ? this.height : this.clientHeight );
      var xWidth = (( this.width ) ? this.width : this.clientWidth );
      var posY = 0;
      var posX = 0;
      var e = (( e ) ? e : window.event );
      if ( e.pageX ) {
         posY = e.pageY;
         posX = e.pageX;
      } else if ( e.clientX ) {
         var db = document.body;
         var dde = document.documentElement;
         posY = e.clientY + (( db.scrollTop ) ? db.scrollTop : db.scrollHeight ) + dde.scrollTop;
         posX = e.clientX + (( db.scrollLeft ) ? db.scrollLeft : db.scrollWidth ) + dde.scrollLeft; 
      } xImg.width = xWidth;
        xImg.height = xHeight;
        xImg.setAttribute( "style", "display : block; margin : 0 auto; border : none" )
      var xStyle = ( function( xElem, xProp, xValue ) {
         var xRule;
         if ( typeof( xElem ) === "object" ) {
            xElem.style[ xProp ] = xValue;
         } return;
      } );
      var styleX = {
      height : xHeight  + "px" ,
      width : (( xWidth ) * 2 ) + "px",
      border : "1px solid #ccc",
      backgroundColor : "#f0ffff",
      position : "absolute",
      "left" : posX + xWidth
      }; this.onmouseout = ( function() {
         xDiv.removeChild( xImg );
         divX.removeChild( xDiv );
      } ); 
      for ( rule in styleX ) {
         xStyle( xDiv, rule, styleX[ rule ] );
      } delete rule;
   xDiv.appendChild( xImg );
   divX.insertBefore( xDiv, this );
   } );
   }
} );
// ]]>
</script>
</head>
<body>
<div id="main"><img src="./image.jpg" id="img0" alt="mini window" /><br /><br />
<img src="./yourImage.jpg" id="img1" alt="mini window" />
</div>

</body>
</html>

i've based the height and width of the created div on the actual size of the image that is being hoverd.

jarn 0 Newbie Poster

14 Years Ago

Hi,
I want to create quick preview window for images listed in my website. For example: if you go to this site http://www.templatemonster.com there are little images on the right end side. When mouse over on any image, a bit preview window opens. I want something like this. How can i do it?
Thanks

look up overlib from
http://www.bosrup.com/web/overlib/

within the mouseover popup you can embed an image tag pointing to your image.

something like:
<img src="http://yourDomain.com/yourImage.jpg">

Good luck

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

veledrom 32 Master Poster · Answer 1 · 2009-07-24T15:59:36+00:00

veledrom 32 Master Poster

14 Years Ago

super jarn

Troy III 272 Posting Pro · Answer 2 · 2009-07-28T20:40:30+00:00

I havent finished it yet, but you'll have to tell me if it does what you exactly needed.

Here's my work over this deal:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#css21" media="screen"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Window-target" content="_top" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Free Live Help!</title>
<style type="text/css" media="screen">
/* <![CDATA[ */

/* ]]> */
</style> 
<script type="text/javascript">
// <![CDATA[
var ie = Boolean((( !!document.all === true && !!!document.getElementById ) ? 1 : 0 ))
window.onload = ( function() {
  var xDiv = document.createElement( "div" );
  var xImage = (( ie ) ? document.all.tags( "img" ) : document.getElementsByTagName("img") );
   var divX = (( ie ) ? document.all.main : document.getElementById("main") );
   for ( var i = 0; i < xImage.length; ++i ) {
   xImage[ i ].onmouseover = ( function( e ) {
     var xImg = new Image();
   xImg.src = this.src;     
     var xHeight = (( this.height ) ? this.height : this.clientHeight );
      var xWidth = (( this.width ) ? this.width : this.clientWidth );
      var posY = 0;
      var posX = 0;
      var e = (( e ) ? e : window.event );
      if ( e.pageX ) {
         posY = e.pageY;
         posX = e.pageX;
      } else if ( e.clientX ) {
         var db = document.body;
         var dde = document.documentElement;
         posY = e.clientY + (( db.scrollTop ) ? db.scrollTop : db.scrollHeight ) + dde.scrollTop;
         posX = e.clientX + (( db.scrollLeft ) ? db.scrollLeft : db.scrollWidth ) + dde.scrollLeft; 
      } xImg.width = xWidth;
        xImg.height = xHeight;
        xImg.setAttribute( "style", "display : block; margin : 0 auto; border : none" )
      var xStyle = ( function( xElem, xProp, xValue ) {
         var xRule;
         if ( typeof( xElem ) === "object" ) {
            xElem.style[ xProp ] = xValue;
         } return;
      } );
      var styleX = {
      height : xHeight  + "px" ,
      width : (( xWidth ) * 2 ) + "px",
      border : "1px solid #ccc",
      backgroundColor : "#f0ffff",
      position : "absolute",
      "left" : posX + xWidth
      }; this.onmouseout = ( function() {
         xDiv.removeChild( xImg );
         divX.removeChild( xDiv );
      } ); 
      for ( rule in styleX ) {
         xStyle( xDiv, rule, styleX[ rule ] );
      } delete rule;
   xDiv.appendChild( xImg );
   divX.insertBefore( xDiv, this );
   } );
   }
} );
// ]]>
</script>
</head>
<body>
<div id="main"><img src="./image.jpg" id="img0" alt="mini window" /><br /><br />
<img src="./yourImage.jpg" id="img1" alt="mini window" />
</div>

</body>
</html>

i've based the height and width of the created div on the actual size of the image that is being hoverd.

I don't undersatand why are you checking for "document.all"
nor why are you using this kind of dubious code to get the image collection "document.getElementsByTagName("img") " etc when you can cut the (artificially imposed incompativility) crap from this:

window.onload = ( function() {
  var xDiv = document.createElement( "div" );
  var xImage = (( ie ) ? document.all.tags( "img" ) : document.getElementsByTagName("img") );  
 var divX = (( ie ) ? document.all.main : document.getElementById("main") );
   for ( var i = 0; i < xImage.length; ++i ) {

and go strait to this:

window.onload = ( function() {
  var xDiv = document.createElement( "div" );
  var xImage = document.images;
   var divX = main || document.getElementById("main");
   for ( var i = 0; i < xImage.length; ++i ) {

essential 84 Posting Shark Featured Poster · Answer 3 · 2009-07-28T21:40:28+00:00

Hey troyXXX,

so if you are saying that it was a piece of crap, then why bother wasting your thinking about those line? We have different ways on how we declare our own statements. If you think you have a better code, then fine--you are free to post it...

You sounds' more like a girl to me, talking things that is irrelevant on their own issues... What are you trying prove here? That you had a better code? ( then who cares )!? Try to read more articles, LOUDMOUTH...

Preview window for little images

Recommended Answers Collapse Answers

All 5 Replies

Recommended Answers