Skip to content

Instantly share code, notes, and snippets.

@e-river
Last active June 8, 2016 05:47
Show Gist options
  • Save e-river/25e8278e1895cec9998a to your computer and use it in GitHub Desktop.
Save e-river/25e8278e1895cec9998a to your computer and use it in GitHub Desktop.
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