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:

PLAIN TEXT
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

PLAIN TEXT
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

PLAIN TEXT
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