Member Avatar for TheAlex

I'm trying to create an image gallery/menu with text info. I used CSS to create a gallery so that when you roll over one of the thumbnails, a larger image and new text displays above (basically by changing the content from 1px wide and high, so it's 'invisible', to 479px wide/180px high to fit in the box). That is fine, but once you move off the thumbnail, obviously the large image & text doesn't stay. I don't mind this for the 5ish% of people who have JavaScript disabled.

I'm trying to use JavaScript onmouseover to change the CSS and make the large image & new text stay - this works initially, but then when you go back to roll over another thumbnail, the onmouseover fails to work for a second time. I'm sure there must be an easy fix for this somewhere out there? I am a JavaScript beginner.

It will become clear when you see the link:
http://www.btinternet.com/~himh/piclink/

The JavaScript code is within the anchor tag to change the styling of the span:

<a class="gallery imagea" href="" onmouseover="document.getElementById('storya').style.position = 'absolute'; document.getElementById('storya').style.width = '479px'; document.getElementById('storya').style.height = '180px'; document.getElementById('storya').style.top = '10px'; document.getElementById('storya').style.left = '10px'; document.getElementById('storya').style.color = '#333333'; document.getElementById('storya').style.background = '#ffffff';">
            <span id="storya">
              <img src="dyn_graphics/feat/armour_vehicles.jpg" alt="" />
              <br />
              <div class="headline">Down the road, that's where I'll always be</div>
              <br />
              Every stop I make, I make a new friend. Can't stay for long, just turn around and I'm gone again. Maybe tomorrow, I'll want to settle down, Until tomorrow, I'll just keep moving on.
            </span>
            </a>

Thanks for any help. :)

  • 2 Contributors
  • 3 Replies
  • 213 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by TheAlex
Member Avatar for essential

Hi Alex,

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

-essential

Member Avatar for essential

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

Member Avatar for TheAlex

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.

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.