make a product highlighter with mootools in Blogger

to make other people pay attention to your products in website or blog ,you can put your products in "eyes-catching" places and add some effect to highlight them .
I've read in Tutsplus.com an article on create a product highlighter effect with mootools . I think it will be very interesting if apply to Blogger . And here is what I've done in Blogspot :


Live demo here

You should take a look on Live demo before starting because this is very interesting effect .
See that ? right,huh?
Now we start .
This effect is based on Mootools framework . So we need to get mootools first . You can get it here ,and upload it to a host .

1,Insert this code after ]]></b:skin>

<script src="your url to mootools.js" type="text/javascript"></script>

this script will embed mootools framework to your template . The red " your url to mootools" is the url of mootools.js file you uploaded in hosting .

2, Add this code before ]]></b:skin>

body {
margin: 0;
padding: 0;
background: #1a1613 url(http://nettuts.s3.amazonaws.com/022_Mootools/images/bg_tutBody.gif) repeat-x;
}
img { border: 0; }
#siteWrap {
margin: 287px auto 0 auto;
width: 642px;
height: 345px;
position: relative;
background: transparent url(http://nettuts.s3.amazonaws.com/022_Mootools/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;
}

This is CSS style of product highlighter effect .You can change it for your need .

3, Add this script before </head>

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


Save your template .
4, Go to Layout . Continue to Page elements .Create a HTML/Javascript widget and paste the code bellow into widget conte

<div id="siteWrap">
<div id="bubbleWrap" style="visibility: hidden;">
<div class="bubble"><img src="http://nettuts.s3.amazonaws.com/022_Mootools/images/bubble_PSD.jpg" alt="PSDTUTS" /></div>
<div class="bubble"><img src="http://nettuts.s3.amazonaws.com/022_Mootools/images/bubble_NET.jpg" alt="NETTUTS" /></div>
<div class="bubble"><img src="http://nettuts.s3.amazonaws.com/022_Mootools/images/bubble_AUDIO.jpg" alt="AUDIOTUTS" /></div>
</div>

<div id="pageWrap">

<div class="page" id="psdPage"><a href="#"><img src="http://nettuts.s3.amazonaws.com/022_Mootools/images/page_PSD.jpg" alt="PSDTUTS" /></a></div>
<div class="page" id="netPage"><a href="#"><img src="http://nettuts.s3.amazonaws.com/022_Mootools/images/page_NET.jpg" alt="NETTUTS" /></a></div>
<div class="page" id="audioPage"><a href="#"><img src="http://nettuts.s3.amazonaws.com/022_Mootools/images/page_AUDIO.jpg" alt="AUDIOTUTS" /></a></div>

</div>
</div>

Save Setting .Ok ,you are done !
In this tip ,you can change image of product ( the code in red) as you want . <div> layout element with class "bubble" is what showed when mouse over .
That's all
Hope this tip helpful to you .