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:
<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
} #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
<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
Loading ...
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
Leandro17
21-07-2008
Permalink
Excelente js, lo estaba buscando desde hace tiempo ya que habia visto algo así en una web japonesa...
saludos
Resaltar productos con MooTools — Simplemente… Nebel
21-07-2008
Permalink
[...] Via: Xyberneticos [...]
Websites tagged "instalacion" on Postsaver
21-07-2008
Permalink
[...] - Resaltar productos con MooTools saved by TotallyEmilyOsment2008-10-01 - Latest title for the Xbox video games console shows little [...]