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
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.
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
super jarn
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 ) {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...
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.