<HTML>
<HEAD>
<SCRIPT language="JavaScript">
/**
* Button controller
* Controls mouse over and activity state for images.
*/
var ButtonController = function() {
var itm;
for(var i=0;i<arguments.length;i++){
itm = arguments[i];
if(typeof itm == 'object' && itm.constructor) {
this.items.push(itm);
itm.init(this);
}
}
}
ButtonController.prototype = {
items : [],
// Called by buttons added to controller
activate : function(itm) {
if(!this.activeBtn || itm.id !== this.activeBtn.id) {
if(this.activeBtn) {
this.activeBtn.deactivate();
}
itm.activate();
this.activeBtn = itm;
}
},
// Called by buttons added to controller
dumpActive : function() {
this.activeBtn = null;
}
}
/**
* Button
* @cfg: id
* Id of element, but be id of an image tag
*
* @cfg: normalImg
* Image for mouse out state
*
* @cfg: hoverImg
* Image for mouse over state
*/
var Button = function(config) {
this.id = config.id;
this.img = config.normalImg;
this.hover = config.hoverImg;
this.el = document.getElementById(this.id);
}
Button.prototype = {
// private
_delegate : function(func,obj) {
return function() {
return func.apply(obj,[]);
}
},
/**
* called by controller
* @param controller
*/
init : function(ctrl) {
this.ctrl = ctrl;
this.el.src = this.img;
if(this.el.addEventListener) {
this.el.addEventListener('mouseover', this._delegate(this.onMouseOver,this),true);
this.el.addEventListener('mouseout', this._delegate(this.onMouseOut,this),true);
this.el.addEventListener('click', this._delegate(this.onClick,this),true);
} else {
this.el.mouseover = this._delegate(this.onMouseOver,this);
this.el.mouseout = this._delegate(this.onMouseOut,this);
this.el.mouseout = this._delegate(this.onClick,this);
}
},
/**
* toggle over state
* @param {bool} over True to set state to mouse over.
*/
// Public
toggleState : function(over) {
if(over === true) {
this.el.src = this.hover;
} else {
this.el.src = this.img;
}
},
// private
onMouseOver : function() {
this.toggleState(true);
},
// private
onMouseOut : function() {
if(this.active !== true) {
this.toggleState(false);
}
},
// private
onClick : function() {
this.ctrl.activate(this);
this.toggleState(true);
},
// private
activate : function() {
this.active = true;
this.toggleState(true);
},
// public
deactivate : function() {
this.ctrl.dumpActive();
this.active = false;
this.toggleState(false);
}
}
window.onload = function() {
var ctrl = new ButtonController(
new Button({id:'btn1',normalImg:'http://www.google.dk/images/firefox/fox1.gif', hoverImg: 'http://www.google.dk/images/firefox/fox2.gif'}),
new Button({id:'btn2',normalImg:'http://www.google.dk/images/firefox/fox1.gif', hoverImg: 'http://www.google.dk/images/firefox/fox2.gif'})
);
}
</SCRIPT>
</HEAD>
<BODY>
<IMG id="btn1" SRC="../images/story1.gif" name="pic2" width="100" height="25" border="0">
<IMG id="btn2" SRC="../images/story1.gif" name="pic2" width="100" height="25" border="0">
</BODY>
</HTML>Brug det, lær fra det eller smid det ud...
Det er lidt mere avanceret end det du er kommet op med. Det er kun testet i Firefox
God fornøjelse.