Crear un peeling (esquina doblada)

Pelar una página web es muy divertido de hacer y lo más fácil es que llamar la atención de sus usuarios.

Usted puede utilizar para llamar la atención sobre un artículo caliente en su propio sitio web.

Aquí voy a explicar cómo crear un efecto de ese tipo en su sitio web.

Utiliza Flash y JavaScript, y es muy fácil de instalar.

Una demostración en vivo para el efecto puede ser visto en la esquina superior derecha.

Cuando pasa el ratón sobre la imagen, se va a ampliar y revelar más información.

Para lograrlo, simplemente ejecuta los siguientes pasos para insertar un peeling esquina en su sitio web.

var jaaspeel = new Object();
jaaspeel.ad_url = escape('http://loseasi.blogspot.com');
jaaspeel.small_path = ' http://img5.xooimage.com/files/7/9/7/small-1e8e2b.swf';
jaaspeel.small_image = escape(' http://img1.xooimage.com/files/a/d/c/tmundo1-1016123.jpg');
jaaspeel.small_width = '100';
jaaspeel.small_height = '100';
jaaspeel.small_params = 'ico=' + jaaspeel.small_image;
jaaspeel.big_path = ' http://img26.xooimage.com/files/5/7/a/large-1016114.swf';
jaaspeel.big_image = escape(' http://img5.xooimage.com/files/8/6/a/mundo-1016120.jpg');
jaaspeel.big_width = '600';
jaaspeel.big_height = '600';
jaaspeel.big_params = 'big=' + jaaspeel.big_image + '&ad_url=' + jaaspeel.ad_url;
function sizeup987(){
document.getElementById('jcornerBig').style.top = '0px';
document.getElementById('jcornerSmall').style.top = '-1000px';
}
function sizedown987(){
document.getElementById("jcornerSmall").style.top = "0px";
document.getElementById("jcornerBig").style.top = "-1000px";
}
jaaspeel.putObjects = function () {
// <jcornerSmall>
document.write('<div id="jcornerSmall" style="position:absolute;width:'+ jaaspeel.small_width +'px;height:'+ jaaspeel.small_height +'px;z-index:9999;right:0px;top:0px;">');
// object
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"');
document.write(' codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"');
document.write(' id="jcornerSmallObject" width="'+jaaspeel.small_width+'" height="'+jaaspeel.small_height+'">');
// object params
document.write(' <param name="allowScriptAccess" value="always"/> ');
document.write(' <param name="movie" value="'+ jaaspeel.small_path +'?'+ jaaspeel.small_params +'"/>');
document.write(' <param name="wmode" value="transparent" />');
document.write(' <param name="quality" value="high" /> ');
document.write(' <param name="FlashVars" value="'+jaaspeel.small_params+'"/>');
// embed
document.write('<embed src="'+ jaaspeel.small_path + '?' + jaaspeel.small_params +'" name="jcornerSmallObject" wmode="transparent" quality="high" width="'+ jaaspeel.small_width +'" height="'+ jaaspeel.small_height +'" flashvars="'+ jaaspeel.small_params +'" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>');
document.write('</object></div>');
document.write('</script>');
// </jcornerSmall>
// <jcornerBig>
document.write('<div id="jcornerBig" style="position:absolute;width:'+ jaaspeel.big_width +'px;height:'+ jaaspeel.big_height +'px;z-index:9999;right:0px;top:0px;">');
// object
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"');
document.write(' codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"');
document.write(' id="jcornerBigObject" width="'+ jaaspeel.big_width +'" height="'+ jaaspeel.big_height +'">');
// object params
document.write(' <param name="allowScriptAccess" value="always"/> ');
document.write(' <param name="movie" value="'+ jaaspeel.big_path +'?'+ jaaspeel.big_params +'"/>');
document.write(' <param name="wmode" value="transparent"/>');
document.write(' <param name="quality" value="high" /> ');
document.write(' <param name="FlashVars" value="'+ jaaspeel.big_params +'"/>');
// embed
document.write('<embed src="'+ jaaspeel.big_path + '?' + jaaspeel.big_params +'" id="jcornerBigEmbed" name="jcornerBigObject" wmode="transparent" quality="high" width="'+ jaaspeel.big_width +'" height="'+ jaaspeel.big_height +'" flashvars="'+ jaaspeel.big_params +'" swliveconnect="true" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>');
document.write('</object></div>');
// </jcornerBig>
setTimeout('document.getElementById("jcornerBig").style.top = "-1000px";',1000);
}
jaaspeel.putObjects();

Ver peel.js

Seleccione el código anterior y guárdelo como peel.js

Ahora edite el archivo con tu editor de programación (el Bloc de notas también funcionará).

Buscar la siguiente línea de código:

jaaspeel.ad_url = escape('http://loseasi.blogspot.com');

Cambie el valor entre las comillas que esta en rojo(en este ejemplo es 'http://loseasi.blogspot.com') a la página web que desea que su esquina para volver a dirigir, cuando los usuarios hagan clic en él.

Salvar su peel.js archivo.

Como se puede ver en el código JavaScript, este efecto utiliza dos imágenes.

1. tmundo1-1016123.jpg Una imagen de 100x100 px, se utiliza cuando el efecto está inactivo.
2. mundo-1016120.jpg Una imagen de 600x600 px, se mostrará cuando un usuario pasa el ratón por la piel.

En este ejemplo, estoy usando este tmundo1-1016123.jpg y este mundo-1016120.jpg.

Crear sus propias imágenes que se mostrarán en la piel.

Este proyecto utiliza Flash para crear el efecto real.

Ahora añada la siguiente línea a su página web despues de <body>.

<script src='http://img7.xooimage.com/files/c/0/9/peel-101612a.js' type='text/javascript'></script>

Asegúrese de que su fuente (imagen.jpg), (peel.js), (.swf) sean la dirección correcta.

Descargar archivos para modificar y subir a su servidor.

¿Donde puedo alojar mis archivos? Leer aquí.

Ver para ponerlo del lado izquierdo.