On Mar 11, 11:18 pm, nwhite <[email protected]> wrote:
> This code is not tested nor optimized but it should address most of the
> issues involved.
>
> var Rollover = new Class({
>
> Implements : [ Options ],
>
> options : {
> over : 'over', // used for changing images
> out : 'out'
> },
>
> initialize : function(selector,options){
>
> this.images = $$(selector); // get rollover images
>
> this.out = this.images.map(function(img){
> return img.get('src'); // get src default
> });
>
> this.over = this.out.map(function(src){
> return src.replace(this.options.out, this.options.over); // map
> over src
> });
>
> new Assets.images(this.over); // load/cache over images
>
> this.images.each(function(img,idx){
> img.addEvents({ // add events
> 'mouseenter' : this.over.bind(this,[img,idx]),
> 'mouseleave' : this.out.bind(this,[img,idx])
> });
> },this);
>
> },
>
> over : function(img,idx){
> img.set('src', this.over[idx]);
> },
>
> out : function(img,idx){
> img.set('src', this.out[idx]);
> }
>
> });
>
Thank you for the help.
I must confess I don't know enough about mootools Class objects to
understand how the above works, or how I should call it. (to me it
looks like it's overwriting the out/over functions with an array??)
However, I tried to implement something similar using functions:
<script language="JavaScript" type="text/javascript">
function pagestart() {
function setupRollOvers(el) {
el.oldSrc = el.src
var namePartsRE = /\.(gif|jpg|jpeg|png)$/i;
var nameParts = el.oldSrc.split(namePartsRE, 2); // FIXME:
Why is
2 needed? Without it, I get an extra empty element on the list.
var nameBase = nameParts[0];
var nameExt = nameParts[1];
el.overSrc = nameBase + "-over." + nameExt;
el.addEvent('mouseenter', function(){ this.src = this.overSrc }
);
el.addEvent('mouseleave', function(){ this.src = this.oldSrc }
);
}
els = $A($$('.nav-img')); // FIXME: Why is $A needed? Without it,
the returned array does not support "each()"
els.each(setupRollOvers);
}
window.addEvent('domready', pagestart);
</script>
The above code seems to work (at least on FF3/winxp) , but there are a
couple of things I don't understand. (Marked as FIXME in the above
code.)
I'd certainly like to use the Class based version... I'm just still
trying to understand it. :)
