Prohibida la copia de esta web o de sus subpaginas en otro sitio.Licencia Creative Commons y Copyright. Disponemos de herramientas antiplagio

Agradecer no cuesta nada,es un estimulo para continuar

jquery , css,hover etc

Imágenes con reflejos usando CSS

En head

 

 

 

<!-- disfruta-ayuda-comparte.jimdo.com--><style type="text/css">/*<![CDATA[*/  .image-block {    height: 330px;    overflow: hidden;    width: 300px;  }  .reflection {    position: relative;  }  .reflection img {    opacity: 0.2;    -moz-transform: scaleY(-1); /* Firefox */    -webkit-transform: scaleY(-1); /* Chrome/Safari */    -o-transform: scaleY(-1); /* Opera */    -ms-transform: scaleY(-1); /* IE9 */    transform: scaleY(-1); /* w3c */    filter: flipv alpha(opacity='20'); /* IE8 */  }/*]]>*/</style>

En html

 

 

 

<!-- disfruta-ayuda-comparte.jimdo.com--><div class="image-block">  <img src="URL_IMAGEN 1"/>  <div class="reflection">    <img src="REPITE URL DE LA IMAGEN 1"/>  </div></div>

boton 3d con movimiento

En head

 

 

 

<!-- disfruta-ayuda-comparte.jimdo.com--><style type="text/css">/*<![CDATA[*/
a.css3dbutton {    background: darkred; /* background color of button */    color: white;    text-decoration: none;    font: bold 28px Arial; /* font size and style */    position: relative;                top: 0; /* anchor main button's position */    bottom: -12px; /* Depth of 3D effect. :after pseudo element inherits this value so it's animated in Chrome. See: kizu.ru/en/pseudos */                margin-bottom: 12px;    -moz-box-shadow: 0 -15px 5px darkred inset;    -webkit-box-shadow: 0 -15px 5px darkred inset;    box-shadow: 0 -15px 5px darkred inset;    -moz-transition: all 0.2s ease-in-out;    -o-transition: all 0.2s ease-in-out;    -webkit-transition: all 0.2s ease-in-out;    transition: all 0.2s ease-in-out;}
a.css3dbutton, a.css3dbutton:after {    display: inline-block;    padding: 10px 15px; /* vertical and horizontal padding of button */    -moz-border-radius: 8px/15px;    -webkit-border-radius: 8px/15px;    border-radius: 8px/15px;    outline: none;}
a.css3dbutton:after { /* pseudo element to construct 3D side of button */    content: "";    position: absolute;    padding: 0;    z-index: -1;    bottom: inherit; /* Inherit main button bottom value to animate it. See: kizu.ru/en/pseudos */    left: 0;    width: 100%;    height: 100%;    background: #6e0e0c; /* background color of 3D effect */    -moz-box-shadow: 1px 0 3px gray;    -webkit-box-shadow: 1px 0 3px gray;    box-shadow: 1px 0 3px gray;}
a.css3dbutton:hover {    -moz-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;    -webkit-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;    box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;    background: #bc3835; /* background color when mouse rolls over button */}
a.css3dbutton:active {    top: 12px; /* shift button down 12px when depressed. Change 12px to match button's "bottom" property above */    bottom: 0;    -moz-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;    -webkit-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;    box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;}
/*]]>*/</style>

en htm

 

 

 

<!-- disfruta-ayuda-comparte.jimdo.com--><a href="tu url" class="css3dbutton">tu etiqueta</a>

textos , noticias,actualizaciones con efectos animados,hacer clic en los textos y veras los efectos

  • tus noticias
  • tus actualizaciones
  • todo lo nuevo
  • lo puedes escribir aqui

En head

 

 

 

<!-- disfruta-ayuda-comparte.jimdo.com--><style type="text/css">/*<![CDATA[*/
ul.animatedbgul{        margin: 0;        padding: 0;        list-style: none;}
ul.animatedbgul li{        width: 100%;        clear:left; /* clear contents of inner span, which will be floated left */        overflow: hidden; /* clear contents of inner span, which will be floated left */}
ul.animatedbgul li span{        display: block;        float: left; /* cause width of each span to take up only as much space as needed */        min-width: 0px; /* animated property. Explicit min-width defined so animation works. */        margin-bottom: 5px;        padding: 8px;        color: #ffffff;}
ul.animatedbgul li:hover span{        color: #fff;        background: #ce3e3e;        border-left: 8px solid darkred;        min-width: 450px; /* animated property. Set to desired final length of background */        -webkit-box-shadow: 0 0 5px gray;        -moz-box-shadow: 0 0 5px gray;        box-shadow: 0 0 5px gray;        -webkit-transition: all 0.3s ease-out;        -moz-transition: all 0.3s ease-out;        -o-transition: all 0.3s ease-out;        transition: all 0.3s ease-out;}
/*]]>*/</style>

en htm

 

 

 

<!-- disfruta-ayuda-comparte.jimdo.com--><ul class="animatedbgul">    <li>        <span>tus noticias</span>    </li>
    <li>        <span>tus actualizaciones</span>    </li>
    <li>        <span>todo lo nuevo</span>    </li>
    <li>        <span>lo puedes escribir aqui</span>    </li></ul>

menu degradado:recordad que teneis muchos en "menus horizontales en css y htlm" de esta web

En head

 

 

 

<!-- disfruta-ayuda-comparte.jimdo.com--><style type="text/css">/*<![CDATA[*/

.shadowblockmenu-v{font: bold 14px Germand;width: 190px; /* width of menu */}
.shadowblockmenu-v ul{border: 1px solid #eee;padding: 0;margin: 0;list-style: none;}
.shadowblockmenu-v ul li{margin:0;padding:0;}
.shadowblockmenu-v ul li a{display:block;text-transform: uppercase;color: #ffffff;padding: 10px 15px;text-decoration: none;border-bottom: 1px solid #cacaca;border-right: 1px solid #cacaca; /*right border between menu items*/-moz-box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6); /* Add inset shadow to each menu item. First 3 values in (114,114,114, 0.5) specifies rgb values, last specifies opacity */-webkit-box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6);box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6);text-shadow: 0 -1px 1px #cfcfcf; /* CSS text shadow to give text some depth */-moz-transition: all 0.2s ease-in-out; /* Enable CSS transition between property changes */-webkit-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
.shadowblockmenu-v ul li a:hover, .shadowblockmenu-v ul li a.selected{color: black;-moz-box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8); /* Add 3 inset shadows to each menu item  */-webkit-box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8);box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8);}
/*]]>*/</style>

en htm

 

Podeis poner todas las etiquetas que querais al menu,repitiendo  la linea

     <li>            <a href="tu url">etiqueta</a>        </li>

 

 

 

<!-- disfruta-ayuda-comparte.jimdo.com--><div class="shadowblockmenu-v">    <ul>        <li>            <a href="tu url">etiqueta</a>        </li>
        <li>            <a href="tu url">etiqueta</a>        </li>
        <li>            <a href="tu url">etiqueta</a>        </li>
        <li>            <a href="tu url">etiqueta</a>        </li>
        <li>            <a href="tu url">etiqueta</a>        </li>
        <li>            <a href="tu url">etiqueta</a>        </li>    </ul></div>

imagenes en movimiento y zoom con descripcion:Solo os pondre 1 imagen de ejemplo pero lleva varias imagenes,solo pasar el cursor por la imagen para que veais el efecto

Aqui escribir toda la descripcion que querais


En head

 

 

 

 

 

<!-- disfruta-ayuda-comparte.jimdo.com--><style type="text/css">/*<![CDATA[*/
.imagepluscontainer{ /* main image container */position: relative;z-index: 1;}
.imagepluscontainer img{ /* CSS for image within container */position: relative;z-index: 2;-moz-transition: all 0.5s ease; /* Enable CSS3 transition on all props */-webkit-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
.imagepluscontainer:hover img{ /* CSS for image when mouse hovers over main container */-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);-moz-transform: scale(1.05, 1.05);-webkit-transform: scale(1.05, 1.05);-ms-transform: scale(1.05, 1.05);-o-transform: scale(1.05, 1.05);transform: scale(1.05, 1.05);}
.imagepluscontainer div.desc{ /* CSS for desc div of each image. */position: absolute;width: 80%;z-index: 1; /* Set z-index to that less than image's, so it's hidden beneath it */bottom: 0; /* Default position of desc div is bottom of container, setting it up to slide down */left: 5px;padding: 8px;background: rgba(0, 0, 0, 0.8); /* black bg with 80% opacity */color: white;-moz-border-radius: 0 0 8px 8px; /* CSS3 rounded borders */-webkit-border-radius: 0 0 8px 8px;border-radius: 0 0 8px 8px;opacity: 0; /* Set initial opacity to 0 */-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); /* CSS3 shadows */-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);-moz-transition: all 0.5s ease 0.5s; /* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */-webkit-transition: all 0.5s ease 0.5s;-o-transition: all 0.5s ease 0.5s;-ms-transition: all 0.5s ease 0.5s;transition: all 0.5s ease 0.5s;}
.imagepluscontainer div.desc a{color: white;}
.imagepluscontainer:hover div.desc{ /* CSS for desc div when mouse hovers over main container */-moz-transform: translate(0, 100%);-webkit-transform: translate(0, 100%);-ms-transform: translate(0, 100%);-o-transform: translate(0, 100%);transform: translate(0, 100%);opacity:1; /* Reveal desc DIV fully */}
/*### Below CSS when applied to desc DIV slides the desc div from the right edge of the image ###*/
.imagepluscontainer div.rightslide{width: 50px; /* reset from default */top:15px;right:0;left:auto;  /* reset from default */bottom:auto;  /* reset from default */padding-left:15px;-moz-border-radius: 0 8px 8px 0;-webkit-border-radius: 0 8px 8px 0;border-radius: 0 8px 8px 0;}
.imagepluscontainer:hover div.rightslide{-moz-transform: translate(100%, 0);-webkit-transform: translate(100%, 0);-ms-transform: translate(100%, 0);-o-transform: translate(100%, 0);transform: translate(100%, 0);}
/*### Below CSS when applied to desc DIV slides the desc div from the left edge of the image ###*/
.imagepluscontainer div.leftslide{width: 50px;  /* reset from default */top:15px;left:0;bottom:auto;  /* reset from default */padding-left:15px;-moz-border-radius: 8px 0 0 8px;-webkit-border-radius: 8px 0 0 8px;border-radius: 8px 0 0 8px;}
.imagepluscontainer:hover div.leftslide{-moz-transform: translate(-100%, 0);-webkit-transform: translate(-100%, 0);-ms-transform: translate(-100%, 0);-o-transform: translate(-100%, 0);transform:translate(-100%, 0);}
/*### Below CSS when applied to desc DIV slides the desc div from the top edge of the image ###*/
.imagepluscontainer div.upslide{top:0;bottom:auto;  /* reset from default */padding-bottom:10px;-moz-border-radius: 8px 8px 0 0;-webkit-border-radius: 8px 8px 0 0;border-radius: 8px 8px 0 0;}
.imagepluscontainer:hover div.upslide{-moz-transform: translate(0, -100%);-webkit-transform: translate(0, -100%);-ms-transform: translate(0, -100%);-o-transform: translate(0, -100%);transform:translate(0, -100%);}
/*]]>*/</style>

en htm

 

 

 

<!-- disfruta-ayuda-comparte.jimdo.com--><div class="imagepluscontainer" style="width:263px; height:199px; z-index:2"><img src="url de la imagen" /><div class="desc">descripcion </div></div>
<br />
<div class="imagepluscontainer" style="width:263px; height:199px; left:350px"><img src="url imagen" /><div class="desc rightslide">descripcion</div></div>
<br />
<div class="imagepluscontainer" style="width:263px; height:199px"><img src="url de la imagen" /><div class="desc upslide">descripcion</div></div>
<br /></div>

Imagenes con efecto lupa

En head

 

 

 

<script type='text/javascript'>//<![CDATA[// TJPzoom 3 * János Pál Tóth// 2007.07.12// 2011.03.24 firefox 4 apparently has a style.filter attribute (which i didn't expect in 2007)// Docs @ http://valid.tjp.hu/tjpzoom/ // News @ http://blog.tjp.hu/function TJPzoomswitch(obj) { TJPon[obj]=((TJPon[obj])?(0):(1)); return TJPon[obj];}
function TJPzoomif(obj,highres) { if(TJPon[obj]) {TJPzoom(obj,highres);}}
function TJPzoom(obj,highres) { TJPzoomratio=TJPzoomheight/TJPzoomwidth; if(TJPzoomoffsetx > 1) {  TJPzoomoffset='dumb';  TJPzoomoffsetx=TJPzoomoffsetx/TJPzoomwidth;  TJPzoomoffsety=TJPzoomoffsety/TJPzoomheight; } if(!obj.style.width) {  if(obj.width > 0) {   //educated guess   obj.style.width=obj.width+'px';   obj.style.height=obj.height+'px';  } } if(typeof(highres) != typeof('')) {highres=obj.src} var TJPstage=document.createElement("div"); TJPstage.style.width=obj.style.width; TJPstage.style.height=obj.style.height; TJPstage.style.overflow='hidden'; TJPstage.style.position='absolute'; if(typeof(TJPstage.style.filter) != typeof(nosuchthing) && document.all) {  //hi IE  if((navigator.appVersion + '').indexOf('Mac') == -1 && navigator.appName == 'Microsoft Internet Explorer') { //Mac IE gets out   TJPstage.style.filter='alpha(opacity=0)';   TJPstage.style.backgroundColor='#ffffff';  } } else {  //hi decent gentlemen  TJPstage.style.backgroundImage='transparent'; } TJPstage.setAttribute('onmousemove','TJPhandlemouse(event,this);'); TJPstage.setAttribute('onmousedown','TJPhandlemouse(event,this);'); TJPstage.setAttribute('onmouseup','TJPhandlemouse(event,this);'); TJPstage.setAttribute('onmouseout','TJPhandlemouse(event,this);'); if(navigator.userAgent.indexOf('MSIE')>-1) {  TJPstage.onmousemove = function() {TJPhandlemouse(event,this);}  TJPstage.onmousedown = function() {TJPhandlemouse(event,this);}  TJPstage.onmouseup = function() {TJPhandlemouse(event,this);}  TJPstage.onmouseout = function() {TJPhandlemouse(event,this);} } obj.parentNode.insertBefore(TJPstage,obj);  TJPwin=document.createElement("div"); TJPwin.style.width='0px'; TJPwin.style.height='0px'; TJPwin.style.overflow='hidden'; TJPwin.style.position='absolute'; TJPwin.style.display='none'; tw1='<div style="position:absolute;overflow:hidden;margin:'; TJPwin.innerHTML=  tw1+TJPshadowthick+'px 0 0 '+TJPshadowthick+'px; background-color:'+TJPbordercolor+'; width:'+(TJPzoomwidth-TJPshadowthick*2)+'px;height:'+(TJPzoomheight-TJPshadowthick*2)+'px"><\/div>' + tw1+(TJPshadowthick+TJPborderthick)+'px 0 0 '+(TJPshadowthick+TJPborderthick)+'px; width:'+(TJPzoomwidth-TJPshadowthick*2-TJPborderthick*2)+'px;height:'+(TJPzoomheight-TJPshadowthick*2-TJPborderthick*2)+'px;"><img src="'+obj.src+'" style="position:absolute;margin:0;padding:0;border:0; width:'+(TJPzoomamount*parseInt(obj.style.width))+'px;height:'+(TJPzoomamount*parseInt(obj.style.height))+'px;" />'+((obj.src!=highres)?('<img src="'+highres+'" style="position:absolute;margin:0;padding:0;border:0; width:'+(TJPzoomamount*parseInt(obj.style.width))+'px;height:'+(TJPzoomamount*parseInt(obj.style.height))+'px;" onload="if(this.parentNode) {this.parentNode.parentNode.getElementsByTagName(\'div\')[2].style.display=\'none\';}" />'):(''))+'<\/div>'; if(highres != obj.src) {  TJPwin.innerHTML+='<div style="position:absolute; margin:'+(TJPshadowthick+TJPborderthick)+'px 0 0 '+(TJPshadowthick+TJPborderthick)+'px;">'+TJPloading+'<\/div>'; } if(TJPshadowthick>0) {  st1='<span style="position:absolute; display:inline-block; margin: ';  st2='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=\'scale\',src='  st3='filter:alpha(opacity=0);margin:0;padding:0;border:0;"/><\/span>';  TJPwin.innerHTML+=  st1+'0 0 0 0    ; width:'+TJPshadowthick*2+'px; height:'+TJPshadowthick*2+'px;'+st2+'\''+TJPshadow+'nw.png\')"><img src="'+TJPshadow+'nw.png" style="width:'+TJPshadowthick*2+'px; height:'+TJPshadowthick*2+'px;'+st3 +  st1+'0 0 0 '+(TJPzoomwidth-TJPshadowthick*2)+'px; width:'+TJPshadowthick*2+'px; height:'+TJPshadowthick*2+'px;'+st2+'\''+TJPshadow+'ne.png\')"><img src="'+TJPshadow+'ne.png" style="width:'+TJPshadowthick*2+'px; height:'+TJPshadowthick*2+'px;'+st3 +  st1+''+(TJPzoomheight-TJPshadowthick*2)+'px 0 0 0px; width:'+TJPshadowthick*2+'px; height:'+TJPshadowthick*2+'px;'+st2+'\''+TJPshadow+'sw.png\',sizingMethod=\'scale\')"><img src="'+TJPshadow+'sw.png" style="width:'+TJPshadowthick*2+'px; height:'+TJPshadowthick*2+'px;'+st3 +  st1+''+(TJPzoomheight-TJPshadowthick*2)+'px 0 0 '+(TJPzoomwidth-TJPshadowthick*2)+'px; width:'+TJPshadowthick*2+'px; height:'+TJPshadowthick*2+'px;'+st2+'\''+TJPshadow+'se.png\',sizingMethod=\'scale\')"><img src="'+TJPshadow+'se.png" style="width:'+TJPshadowthick*2+'px; height:'+TJPshadowthick*2+'px;'+st3 +    st1+'0 0 0 '+(TJPshadowthick*2)+'px; width:'+(TJPzoomwidth-TJPshadowthick*4)+'px; height:'+TJPshadowthick*2+'px;'+st2+'\''+TJPshadow+'n.png\',sizingMethod=\'scale\')"><img src="'+TJPshadow+'n.png" style="width:'+(TJPzoomwidth-TJPshadowthick*4)+'px; height:'+TJPshadowthick*2+'px;'+st3 +  st1+''+(TJPshadowthick*2)+'px 0 0 0; width:'+(TJPshadowthick*2)+'px; height:'+(TJPzoomheight-TJPshadowthick*4)+'px;'+st2+'\''+TJPshadow+'w.png\',sizingMethod=\'scale\')"><img src="'+TJPshadow+'w.png" style="width:'+(TJPshadowthick*2)+'px; height:'+(TJPzoomheight-TJPshadowthick*4)+'px;'+st3 +  st1+''+(TJPshadowthick*2)+'px 0 0 '+(TJPzoomwidth-TJPshadowthick*2)+'px; width:'+(TJPshadowthick*2)+'px; height:'+(TJPzoomheight-TJPshadowthick*4)+'px;'+st2+'\''+TJPshadow+'e.png\',sizingMethod=\'scale\')"><img src="'+TJPshadow+'e.png" style="width:'+(TJPshadowthick*2)+'px; height:'+(TJPzoomheight-TJPshadowthick*4)+'px;'+st3 +  st1+''+(TJPzoomheight-TJPshadowthick*2)+'px 0 0 '+(TJPshadowthick*2)+'px; width:'+(TJPzoomwidth-TJPshadowthick*4)+'px; height:'+TJPshadowthick*2+'px;'+st2+'\''+TJPshadow+'s.png\',sizingMethod=\'scale\')"><img src="'+TJPshadow+'s.png" style="width:'+(TJPzoomwidth-TJPshadowthick*4)+'px; height:'+TJPshadowthick*2+'px;'+st3; } ; //marker - zoomer obj.parentNode.insertBefore(TJPwin,TJPstage);
 TJPresize(obj);}
function TJPresize(obj) { sbr=0; sbl=0; if(TJPzoomwidth-2*TJPborderthick-3*TJPshadowthick < 22) {sbr=1} if(TJPzoomheight-2*TJPborderthick-3*TJPshadowthick < 22) {sbr=1} if(TJPzoomwidth > parseFloat(obj.style.width)) {sbl=1;} if(TJPzoomheight > parseFloat(obj.style.height)) {sbl=1}  if(sbr==1 && sbl == 1) {  TJPzoomwidth=parseFloat(obj.style.width)/2;  TJPzoomheight=parseFloat(obj.style.height)/2;  TJPzoomratio=TJPzoomheight/TJPzoomwidth; }
 if(sbr==1) {  if(TJPzoomwidth<TJPzoomheight) {   TJPzoomheight=TJPzoomheight/TJPzoomwidth*(22+2*TJPborderthick+3*TJPshadowthick); TJPzoomwidth=22+2*TJPborderthick+3*TJPshadowthick;  } else {   TJPzoomwidth=TJPzoomwidth/TJPzoomheight*(22+2*TJPborderthick+3*TJPshadowthick); TJPzoomheight=22+2*TJPborderthick+3*TJPshadowthick;  } } 
 if(sbl==1) {  if(parseFloat(obj.style.width)/parseFloat(obj.style.height) > TJPzoomwidth/TJPzoomheight) {   TJPzoomheight=parseFloat(obj.style.height);   TJPzoomwidth=TJPzoomheight/TJPzoomratio;  } else {   TJPzoomwidth=parseFloat(obj.style.width);   TJPzoomheight=TJPzoomratio*TJPzoomwidth;  } }
 TJPzoomwidth=Math.floor(TJPzoomwidth/2)*2; TJPzoomheight=Math.floor(TJPzoomheight/2)*2;
 ww=obj.parentNode.getElementsByTagName('div')[0]; ww.style.width=TJPzoomwidth+'px'; ww.style.height=TJPzoomheight+'px'; w=ww.getElementsByTagName('div')[0]; w.style.width=TJPzoomwidth-TJPshadowthick*2+'px'; w.style.height=TJPzoomheight-TJPshadowthick*2+'px'; w=ww.getElementsByTagName('div')[1]; w.style.width=TJPzoomwidth-TJPshadowthick*2-TJPborderthick*2+'px'; w.style.height=TJPzoomheight-TJPshadowthick*2-TJPborderthick*2+'px'; if(TJPshadowthick > 0) {  w=ww.getElementsByTagName('span')[1]; w.style.margin='0 0 0 '+(TJPzoomwidth-TJPshadowthick*2)+'px';  w=ww.getElementsByTagName('span')[2]; w.style.margin=(TJPzoomheight-TJPshadowthick*2)+'px 0 0 0px';  w=ww.getElementsByTagName('span')[3]; w.style.margin=(TJPzoomheight-TJPshadowthick*2)+'px 0 0 '+(TJPzoomwidth-TJPshadowthick*2)+'px';
  w=ww.getElementsByTagName('span')[6]; w.style.margin=(TJPshadowthick*2)+'px 0 0 '+(TJPzoomwidth-TJPshadowthick*2)+'px';  w=ww.getElementsByTagName('span')[7]; w.style.margin=(TJPzoomheight-TJPshadowthick*2)+'px 0 0 '+(TJPshadowthick*2)+'px';
  www=(TJPzoomwidth-TJPshadowthick*4)+'px';  w=ww.getElementsByTagName('span')[4]; w.style.width=www;  w=w.getElementsByTagName('img')[0]; w.style.width=www;  w=ww.getElementsByTagName('span')[7]; w.style.width=www;  w=w.getElementsByTagName('img')[0]; w.style.width=www;    www=(TJPzoomheight-TJPshadowthick*4)+'px';  w=ww.getElementsByTagName('span')[5]; w.style.height=www;  w=w.getElementsByTagName('img')[0]; w.style.height=www;  w=ww.getElementsByTagName('span')[6]; w.style.height=www;  w=w.getElementsByTagName('img')[0]; w.style.height=www; }}
function TJPfindposy(obj) { var curtop = 0; if(!obj) {return 0;} if (obj.offsetParent) {  while (obj.offsetParent) {   curtop += obj.offsetTop   obj = obj.offsetParent;  } } else if (obj.y) {  curtop += obj.y; } return curtop;}
function TJPfindposx(obj) { var curleft = 0; if(!obj) {return 0;} if (obj && obj.offsetParent) {  while (obj.offsetParent) {   curleft += obj.offsetLeft   obj = obj.offsetParent;  } } else if (obj.x) {  curleft += obj.x; } return curleft;}

function TJPhandlemouse(evt,obj) { var evt = evt?evt:window.event?window.event:null; if(!evt) { return false; } if(evt.pageX) {  nowx=evt.pageX-TJPfindposx(obj)-TJPadjustx;  nowy=evt.pageY-TJPfindposy(obj)-TJPadjusty; } else {  if(document.documentElement && document.documentElement.scrollTop) {   nowx=evt.clientX+document.documentElement.scrollLeft-TJPfindposx(obj)-TJPadjustx;   nowy=evt.clientY+document.documentElement.scrollTop-TJPfindposy(obj)-TJPadjusty;  } else {   nowx=evt.x+document.body.scrollLeft-TJPfindposx(obj)-TJPadjustx;   nowy=evt.y+document.body.scrollTop-TJPfindposy(obj)-TJPadjusty;  } } if(evt.type == 'mousemove') {  TJPsetwin(obj,nowx,nowy); } else if(evt.type == 'mousedown') {  TJPmouse=1; //left: 1, middle: 2, right: 3  TJPmousey=nowy;  TJPmousex=nowx; } else if(evt.type =='mouseup') {  TJPmouse=0; } else if(evt.type =='mouseout') {  TJPmouse=0;  if(navigator.appVersion.indexOf('Mac') == -1 || navigator.appVersion.indexOf('MSIE') == -1) { //hi Mac IE   x=obj.parentNode;   x.removeChild(x.getElementsByTagName('div')[0]);   x.removeChild(x.getElementsByTagName('div')[0]);  } }}

// TJPzoom 3 * János Pál Tóth// Docs @ http://valid.tjp.hu/tjpzoom/ // News @ http://tjpzoom.blogspot.com/

function TJPsetwin(obj,nowx,nowy) { obj.parentNode.getElementsByTagName('div')[0].style.display='block'; if(TJPzoomoffset=='smart') {  TJPzoomoffsetx=.1+.8*nowx/parseFloat(obj.style.width);  TJPzoomoffsety=.1+.8*nowy/parseFloat(obj.style.height); }
 stage=obj.parentNode.getElementsByTagName('div')[0]; if(TJPmouse == 1) {  if(Math.abs(nowy-TJPmousey) >= 1) {   TJPzoomamount*=((nowy>TJPmousey)?(0.909):(1.1));   TJPmousey=nowy;   if(TJPzoomamount < TJPzoomamountmin) {TJPzoomamount=TJPzoomamountmin;}   if(TJPzoomamount > TJPzoomamountmax) {TJPzoomamount=TJPzoomamountmax;}   stage.getElementsByTagName('div')[1].getElementsByTagName('img')[0].style.width=  parseInt(obj.style.width)*TJPzoomamount+'px';   stage.getElementsByTagName('div')[1].getElementsByTagName('img')[0].style.height=  parseInt(obj.style.height)*TJPzoomamount+'px';   if(stage.getElementsByTagName('div')[1].getElementsByTagName('img')[1]) {    stage.getElementsByTagName('div')[1].getElementsByTagName('img')[1].style.width= stage.getElementsByTagName('div')[1].getElementsByTagName('img')[0].style.width;    stage.getElementsByTagName('div')[1].getElementsByTagName('img')[1].style.height= stage.getElementsByTagName('div')[1].getElementsByTagName('img')[0].style.height;   }  }  if(Math.abs(nowx-TJPmousex) >= 12 && TJPzoomwindowlock==0) {   TJPzoomwidth*=((nowx>TJPmousex)?(1.1):(0.909));   TJPzoomheight=TJPzoomwidth*TJPzoomratio;   TJPresize(obj);   TJPmousex=nowx;  } } stage.style.marginLeft=nowx-(TJPzoomwidth -2*TJPborderthick-2*TJPshadowthick)*TJPzoomoffsetx-TJPborderthick-TJPshadowthick+'px'; stage.style.marginTop= nowy-(TJPzoomheight-2*TJPborderthick-2*TJPshadowthick)*TJPzoomoffsety-TJPborderthick-TJPshadowthick+'px'; clip1=0; clip2=TJPzoomwidth; clip3=TJPzoomheight; clip4=0; nwidth=TJPzoomwidth; nheight=TJPzoomheight; tmp=(1-2*TJPzoomoffsetx)*(TJPborderthick+TJPshadowthick);  if(nowx-TJPzoomwidth*TJPzoomoffsetx < tmp) {  clip4=TJPzoomwidth*TJPzoomoffsetx-nowx + tmp; } else if(parseFloat(nowx-TJPzoomwidth*TJPzoomoffsetx+TJPzoomwidth) > parseFloat(obj.style.width)+tmp) {  clip2= TJPzoomwidth*TJPzoomoffsetx - nowx + parseFloat(obj.style.width)+tmp;  nwidth=TJPzoomwidth*TJPzoomoffsetx-nowx+parseInt(obj.style.width)+TJPborderthick+TJPshadowthick; }  tmp=(1-2*TJPzoomoffsety)*(TJPborderthick+TJPshadowthick);  if(nowy-TJPzoomheight*TJPzoomoffsety < tmp) {  clip1=TJPzoomheight*TJPzoomoffsety-nowy+tmp; } else if(parseFloat(nowy-TJPzoomheight*TJPzoomoffsety+TJPzoomheight) > parseFloat(obj.style.height)+tmp) {  clip3= TJPzoomheight*TJPzoomoffsety - nowy + parseFloat(obj.style.height)+tmp;  nheight=TJPzoomheight*TJPzoomoffsety - nowy + parseFloat(obj.style.height)+TJPborderthick+TJPshadowthick; } stage.style.width=nwidth+'px'; stage.style.height=nheight+'px';
 stage.style.clip='rect('+clip1+'px,'+clip2+'px,'+clip3+'px,'+clip4+'px)';
 if(nowy-TJPzoomoffsety*(TJPzoomheight-2*TJPborderthick-2*TJPshadowthick) < 0) { t=-(nowy-TJPzoomoffsety*(TJPzoomheight-2*TJPborderthick-2*TJPshadowthick))}  else if(nowy-TJPzoomoffsety*(TJPzoomheight-2*TJPborderthick-2*TJPshadowthick) > parseFloat(obj.style.height)-TJPzoomheight+TJPborderthick*2+TJPshadowthick*2) { t=-TJPzoomamount*parseFloat(obj.style.height)+TJPzoomheight-TJPborderthick*2-TJPshadowthick*2-((nowy-TJPzoomoffsety*(TJPzoomheight-2*TJPborderthick-2*TJPshadowthick))-(parseFloat(obj.style.height)-TJPzoomheight+TJPborderthick*2+TJPshadowthick*2)); } else { t=(-TJPzoomamount*parseFloat(obj.style.height)+TJPzoomheight-TJPborderthick*2-TJPshadowthick*2)/(parseFloat(obj.style.height)-TJPzoomheight+TJPborderthick*2+TJPshadowthick*2)*(nowy-TJPzoomoffsety*(TJPzoomheight-2*TJPborderthick-2*TJPshadowthick)) } stage.getElementsByTagName('div')[1].getElementsByTagName('img')[0].style.marginTop=t+'px';
 if(stage.getElementsByTagName('div')[1].getElementsByTagName('img')[1]) {  stage.getElementsByTagName('div')[1].getElementsByTagName('img')[1].style.marginTop=t+'px'; }
 if(nowx-TJPzoomoffsetx*(TJPzoomwidth-2*TJPborderthick-2*TJPshadowthick) < 0) { t=-(nowx-TJPzoomoffsetx*(TJPzoomwidth-2*TJPborderthick-2*TJPshadowthick))}  else if(nowx-TJPzoomoffsetx*(TJPzoomwidth-2*TJPborderthick-2*TJPshadowthick) > parseFloat(obj.style.width)-TJPzoomwidth+TJPborderthick*2+TJPshadowthick*2) { t=-TJPzoomamount*parseFloat(obj.style.width)+TJPzoomwidth-TJPborderthick*2-TJPshadowthick*2-((nowx-TJPzoomoffsetx*(TJPzoomwidth-2*TJPborderthick-2*TJPshadowthick))-(parseFloat(obj.style.width)-TJPzoomwidth+TJPborderthick*2+TJPshadowthick*2)); } else { t=(-TJPzoomamount*parseFloat(obj.style.width)+TJPzoomwidth-TJPborderthick*2-TJPshadowthick*2)/(parseFloat(obj.style.width)-TJPzoomwidth+TJPborderthick*2+TJPshadowthick*2)*(nowx-TJPzoomoffsetx*(TJPzoomwidth-2*TJPborderthick-2*TJPshadowthick)) } stage.getElementsByTagName('div')[1].getElementsByTagName('img')[0].style.marginLeft=t+'px';
 if(stage.getElementsByTagName('div')[1].getElementsByTagName('img')[1]) {  stage.getElementsByTagName('div')[1].getElementsByTagName('img')[1].style.marginLeft=t+'px'; }}
function TJPinit() { TJPadjustx=0; TJPadjusty=0; if(navigator.userAgent.indexOf('MSIE')>-1) {TJPadjustx=2;TJPadjusty=2;} if(navigator.userAgent.indexOf('Opera')>-1) {TJPadjustx=0; TJPadjusty=0;} if(navigator.userAgent.indexOf('Safari')>-1) {TJPadjustx=1; TJPadjusty=2;}}
// configuration - do not modify the following, instead read the behaviors.html file in the tutorial!var TJPon=new Array();var TJPadjustx,TJPadjusty;var TJPmouse=0; var TJPmousey; var TJPmousex;var TJPloading='<div style="background-color: #ffeb77; color: #333333; padding:2px; font-family: verdana,arial,helvetica; font-size: 10px;">Loading...<\/div>';
var TJPzoomwidth=160;var TJPzoomheight=120;var TJPzoomratio;var TJPzoomwindowlock=0;
var TJPzoomoffsetx=.5;var TJPzoomoffsety=.5;var TJPzoomoffset;
var TJPzoomamount=4;var TJPzoomamountmax=12;var TJPzoomamountmin=1;
var TJPborderthick=2;var TJPbordercolor='#888888';
var TJPshadowthick=8;var TJPshadow='dropshadow/';
TJPinit();
// TJPzoom 3 * János Pál Tóth// Docs @ http://valid.tjp.hu/tjpzoom/ // News @ http://tjpzoom.blogspot.com///]]></script>

en htm

 

 

 

<div style="height:300px;"><div style="position:absolute;"><img src="url-de-la-imagen" onmouseover="TJPzoom(this);"style="border:0;padding:0;"/></div></div>

Otro efecto zoom de imagenes con clic para maximizar y minimizar

En head

 

 

 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>  //<![CDATA[  /* jQuery Image Magnify script v1.1  * This notice must stay intact for usage  * Author: Dynamic Drive at http://www.dynamicdrive.com/  * Visit http://www.dynamicdrive.com/ for full source code 
 * Nov 16th, 09 (v1.1): Adds ability to dynamically apply/reapply magnify effect to an image, plus magnify to a specific width in pixels.  * Feb 8th, 11 (v1.11): Fixed bug that caused script to not work in newever versions of jQuery (ie: v1.4.4)  */ 
 jQuery.noConflict() 
 jQuery.imageMagnify={   dsettings: {    magnifyby: 3, //default increase factor of enlarged image    duration: 500, //default duration of animation, in millisec    imgopacity: 0.2 //opacify of original image when enlarged image overlays it    },   cursorcss: 'url(magnify.cur), -moz-zoom-in', //Value for CSS's 'cursor' attribute, added to original image   zIndexcounter: 100, 
  refreshoffsets:function($window, $target, warpshell){    var $offsets=$target.offset()    var winattrs={x:$window.scrollLeft(), y:$window.scrollTop(), w:$window.width(), h:$window.height()}    warpshell.attrs.x=$offsets.left //update x position of original image relative to page    warpshell.attrs.y=$offsets.top    warpshell.newattrs.x=winattrs.x+winattrs.w/2-warpshell.newattrs.w/2    warpshell.newattrs.y=winattrs.y+winattrs.h/2-warpshell.newattrs.h/2    if (warpshell.newattrs.x<winattrs.x+5){ //no space to the left?     warpshell.newattrs.x=winattrs.x+5    }    else if (warpshell.newattrs.x+warpshell.newattrs.w > winattrs.x+winattrs.w){//no space to the right?     warpshell.newattrs.x=winattrs.x+5    }    if (warpshell.newattrs.y<winattrs.y+5){ //no space at the top?     warpshell.newattrs.y=winattrs.y+5    }   }, 
  magnify:function($, $target, options){    var setting={} //create blank object to store combined settings    var setting=jQuery.extend(setting, this.dsettings, options)    var attrs=(options.thumbdimensions)? {w:options.thumbdimensions[0], h:options.thumbdimensions[1]} : {w:$target.outerWidth(), h:$target.outerHeight()}    var newattrs={}    newattrs.w=(setting.magnifyto)? setting.magnifyto : Math.round(attrs.w*setting.magnifyby)    newattrs.h=(setting.magnifyto)? Math.round(attrs.h*newattrs.w/attrs.w) : Math.round(attrs.h*setting.magnifyby)    $target.css('cursor', jQuery.imageMagnify.cursorcss)    if ($target.data('imgshell')){     $target.data('imgshell').$clone.remove()     $target.css({opacity:1}).unbind('click.magnify')    }    var $clone=$target.clone().css({position:'absolute', left:0, top:0, visibility:'hidden', border:'1px solid gray', cursor:'pointer'}).appendTo(document.body)    $clone.data('$relatedtarget', $target) //save $target image this enlarged image is associated with    $target.data('imgshell', {$clone:$clone, attrs:attrs, newattrs:newattrs})    $target.bind('click.magnify', function(e){ //action when original image is clicked on     var $this=$(this).css({opacity:setting.imgopacity})     var imageinfo=$this.data('imgshell')     jQuery.imageMagnify.refreshoffsets($(window), $this, imageinfo) //refresh offset positions of original and warped images     var $clone=imageinfo.$clone     $clone.stop().css({zIndex:++jQuery.imageMagnify.zIndexcounter, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h, opacity:0, visibility:'visible', display:'block'})     .animate({opacity:1, left:imageinfo.newattrs.x, top:imageinfo.newattrs.y, width:imageinfo.newattrs.w, height:imageinfo.newattrs.h}, setting.duration,     function(){ //callback function after warping is complete      //none added      }) //end animate    }) //end click    $clone.click(function(e){ //action when magnified image is clicked on     var $this=$(this)     var imageinfo=$this.data('$relatedtarget').data('imgshell')     jQuery.imageMagnify.refreshoffsets($(window), $this.data('$relatedtarget'), imageinfo) //refresh offset positions of original and warped images     $this.stop().animate({opacity:0, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h},  setting.duration,     function(){      $this.hide()      $this.data('$relatedtarget').css({opacity:1}) //reveal original image     }) //end animate    }) //end click   }  }; 
 jQuery.fn.imageMagnify=function(options){   var $=jQuery   return this.each(function(){ //return jQuery obj    var $imgref=$(this)    if (this.tagName!="IMG")     return true //skip to next matched element    if (parseInt($imgref.css('width'))>0 && parseInt($imgref.css('height'))>0 || options.thumbdimensions){ //if image has explicit width/height attrs defined     jQuery.imageMagnify.magnify($, $imgref, options)    }    else if (this.complete){ //account for IE not firing image.onload     jQuery.imageMagnify.magnify($, $imgref, options)    }    else{     $(this).bind('load', function(){      jQuery.imageMagnify.magnify($, $imgref, options)     })    }   })  }; 
 jQuery.fn.applyMagnifier=function(options){ //dynamic version of imageMagnify() to apply magnify effect to an image dynamically   var $=jQuery   return this.each(function(){ //return jQuery obj    var $imgref=$(this)    if (this.tagName!="IMG")     return true //skip to next matched element      }) 
 }; 

 //** The following applies the magnify effect to images with class="magnify" and optional "data-magnifyby" and "data-magnifyduration" attrs  //** It also looks for links with attr rel="magnify[targetimageid]" and makes them togglers for that image 
 jQuery(document).ready(function($){   var $targets=$('.magnify')   $targets.each(function(i){    var $target=$(this)    var options={}    if ($target.attr('data-magnifyto'))     options.magnifyto=parseFloat($target.attr('data-magnifyto'))    if ($target.attr('data-magnifyby'))     options.magnifyby=parseFloat($target.attr('data-magnifyby'))    if ($target.attr('data-magnifyduration'))     options.duration=parseInt($target.attr('data-magnifyduration'))    $target.imageMagnify(options)   })   var $triggers=$('a[rel^="magnify["]')   $triggers.each(function(i){    var $trigger=$(this)    var targetid=$trigger.attr('rel').match(/\[.+\]/)[0].replace(/[\[\]']/g, '') //parse 'id' from rel='magnify[id]'    $trigger.data('magnifyimageid', targetid)    $trigger.click(function(e){     $('#'+$(this).data('magnifyimageid')).trigger('click.magnify')     e.preventDefault()    })   })  }) 

 /***********************************************  * jQuery Image Magnify- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)  * This notice MUST stay intact for legal use  * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more  ***********************************************/ 
 //]]> </script>


en htm

 

 

 

<img src="http://urldelaimagen.jpg" class="magnify" style="width:225px; height:150px" />

redes sociales con efectos

En head

 

 

 

<!--disfruta-ayuda-comparte.jimdo.com--><style>#tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}#tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}#tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}#tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://lh4.googleusercontent.com/-l0EYSSxxuc8/UFd37FdwjzI/AAAAAAAAG2E/CDbmwPO4haA/s800/sprites.png) no-repeat;  background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;  box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap;  line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}#tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt);  line-height:32px;}#tbisose .icon{overflow:hidden; color:#fafafa;}#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}#tbisose .rss{ width:32px;  height:32px;  background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}#tbisose li:hover .icon, .touch #tbisose li .icon{width:210px;}.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);}.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);}.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);}.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);}</style>

en htm

 

 

 

<ul id="tbisose"><li data-alt="Sigueme en Facebook"><a class="icon facebook" href="url facebook">Sigueme en Facebook</a></li><li data-alt="Sigueme en Twitter"><a class="icon twitter" href="url  twitter">Sigueme en Twitter</a></li><li data-alt="Sigueme en Google+"><a class="icon googleplus" href="url google plus">Sigueme en Google+</a></li><li data-alt="Sigueme en Pinterest"><a class="icon pinterest" href="url pinterest">Sigueme en Pinterest</a></li><li data-alt="Suscribete a RSS"><a class="icon rss" href="url del feeds">Suscribete a mi RSS</a></li></ul><!--disfruta-ayuda-comparte.jimdo.com-->

antes y despues:pasar el cursor por la imagen para ver el efecto

En head

 

 

 

<!-- disfruta-ayuda-comparte.jimdo.com--><style type="text/css">/*<![CDATA[*/
a.nowandthen{position:relative;display: block;overflow:hidden;cursor: pointer;width: 450px; /* set width of image container */height: 434px; /* set height of image container */}
a.nowandthen img{position:absolute;left:0;top:0;width: 100%;height: 100%;-moz-transition: all 0.5s ease; /* enable transition */-webkit-transition: all 0.5s ease;-o-transition: all 0.5s ease;-ms-transition: all 0.5s ease;transition: all 0.5s ease;z-index: 2;clip: rect(0,650px,434px,0); /* clip values should be rect(0,image_width,image_height,0) */}

a.nowandthen img:nth-of-type(2){ /* hide "after" image beneath "before" so it's initially out of view */z-index: 1;}

a.nowandthen:hover img:nth-of-type(1){ /* clip "before" image to reveal "after" */clip: rect(0,0,434px,0); /* clip values should be rect(0,0,image_height,0) */opacity: 0;}
a.nowandthen.alt{width: 300px; /* set width of image container */height: 354px; /* set height of image container */}
a.nowandthen.alt img{clip: rect(0,300px,354px,0); /* clip values should be rect(0,image_width,image_height,0) */}
a.nowandthen.alt:hover img:nth-of-type(1){clip: rect(0,0,354px,0); /* clip values should be rect(0,0,image_height,0) */}
/*]]>*/</style>

en htm

 

Recuerda sustituir la imagen por la tuya

 

 

 

<!-- disfruta-ayuda-comparte.jimdo.com--><a class="nowandthen"><img src="http://img526.imageshack.us/img526/8063/beforejt.jpg" alt="" /> <img src="http://img52.imageshack.us/img52/75/afteruc.jpg" alt="" /></a>

Protected by Copyscape Web Plagiarism Check