HTML and CSS RSS HTML and CSS RSS

Pure CSS Image Gallery with mouse-click swap

Troy III Troy III is offline Offline Sep 27th, 2009, 12:19 pm |
1
This code enables you to publish a CSS only with mouse click and keyboard tab image swap.

Attached is a Demo example of how it would look on IE6.

To ensure the greatest possible cross-browser compatibility/support this code uses CSS level 1 capabilities only.

One of extra benefits is that it will function even within browsers that doesn't support, and/or clients that have disabled javascript engine to.

Big images are asynchronous keeping the page as light and as fast as possible. The code itself will fall under 6KB if relative URLs are used. [here I'm using absolute paths to some real images available on the net for demonstration purposes only].

It's a copy-paste ready for preview demo.
It is HTML4.01 Strict and CSS2.1 validated.
Show Printable Version Show Printable Version
Attached Thumbnails
n4xmjt.png  
Quick reply to this message  
Code Snippet
•
•
•
•
HTML and CSS Syntax
Toggle Plain Text
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2.    "http://www.w3.org/TR/html4/strict.dtd">
  3.  
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  7. <meta name="Author" content="b.b. Troy III p.a.e.">
  8. <title>Image Gallery</title>
  9. 	<style type="text/css">
  10. 		*
  11. 		{ 
  12. 			margin: 0;
  13. 			padding:0;
  14. 			border: 0;
  15. 			font-family: 'Trebuchet MS', Helvetica, sans-serif;
  16. 		}
  17. 		body
  18. 		{
  19. 			background: white;
  20. 			width: 774px; 
  21. 			margin: 5px auto;
  22. 		}
  23. 		.gallery
  24. 		{
  25. 			position: relative;
  26. 			height: 100%;
  27. 			width: 100%; 
  28. 			margin: 4px 0 4px 0px;
  29. 			background: url('http://www.layoutstar.com/images/allbackgrounds/bgs/artistic/artistic_background_01.gif') no-repeat 73% 48%; 
  30. 		}
  31. 		.thumb span
  32. 		{
  33. 			position: absolute;
  34. 			top: 1px;
  35. 			left: 218px;
  36. 			border: outset 1px #f0f9ff; 
  37. 			visibility: hidden;
  38. 			text-decoration: none;
  39. 			color: black;
  40. 			padding: 30px; 
  41. 		}
  42. 		.n1:active span,.n1:focus span
  43. 		{
  44. 			background: url('http://www.billfrymire.com/gallery/webJpgs/dry-drought-arid-dirt.jpg')
  45. 		}
  46. 		.n2:active span,.n2:focus span
  47. 		{
  48. 			background: url('http://www.billfrymire.com/gallery/webJpgs/Sun-Valley-golf-course.jpg')
  49. 		}
  50. 		.n3:active span,.n3:focus span
  51. 		{
  52. 			background: url('http://www.billfrymire.com/gallery/webJpgs/close-up-colorful-iris.jpg')
  53. 		}
  54. 		.n4:active span,.n4:focus span
  55. 		{
  56. 			background: url('http://www.billfrymire.com/gallery/webJpgs/stress-fish-blender.jpg')
  57. 		}
  58. 		.n5:active span,.n5:focus span
  59. 		{
  60. 			background: url('http://www.billfrymire.com/gallery/webJpgs/paragliding-valley-sport.jpg')
  61. 		}
  62. 		.n6:active span,.n6:focus span
  63. 		{
  64. 			background: url('http://www.billfrymire.com/gallery/webJpgs/hurricane-space-earth-horizontal.jpg')
  65. 		}
  66. 		.n7:active span,.n7:focus span
  67. 		{
  68. 			background: url('http://www.billfrymire.com/gallery/webJpgs/world-globe-in-oyster-beach.jpg')
  69. 		}
  70. 		.n8:active span,.n8:focus span
  71. 		{
  72. 			background: url('http://www.billfrymire.com/gallery/webJpgs/periodic-table-chemistry-science.jpg')
  73. 		}
  74. 		.thumb:active span,.thumb:focus span
  75. 		{
  76. 			visibility: visible;
  77. 			background-repeat: no-repeat;
  78. 			background-position: center 30%;
  79. 			background-color: #f9f9fa;
  80. 		}  
  81.             .thumb:active img,.thumb:focus img
  82. 		{
  83. 			border: 1px #666 solid
  84. 		}
  85.  
  86. 		a img
  87. 		{
  88. 			height: 102px;
  89. 			width: 102px;
  90. 		}
  91. 		span img
  92. 		{
  93. 			visibility: hidden; 
  94. 			width: 490px; 
  95. 			height: 320px;
  96. 			display: block; 
  97. 		}
  98. 		h1
  99. 		{
  100. 			padding: 30px 20px 30px 15px; 
  101. 			background-color: #444;
  102. 			color: #f0f9ff;
  103. 			padding-left: 20px;
  104. 		}
  105. 		h1 i
  106. 		{
  107. 		color: #aaff44;
  108. 		}
  109. 		b.o,b.m,b.x,b.i
  110. 		{
  111. 			display: block; background: #444; padding-top: 1px;
  112. 		}
  113. 		b.o 
  114. 		{
  115. 			margin: 0px 6px
  116. 		}
  117. 		b.m 
  118. 		{
  119. 			margin: 0px 3px
  120. 		}
  121. 		b.x
  122. 		{
  123. 			margin: 0px 2px
  124. 		}
  125. 		b.i
  126. 		{
  127. 			margin: 0px 1px; padding-top:2px
  128. 		}
  129. 		h2, h2 span
  130. 		{
  131. 			overflow: hidden;
  132. 			font: bold 38pt/1.2em georgia, 'Trebuchet MS';
  133. 			position: relative;
  134. 			width: 100%;
  135. 			text-align: center;
  136. 			color: #999;
  137. 			background: #444
  138. 		}
  139. 		h2 span, h2 br
  140. 		{
  141. 			color: #ddd; 
  142. 			top: 0px; left:0px;
  143. 			position: absolute; 
  144. 			display: block;
  145. 			width: 100%;
  146. 			height: .575em;
  147. 		}
  148. 		h1 small
  149. 		{
  150. 			font-size: 0.5em;
  151. 			display: block;
  152. 		}
  153. 		#botm
  154. 		{
  155. 			text-align: center;
  156. 			width: 100%;
  157. 			color: #444;
  158. 			line-height: 2em;
  159. 			background: #fcfdfe;
  160. 		}
  161.  
  162. 		.gallery img
  163. 		{
  164. 			border: 1px #fff outset
  165. 		}
  166.             a
  167.             {
  168. 			outline:none 0; 
  169. 		}
  170. 		#au
  171. 		{
  172. 			background:	url('http://i35.tinypic.com/xbkdg9.jpg') repeat-x;
  173. 			font: normal 11px Tahoma;
  174. 			color: #000;
  175. 			border-top: 1px solid #ddd; 
  176. 			height: 25px;
  177. 			line-height: 25px;
  178. 			margin-top: 5px
  179. 		}
  180. 	</style>
  181. <!--[if IE]>
  183. 	<style>
  184. 	a {outline:expression(hideFocus='true')
  185. 	</style>
  186. <![endif]-->
  187. </head>
  188.  
  189. <body>
  190. <div>
  191.  <b class="o"></b>
  192.  <b class="m"></b>
  193.  <b class="x"></b>
  194.  <b class="i"></b>
  195. <h1>Pure <i>CSS</i> Image Gallery demo<br><small>with <i>on click</i> swap</small></h1> 
  196.  <b class="i"></b>
  197.  <b class="x"></b>
  198.  <b class="m"></b>
  199.  <b class="o"></b>
  200. </div>
  201.  
  202. <div id="au">
  203.   • Aeneas Dardanus •
  204. </div>
  205.  
  206. <div class="gallery">
  207. <a class="thumb n1" href="#">
  208. <img src="http://www.billfrymire.com/gallery/webthumbs/dry-drought-arid-dirt.jpg" alt=''><span>
  209. <img src="" alt=''><br>Dried... (Bonneville Salt Flats)</span></a>
  210. <a class="thumb n2" href="#">
  211. <img src="http://www.billfrymire.com/gallery/webthumbs/Sun-Valley-golf-course.jpg" alt=''><span>
  212. <img src="" alt=''><br>Sun Valley, -looks green... (Idaho USA golf course)</span></a>
  213. <br>
  214. <a class="thumb n3" href="#">
  215. <img src="http://www.billfrymire.com/gallery/webthumbs/close-up-colorful-iris.jpg" alt=''><span>
  216. <img src="" alt=''><br>Some Colorful surprise.</span></a> 
  217. <a class="thumb n4" href="#">
  218. <img src="http://www.billfrymire.com/gallery/webthumbs/stress-fish-blender.jpg" alt=''><span>
  219. <img src="" alt=''><br>Feeling safe?</span></a>
  220. <br>
  221. <a class="thumb n5" href="#">
  222. <img src="http://www.billfrymire.com/gallery/webthumbs/paragliding-valley-sport.jpg" alt=''><span>
  223. <img src="" alt=''><br>Watch this...</span></a> 
  224. <a class="thumb n6" href="#">
  225. <img src="http://www.billfrymire.com/gallery/webthumbs/hurricane-space-earth-horizontal.jpg" alt=''><span>
  226. <img src="" alt=''><br>Hurricane or typhoon? -Can't tell - but it's Huge!</span></a>
  227. <br>
  228. <a class="thumb n7" href="#">
  229. <img src="http://www.billfrymire.com/gallery/webthumbs/world-globe-in-oyster-beach.jpg" alt=''><span>
  230. <img src="" alt=''><br>...Some Nut in a shelve</span></a> 
  231. <a class="thumb n8" href="#">
  232. <img src="http://www.billfrymire.com/gallery/webthumbs/periodic-table-chemistry-science.jpg" alt=''><span>
  233. <img src="" alt=''><br>Need some chemistry to start things over.</span></a>
  234. </div>
  235.  
  236. <div id=botm>
  237. <p><small> Gallery <i>Images</i> are a property of 
  238. <a href='http://www.billfrymire.com' title="you can see more here">bill frymire visuals</a>
  239.  |•|  b.b. Troy III p.a.e. </small></p>
  240. </div>
  241.  
  242. <div style='border-top: solid 3px #af4; margin:0'>
  243. <H2 title="TROY III"> TROY III <br><span> TROY III </span> </H2>
  244.  <b class="i"></b>
  245.  <b class="x"></b>
  246.  <b class="m"></b>
  247.  <b class="o"></b>
  248. </div>
  249.  
  250. </body>
  251. </html>

Quick Comment
•
•
•
•
•
•
•
•
Message:
•
•
•
•


Similar Threads
Thread Tools Search this Thread



appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization perl pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7 xml xsl
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC