<?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>
<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" />
<title>Free Live Help!</title>
<style id="css21" type="text/css" media="screen">
/* <![CDATA[ */
html, body {
color : #405060;
font : normal normal normal 95%/1.5 Verdana, Tahoma, Arial, san-serif;
height : auto;
margin : 0;
padding : 0;
text-align : center;
width : auto; }
body {
background-color : #E0E0E0; }
div {
border : none;
margin : 0;
padding : 0; }
div#main {
margin : 0 auto;
width : 100%; }
div#header {
background-color : #fff;
min-height : 250px;
width : 100%;
clear : both; }
div#lpanel {
background-color : transparent;
float : left;
min-height : 250px;
width : 60%;
clear : left; }
table {
border : none;
border-collapse: collapse;
margin : 0;
height : inherit;
padding : 0; }
td { padding : 0; width : auto; height : inherit; }
div#gscreen {
background-color : #373823;
float : none;
height : 250px;
width : 100%;
clear : both; }
div#gdesc {
background-color : transparent;
margin : 0 auto;
float : none;
width : 80%;
clear : both; }
div#rpanel {
background-color : #f0f0f0;
float : right;
min-height : 250px;
width : 40%;
clear : right; }
div#footer {
border-top : 2px solid #ccc;
background-color : #F0F0F0;
min-height : 100px;
width : 100%;
clear : both; }
div#gallery {
padding : .300em; }
div#gallery img {
display : block;
border : 2px solid #aaa;
vertical-align : middle;
width : 100px; }
div#content {
padding : 2%; }
div.bordered { border : 2px solid #aaa; }
p { color : #495969; }
/* ]]> */
</style>
<script type="text/javascript">
/* <![CDATA[ */
/*******************************
- Mini Photo Studio v1.0
********************************
- This notice must remain intact for use :
********************************
~ Developed By DaniWeb USER : essential
~ http://www.daniweb.com/forums/member383844.html
----------------------------------------
*******************************/
var imageGallery = ( function() {
// Specify the content description for the image in any order of your choice:
// Content Description for image1
var imgDesc0 = "Content decscription for image1. - Content sample filler -"
// Content Description for image2
var imgDesc1 = "Content decscription for image2. - Content sample filler -"
// Content Description for image3
var imgDesc2 = "Content decscription for image3. - Content sample filler -"
// Content Description for image4
var imgDesc3 = "Content decscription for image4. - Content sample filler -"
var isImageDescription = {
0 : imgDesc0,
1 : imgDesc1,
2 : imgDesc2,
3 : imgDesc3 };
var xelem = ( function( xTag ) {
var ua = ((( ie = document.all.tags( xTag )) && !!!( ff = document.getElementsByTagName( xTag ))) ? 1 : 0 );
var xObj = null || { 0 : ff, 1 : ie }[ ua ];
return xObj;
} );
return function imageGallery( tagX ) {
var xItem = xelem("div");
var xDesc = xItem["gdesc"];
var xScreen = xItem["gscreen"];
var xImg = xelem( tagX );
var iLen = xImg.length;
for ( i = 0; !!( xImg[ i ] ); i++ ) {
xImg[ i ].onmouseover = function() {
var xIndex = Number( this.id.match(/\d+/)[ 0 ] );
xDesc.innerHTML = isImageDescription[ xIndex ];
xScreen.style.background = " #373832 url(" + this.src + ") no-repeat center center";
this.onmouseout = function() {
xScreen.style.background = "#373832";
}
}
}
}
} )();
onload = function() {
imageGallery("img")
}
/* ]]> */
</script>
</head>
<body>
<div id="main">
<div id="content">
<div class="bordered">
<div id="header">
<div id="lpanel">
<table frame="void" rules="none" width="100%">
<tr><td><div id="gscreen"></div></td></tr></table>
</div>
<div id="rpanel"><table frame="void" rules="none" width="100%" style="height:250px">
<tr><td style="height:250px"><div id="gdesc"></div></td></tr></table></div>
</div>
<div id="footer">
<div id="gallery">
<table id="myGallery" width="100%" frame="void" rules="none" >
<tr>
<td><img id="i0" src="image1.jpg" height="100" alt="test images" /></td>
<td><img id="i1" src="image2.jpg" height="100" alt="test images" /></td>
<td><img id="i2" src="image3.jpg" height="100" alt="test images" /></td>
<td><img id="i3" src="image4.jpg" height="100" alt="test images" /></td></tr>
</table>
</div></div>
</div>
</div>
</div>
</body>
</html>