A los titulos que les das a tus imagenes ( title="mi imagen")
se les agrega un estilo fondo negro, oculto y deslizante.
son tres estilos y es super facil de hacerlo.
Lo primero es copiar el siguiente codigo Javascript dentro de el <head></head>
de tu pagina.
<script type="text/javascript" src="http://notoyontoy.site40.net/Js/jquery-1.4.min.js">
</script>
<script type="text/javascript" src="http://notoyontoy.site40.net/Js/jquery.dropcaptions.js">
</script>
<script type="text/javascript" src="http://notoyontoy.site40.net/Js/jquery-easing-1-3.js">
</script>
<script type="text/javascript">
//<![CDATA[
var e = jQuery.noConflict();
e(document).ready(function() {
e('.autocap').dropCaptions({
showSpeed: 1000,
showOpacity: .85,
hideOpacity: .25,
showEasing: 'easeOutBounce',
showDelay: 500,
hideDelay: 1000
});
e('.blacksheep').dropCaptions();
e('.bottom').dropCaptions({
showSpeed: 2000,
hideSpeed: 1000,
showOpacity: 1,
hideOpacity: 0,
showEasing: 'easeOutElastic',
hideEasing: 'easeInQuint',
hideDelay: 2000
});
});
//]]>
</script>
Y tambien el estilo CSS en el mismo lugar.
<style type="text/css">
/*<![CDATA[*/
.caption {
background: #333;
border-right: 1px solid #666;
border-bottom: 1px solid #666;
border-left: 1px solid #666;
border-top: 1px solid #666;
font-family: Verdana;
font-size: 11px;
padding: 4px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
color: #eee;
}
/*]]>*/
</style>
Ahora para el primer ejemplo tenemos el siguiente codigo:
<img title="Feliz navidad les desea Notoyontoy.jimdo.com que se la pasen muy bien con sus seres queridos." src="URL DE TU IMAGEN" width="400" height="300" class="blacksheep" />
Para el segundo ejemplo es este otro:
<img title="Feliz navidad les desea Notoyontoy.jimdo.com que se la pasen muy bien con sus seres queridos." src="URL DE TU IMAGEN" width="400" height="300" class="autocap" />
y para el ultimo este:
<img title="Feliz navidad les desea Notoyontoy.jimdo.com que se la pasen muy bien con sus seres queridos." src="URL
DE TU IMAGEN" width="400" height="300" class="bottom" />
Si notan los que nos dice que forma sera el titulo (title) es la etiqueta class=" ? "
bien por ultimo deben saber que deben cambiar esto:
width="400" height="300" (ancho y alto)
depende al tamaño de tu imagen.
Escribir comentario
nitroplantillas (lunes, 31 diciembre 2012 21:22)
muy buen truco amigo me gusta tu nueva pa´gian
Juicer Review (domingo, 05 mayo 2013 00:27)
This article was exactly what I was in search of!