2
Contributors
3
Replies
4
Views
7 Years
Discussion Span
Last Post by TheAlex
0

Hi Alex,

this may take some time, we will just post back when we get your solution...

-essential

1

Here's a complete document sample:

<?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>

hope it does helped...
-essential

0

Oh, thanks! I didn't really want someone to go to so much effort as I thought there would be something simple to make the onmouseover in my original code work all the time.

The problem with using JavaScript only is I still want the rollover to appear for people who have JavaScript disabled and would prefer the thumbnails to be separate files for loading issues (I might have some bigger galleries). Also, in the code you have provided, the text remains after I've rolled over the thumbnail, but the images don't. I've tested in Chrome and IE7.

Thanks again for your help though.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.