jQuery Rollover for If there are any strings after the extension of image
/* | |
Usage: | |
HTML | |
<img class="js-rollover"> | |
JS | |
require jQuery | |
http://jquery.com/download/ | |
$(function(){ | |
new Rollover().load(); | |
}); | |
*/ | |
function Rollover(){ | |
this.target = $('.js-rollover'); | |
this.regExp = /^(.+_).\.(png|jpe?g|gif)|;\D+\W\w+\.\w+/i; | |
} | |
Rollover.prototype.load = function() { | |
var self = this; | |
self.target.on('mouseenter mouseleave touchstart touchend', $.proxy(self.event, self)); | |
}; | |
Rollover.prototype.event = function(e){ | |
var self = this; | |
switch (e.type) { | |
case 'mouseenter': | |
self.enter(e.currentTarget); | |
break; | |
case 'mouseleave': | |
self.leave(e.currentTarget); | |
break; | |
case 'touchstart': | |
self.enter(e.currentTarget); | |
break; | |
case 'touchend': | |
self.leave(e.currentTarget); | |
break; | |
} | |
}; | |
Rollover.prototype.enter = function(target) { | |
var self = this; | |
$(target).attr('src', $(target).attr('src').replace(self.regExp, '$1o.$2')); | |
}; | |
Rollover.prototype.leave = function(target) { | |
var self = this; | |
$(target).attr('src', $(target).attr('src').replace(self.regExp, '$1n.$2')); | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment