I am having trouble making mootools scripts work. I have copied the html, css and scripts for numerous examples, and referenced mootools source, but I cannot get the thing to produce the desired results. I fully admit I am a javascript novice, but have made other scripts work previously.
On one of their external links, I tried to create the sample nav bar , using the following code in dreamweaver, but no love. Can you help me? Thanks. I have attached the version of mootools I am using
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" version="-//W3C//DTD XHTML 1.1//EN" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor,
www.pspad.com"> <title></title>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
var effects = new Array();
window.onload=function(){
var els = document.getElementsByClassName('cool');
for (var i=0; i<els.length; i++){
els[i].id='cool'+i;
effects[els[i].id]=els[i].effect('font-size', {duration: 400, transition: fx.expoOut});
els[i].addEvent('mouseover', function(){effects[this.id].emphasize()});
els[i].addEvent('mouseout', function(){effects[this.id].deemphasize()});
}
};
fx.Style.implement({
emphasize: function(){
this.clearTimer();
this.custom(parseInt(this.el.getStyle('font-size')), 24);
},
deemphasize: function(){
this.clearTimer();
this.custom(parseInt(this.el.getStyle('font-size')), 12);
}
});
</script>
<style>
.cool {
padding:12px;
line-height:48px;
background:#f8f8f8;
font-size:12px;
margin:auto;
vertical-align:middle;
color:#666;
text-decoration:none;
}
.cool:hover {
color:#000;
background:none;
}
#nav {
text-align:center;
}
h1 {
text-align:center;
}
</style>
</head>
<body>
<h1>Sample Nav Bar</h1>
<div id="nav">
<a href="#" class="cool">Link</a><a href="#" class="cool">Link 2</a><a href="#" class="cool">Link 3</a>
</div>
</body>
</html>
