<style type="text/css">
#gallery { display: none; }
#jgal {padding:0;margin:0;list-style: none; width: 160px; }
#jgal li { opacity: .5;filter:alpha(opacity=50); float: left; display: block; width: 60px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 10px; margin-bottom: 10px; }
#jgal li img { position: absolute; top: 20px; left: 160px; display: none; }
#jgal li.active img { display: block; width:370px; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99;filter:alpha(opacity=99);}
</style>

<script type="text/javascript">
//<![CDATA[
var gal = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
var li = document.getElementById('jgal').getElementsByTagName('li');
li[0].className = 'active';
for (i=0; i<li.length; i++) {
li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
li[i].title = li[i].getElementsByTagName('img')[0].alt;
gal.addEvent(li[i],'click',function() {
var im = document.getElementById('jgal').getElementsByTagName('li');
for (j=0; j<im.length; j++) {
im[j].className = '';
}
this.className = 'active';
});
}
},
addEvent : function(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent("on"+type, obj[type+fn]);
}
}
}
gal.addEvent(window,'load', function() {
gal.init();
});
//]]>
</script>

<div style="position:relative;">
<ul id="gallery">
<li><img src="URL_IMAGEN1" alt="" /></li>
<li><img src="URL_IMAGEN2" alt="" /></li>
<li><img src="URL_IMAGEN3" alt="" /></li>
<li><img src="URL_IMAGEN4" alt="" /></li>
</ul>
</div>

#contenedor {
position: relative;
}
.miniatura{
z-index: 1001;
text-decoration: none;
}
.miniatura img {
border: 0px;
}
.miniatura span {
position: absolute;
text-decoration: none;
visibility: hidden;
border: 0px;
top:0px;
left:0px;
}
.miniatura:hover span {
visibility: visible;
overflow:visible;
z-index: 1002;
}

<div id="contenedor">
<a href="javascript:void(0);" class="miniatura">
<img src="URL_IMAGEN" alt="" style="width:100px;" />
<span><img src="URL_IMAGEN" alt=""/></span>
</a>
</div>

<div id="contenedor">
<a class="miniatura" href="javascript:void(0);">
<img alt="" src="URL_IMAGEN1" />
<span><img alt="" src="URL_IMAGEN2" /></span>
</a>
</div>

<div id="contenedor">
<a class="miniatura" href="javascript:void(0);">
<img alt="" src="URL_IMAGEN1" />
<span style="background:#ffffff;padding:10px;">Trichogaster Leeri. Procede de ríos de aguas tranquilas y densamente plantados de Malasia, Borneo y Sumatra. El macho tiene el cuerpo más rojo y sus aletas anal y dorsal alargadas.</span>
</a>
</div>

<!-- SUMARIOS AUTOMATICOS -->
<style type='text/css'>
.contemini {
position:relative;
width:125px;
height:125px;
float:right;
overflow:hidden;
margin:0px 0px 0px 10px;
border:1px solid #aaaaaa;
-webkit-box-shadow: 2px 2px 5px ;
-moz-box-shadow: 2px 2px 5px ;
box-shadow: 2px 2px 5px ;
background:#000000;
}
.miniaturas {
width:125px;
height:125px;
background: no-repeat scroll 50% 40% #eeeeee;
}
.leermas {
/* Las propiedades que gusteis para el enlace */
}
</style>

<script type='text/javascript'>
//<![CDATA[

function createSummaryAndThumb(pID,enlacetitulo){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = sumario_noimg;

if(img.length>=1) {
imgtag = '<div class="contemini"><a href="' + enlacetitulo + '"><div class="miniaturas" style="background-image:url(' + img[0].src + ')"></a></div></div>';
summ = sumario_img;
}

var summary = removeHtmlTag(div.innerHTML,summ,imgtag,enlacetitulo);
div.innerHTML = summary;
}

function removeHtmlTag(strx,chop,imagen,enlace){
var original=strx;
if(strx.indexOf("<")!=-1) {
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
if(strx.length<=chop) {
return original;
}
else {
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
var devolver = imagen + '<div>' + strx + '... (<a class="leermas" href="' + enlace+ '">Leer más</a>)</div>';
return devolver;
}
}

sumario_noimg = 380;
sumario_img = 255;
//]]>
</script>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary-&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary-<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</script>
</b:if>
</b:if>

.contemini {
position:relative;
width:400px;
height:200px;
text-align:center;
margin:0px auto 10px;
overflow:hidden;
border:1px solid #aaaaaa;
-webkit-box-shadow: 2px 2px 5px ;
-moz-box-shadow: 2px 2px 5px ;
box-shadow: 2px 2px 5px ;
background:#000000;
}

.miniaturas {
width:400px;
height:200px;
background: 50% 50%;
/*Para que la imagen no se repita si es pequeña, incluir un no-repeat*/
}

.leermas {
/* Las propiedades que gusteis para el enlace */
}

.contemini {
display:none;
}

.miniaturas {
}

.leermas {
/* Las propiedades que gusteis para el enlace */
}

<b:include data='post' name='shareButtons'/>

<b:includable id='shareButtons' var='post'>
<b:if cond='data:post.sharePostUrl'>
<a class='share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'>
<span class='share-button-link-text'><data:top.emailThisMsg/></span></a>
<a class='share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, &quot;_blank&quot;, &quot;height=270,width=475&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'>
<span class='share-button-link-text'><data:top.blogThisMsg/></span></a>
<a class='share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a>
<a class='share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, &quot;_blank&quot;, &quot;height=430,width=640&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a>
<a class='share-button sb-buzz' expr:href='data:post.sharePostUrl + &quot;&amp;target=buzz&quot;' expr:onclick='&quot;window.open(this.href, &quot;_blank&quot;, &quot;height=415,width=690&quot;); return false;&quot;' expr:title='data:top.shareToBuzzMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToBuzzMsg/></span></a>
</b:if>
</b:includable>

<style type="text/css">
.ver {display:block;}
.nover {display:none;}
</style>
<script type="text/JavaScript">
function vernover(identificacion){
var menu = document.getElementById(identificacion);
if(menu.className == 'ver'){
menu.className = 'nover';
} else {
menu.className = 'ver';
}
}
</script>

<table class="ejemplo"><tbody>
<tr><td>CONTENIDO</td><td>CONTENIDO</td><td>CONTENIDO</td></tr>
<tr><td>CONTENIDO</td><td>CONTENIDO</td><td>CONTENIDO</td></tr>
</tbody></table>

<table class="ejemplo"><tbody>
<tr><td>CONTENIDO</td><td>CONTENIDO</td><td>CONTENIDO</td></tr>
<tr><td>CONTENIDO</td><td>CONTENIDO</td><td>CONTENIDO</td></tr>
<tr><td>CONTENIDO</td><td>CONTENIDO</td><td>CONTENIDO</td></tr>
<tr><td>CONTENIDO</td><td>CONTENIDO</td><td>CONTENIDO</td></tr>
</tbody></table>

<a href="javascript:vernover('tablainferior');">Plegar/Desplegar</a> parte inferior tabla

table.ejemplo {
width:300px;
margin:0px auto;
text-align:center;
}
table.ejemplo tbody tr td {
margin:5px;
padding:5px;
border:1px solid #000000;
background:#cccccc;
}