Resaltar productos con MooTools

Publicado por Nikko el dia 21 Jul 2008 - Guardado en Diseño Web, Programacion, Recursos Web, Scripts Leido 1,707 Veces

prowerful.jpg

Create a Simple, Powerful Product Highlighter with – Una bonita técnica que podremos utilizar en nuestros proyectos web para crear simples y potentes secciones resaltadas con MooTools. Este tutorial te permitirá conocer un poco esta técnica y las ventajas de utilizar MooTools.

Ver Demo - Descarga - Mas info  Create a Simple, Powerful Product Highlighter with MooTools

Instalacion:

JavaScript:
<script src="mootools.js" type="text/javascript"></script>

<script type="text/javascript" charset="utf-8"> window.addEvent(\'domready\', function() {

// Create variables (in this case two arrays) representing our bubbles and pages    var myPages = $$(\'.page\');   var myBubbles = $$(\'.bubble\');

// Set bubbles opacity to zero so they\'re hidden initially and toggle visibility on for their container        myBubbles.setStyle(\'opacity\', 0);    $(\'bubbleWrap\').setStyle(\'visibility\',\'visible\')

// Add our events to the pages  myPages.each(function(el, i) {     el.set(\'morph\', {link : \'cancel\'});

el.addEvents({    \'mouseenter\': function() {                 myBubbles[i].morph({                \'opacity\' : 1,           \'margin-top\' : \'-15px\'             });          },             \'mouseleave\' : function() {         myBubbles[i].morph({      \'opacity\' : 0,                     \'margin-top\' : 0     });    }           });    }); });

</script>

un poco de estilo

CSS:
<style type="text/css" media="screen">  img { border: 0; }    #siteWrap {       margin: 287px auto 0 auto;         width: 642px;     height: 345px;       position: relative;       background: transparent url(images/bg_pageWrap.jpg) no-repeat top left;    }  #pageWrap {   position: absolute;   z-index: 5;   top: 138px;   left: 134px;

}   #psdPage {       margin-right: 19px;       float: left;     cursor: pointer;  }    #netPage {         margin-right: 20px;         float: left;       cursor: pointer;   }      #audioPage {       float: left;     cursor: pointer;  }    #bubbleWrap {   position: absolute;   z-index: 10;         left: 158px;       top: 30px;     }   .bubble {         position: absolute;     }   .clear {   clear: both;     } </style>

contenido

HTML:
<p id="siteWrap">
<p id="bubbleWrap" style="visibility: hidden">
<p class="bubble"><img src="images/bubble_PSD.jpg" alt="PSDTUTS" /></p>
<p class="bubble"><img src="images/bubble_NET.jpg" alt="NETTUTS" /></p>
<p class="bubble"><img src="images/bubble_AUDIO.jpg" alt="AUDIOTUTS" /></p>

<p id="pageWrap">
<p class="page" id="psdPage"><a href="#"><img src="images/page_PSD.jpg" alt="PSDTUTS" /></a></p>
<p class="page" id="netPage"><a href="#"><img src="images/page_NET.jpg" alt="NETTUTS" /></a></p>
<p class="page" id="audioPage"><a href="#"><img src="images/page_AUDIO.jpg" alt="AUDIOTUTS" /></a></p>

Mas info Create a Simple, Powerful Product Highlighter with MooTools

Publicado por Nikko

Soy un diseñador y desarrollador web situado en la Patagonia Argentina. Disfruto testear y conocer nuevos scripts, además de experimentar nuevas técnicas tanto en impresión como en desarrollo web. Como propietario de Patagonia Creative, divido mi tiempo entre la empresa, trabajos para Pymes, ONG y Gob. ////////// Facebook / linkedin / xing

Nikko ha publicado 1142 posts en Xyberneticos - Leer todos mis articulos Nikko

  1. Galo - Gravatar

    Galo

    21-07-2008

    Permalink

    Excelente!. Lo voy a ir probando para aplicarlo a un proyecto que estoy haciendo. Creo que me va a venir de maravillas!. Muchas gracias

  2. Leandro17 - Gravatar

    Leandro17

    21-07-2008

    Permalink

    Excelente js, lo estaba buscando desde hace tiempo ya que habia visto algo así en una web japonesa...

    saludos

  3. [...] Via: Xyberneticos [...]

  4. [...] - Resaltar productos con MooTools saved by TotallyEmilyOsment2008-10-01 - Latest title for the Xbox video games console shows little [...]



Nombre: (Necesario)

E-mail: (Necesario)

Website:

Escribe tu comentario: