AJAX

JavaScript onmouseover image gallery

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Feb 2005

Posts: 51

Reputation: TheAlex is an unknown quantity at this point

Solved Threads: 1

TheAlex

Offline

Junior Poster in Training

JavaScript onmouseover image gallery

Jul 28th, 2009

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:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<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>
<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.

www.last.fm/music/The+Cakes
One day to go!

www.holeinmyhead.co.uk
Gig & travel photos, writing, artwork & other stuff...

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: JavaScript onmouseover image gallery

Jul 29th, 2009

Hi Alex,

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

-essential

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: JavaScript onmouseover image gallery

Jul 29th, 2009

Here's a complete document sample:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<?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>
<?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

•

Join Date: Feb 2005

Posts: 51

Reputation: TheAlex is an unknown quantity at this point

Solved Threads: 1

TheAlex

Offline

Junior Poster in Training

Re: JavaScript onmouseover image gallery

Jul 31st, 2009

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.

Last edited by TheAlex; Jul 31st, 2009 at 6:05 am.

www.last.fm/music/The+Cakes
One day to go!

www.holeinmyhead.co.uk
Gig & travel photos, writing, artwork & other stuff...