943,028 Members | Top Members by Rank

Ad:
Jul 28th, 2009
0

JavaScript onmouseover image gallery

Expand Post »
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:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <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';">
  2. <span id="storya">
  3. <img src="dyn_graphics/feat/armour_vehicles.jpg" alt="" />
  4. <br />
  5. <div class="headline">Down the road, that's where I'll always be</div>
  6. <br />
  7. 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.
  8. </span>
  9. </a>

Thanks for any help.
Similar Threads
Reputation Points: 12
Solved Threads: 2
Junior Poster in Training
TheAlex is offline Offline
66 posts
since Feb 2005
Jul 29th, 2009
0

Re: JavaScript onmouseover image gallery

Hi Alex,

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

-essential
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Jul 29th, 2009
1

Re: JavaScript onmouseover image gallery

Here's a complete document sample:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <?xml version="1.0" encoding="utf-8" standalone="no"?>
  2. <?xml-stylesheet type="text/css" href="#css21" media="screen"?>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  4. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6. <head>
  7. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  8. <meta http-equiv="Window-target" content="_top" />
  9. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  10. <meta http-equiv="Content-Style-Type" content="text/css" />
  11. <title>Free Live Help!</title>
  12. <style id="css21" type="text/css" media="screen">
  13. /* <![CDATA[ */
  14. html, body {
  15. color : #405060;
  16. font : normal normal normal 95%/1.5 Verdana, Tahoma, Arial, san-serif;
  17. height : auto;
  18. margin : 0;
  19. padding : 0;
  20. text-align : center;
  21. width : auto; }
  22.  
  23. body {
  24. background-color : #E0E0E0; }
  25.  
  26. div {
  27. border : none;
  28. margin : 0;
  29. padding : 0; }
  30.  
  31. div#main {
  32. margin : 0 auto;
  33. width : 100%; }
  34.  
  35. div#header {
  36. background-color : #fff;
  37. min-height : 250px;
  38. width : 100%;
  39. clear : both; }
  40.  
  41. div#lpanel {
  42. background-color : transparent;
  43. float : left;
  44. min-height : 250px;
  45. width : 60%;
  46. clear : left; }
  47.  
  48. table {
  49. border : none;
  50. border-collapse: collapse;
  51. margin : 0;
  52. height : inherit;
  53. padding : 0; }
  54.  
  55. td { padding : 0; width : auto; height : inherit; }
  56.  
  57.  
  58. div#gscreen {
  59. background-color : #373823;
  60. float : none;
  61. height : 250px;
  62. width : 100%;
  63. clear : both; }
  64.  
  65. div#gdesc {
  66. background-color : transparent;
  67. margin : 0 auto;
  68. float : none;
  69. width : 80%;
  70. clear : both; }
  71.  
  72. div#rpanel {
  73. background-color : #f0f0f0;
  74. float : right;
  75. min-height : 250px;
  76. width : 40%;
  77. clear : right; }
  78.  
  79. div#footer {
  80. border-top : 2px solid #ccc;
  81. background-color : #F0F0F0;
  82. min-height : 100px;
  83. width : 100%;
  84. clear : both; }
  85. div#gallery {
  86. padding : .300em; }
  87.  
  88. div#gallery img {
  89. display : block;
  90. border : 2px solid #aaa;
  91. vertical-align : middle;
  92. width : 100px; }
  93.  
  94. div#content {
  95. padding : 2%; }
  96. div.bordered { border : 2px solid #aaa; }
  97. p { color : #495969; }
  98.  
  99. /* ]]> */
  100. </style>
  101. <script type="text/javascript">
  102. /* <![CDATA[ */
  103. /*******************************
  104.  - Mini Photo Studio v1.0
  105. ********************************
  106. - This notice must remain intact for use :
  107. ********************************
  108. ~ Developed By DaniWeb USER : essential
  109.  
  110. ~ http://www.daniweb.com/forums/member383844.html
  111. ----------------------------------------
  112. *******************************/
  113.  
  114. var imageGallery = ( function() {
  115. // Specify the content description for the image in any order of your choice:
  116.  
  117. // Content Description for image1
  118. var imgDesc0 = "Content decscription for image1. - Content sample filler -"
  119.  
  120. // Content Description for image2
  121. var imgDesc1 = "Content decscription for image2. - Content sample filler -"
  122.  
  123. // Content Description for image3
  124. var imgDesc2 = "Content decscription for image3. - Content sample filler -"
  125.  
  126. // Content Description for image4
  127. var imgDesc3 = "Content decscription for image4. - Content sample filler -"
  128.  
  129. var isImageDescription = {
  130. 0 : imgDesc0,
  131. 1 : imgDesc1,
  132. 2 : imgDesc2,
  133. 3 : imgDesc3 };
  134.  
  135. var xelem = ( function( xTag ) {
  136. var ua = ((( ie = document.all.tags( xTag )) && !!!( ff = document.getElementsByTagName( xTag ))) ? 1 : 0 );
  137. var xObj = null || { 0 : ff, 1 : ie }[ ua ];
  138. return xObj;
  139. } );
  140. return function imageGallery( tagX ) {
  141. var xItem = xelem("div");
  142. var xDesc = xItem["gdesc"];
  143. var xScreen = xItem["gscreen"];
  144. var xImg = xelem( tagX );
  145. var iLen = xImg.length;
  146. for ( i = 0; !!( xImg[ i ] ); i++ ) {
  147. xImg[ i ].onmouseover = function() {
  148. var xIndex = Number( this.id.match(/\d+/)[ 0 ] );
  149. xDesc.innerHTML = isImageDescription[ xIndex ];
  150. xScreen.style.background = " #373832 url(" + this.src + ") no-repeat center center";
  151. this.onmouseout = function() {
  152. xScreen.style.background = "#373832";
  153. }
  154. }
  155. }
  156. }
  157. } )();
  158.  
  159. onload = function() {
  160. imageGallery("img")
  161. }
  162.  
  163.  
  164.  
  165. /* ]]> */
  166. </script>
  167. </head>
  168. <body>
  169. <div id="main">
  170. <div id="content">
  171. <div class="bordered">
  172.  
  173. <div id="header">
  174. <div id="lpanel">
  175. <table frame="void" rules="none" width="100%">
  176. <tr><td><div id="gscreen"></div></td></tr></table>
  177. </div>
  178. <div id="rpanel"><table frame="void" rules="none" width="100%" style="height:250px">
  179. <tr><td style="height:250px"><div id="gdesc"></div></td></tr></table></div>
  180. </div>
  181.  
  182. <div id="footer">
  183. <div id="gallery">
  184. <table id="myGallery" width="100%" frame="void" rules="none" >
  185. <tr>
  186. <td><img id="i0" src="image1.jpg" height="100" alt="test images" /></td>
  187. <td><img id="i1" src="image2.jpg" height="100" alt="test images" /></td>
  188. <td><img id="i2" src="image3.jpg" height="100" alt="test images" /></td>
  189. <td><img id="i3" src="image4.jpg" height="100" alt="test images" /></td></tr>
  190. </table>
  191. </div></div>
  192.  
  193. </div>
  194. </div>
  195. </div>
  196. </body>
  197. </html>

hope it does helped...
-essential
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Jul 31st, 2009
0

Re: JavaScript onmouseover image gallery

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.
Reputation Points: 12
Solved Threads: 2
Junior Poster in Training
TheAlex is offline Offline
66 posts
since Feb 2005

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: show hide divs
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: can't validate columns created using createElement





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC