Still on the theme of rollovers and keeping the js unobtrusive. On occasion our contributors need to plugin a rollover effect on an image. I wrote an accompanying js/jquery solution to unobtrusively seek out the rollover image, preload the active image and implement the hover function.
example http://www.business.curtin.edu.au/business/future-students (which course[yellow] and which career [red] buttons mid-right)
html:
<img src="/images/btn08-fs-which-course02-off.jpg" border="0" alt="Which course?" width="144" height="135" class="rollover" />
js:
/* create a lookback for js regex */
String.prototype.reverse = function () { return this.split('').reverse().join('');};
/* jquery inside $(document).ready*/
jQuery('[class*=rollover]').each(function(){
src_path = $(this).attr("src");
this.off = new Image();
this.on = new Image();
this.off = $(this).attr("src");
this.on = $(this).attr("src").reverse().replace(/ffo(?=(-_\.))/g, '!ffo-ecalper!').reverse().replace(/!replace-off!(?=((-_\.)))/gi, "on");
$(this).hover(function(e){
this.src = this.on;
},function(e){
this.src = this.off;
});
});
Friday, July 3, 2009
Subscribe to:
Post Comments (Atom)

0 comments:
Post a Comment