rollover.js

README.md

rollover.js

A要素ロールオーバーを追加したイベント画像置換スクリプト

jQuery(document).ready(function($) {
	// initialize Rollover
	var btn_images = new Rollover({
		item   : $("input.btn_image, a.btn_image"),
		normal : "_off.",
		swapped: "_on."
	});
});

rollover.js

/**
 * Name    : rollover.js
 * Version : 1.0.2
 * Require : jQuery
 *
 * Author  : Sakuya Sugo
 * Date    : 2013/01/17
 * Time    : 18:14
 * Licence : BSD Licence
 *
 * Function:
 * IMG 要素 と INPUT 要素 は this.src を変える
 * A 要素 に包括されている IMG 要素の this.src を変える
 */

(function ($, undefind) {
	/**
	 * Create Classy Function Object
	 * @param config
	 * @constructor
	 */
	var Rollover = function (config) {

		// Set Configs.
		this.DEFAULTS = {
			ITEM   : config.item,
			NORMAL : config.normal,
			OVER   : config.swapped
		};

		// IMG element and INPUT element
		this.IMG_EVENT = {
			NO: "mouseout blur",
			OV: "mouseover focus"
		};

		// Target A Element.
		this.BOX_EVENT = {
			NO: "mouseleave blur",
			OV: "mouseenter focus"
		};

		// 画像切り替え時に call する共通 Method を定義する
		this.onOver = (function (no, ov) {
			return function () { this.src = this.src.replace(no, ov); };
		}(this.DEFAULTS.NORMAL, this.DEFAULTS.OVER));

		this.onOut = (function(no, ov){
			return function () { this.src = this.src.replace(ov, no); };
		}(this.DEFAULTS.NORMAL, this.DEFAULTS.OVER));

		// StartUp Method.
		this.initialize();
	};

	/**
	 * Attach Rollover.prototype
	 */
	(function(){
		var fn = this;

		/**
		 * ロールオーバー時の画像を先にキャッシュする
		 * Rollover Swap Image Cache Pool.
		 * @type {Array} Image Elements.
		 */
		fn.cache = [];

		/**
		 * イベントを bind する Main Method
		 */
		fn.initialize = function () {
			var self = this,
				items = self.DEFAULTS.ITEM;

			// アイテムをパースし要素別にイベントを振り分ける
			// divide element rollover type.
			items.each(function () {
				var el_name = this.nodeName.toLowerCase();

				if (el_name === "img" || el_name === "input") {
					self.bindImageRollover(this);

				} else if (el_name === "a") {
					self.bindBoxRollover(this);
				}
			});
		};

		/**
		 * IMG 要素 もしくは INPUT 要素 にイベントをbindする
		 * @param img
		 */
		fn.bindImageRollover = function (img) {
			var self = this,
				image = $(img);

			// cache
			this.cached(
				img.src.replace(this.DEFAULTS.NORMAL, this.DEFAULTS.OVER)
			);

			// Event binding.
			image.bind(this.IMG_EVENT.OV, function (e) {
				self.onOver.call(this);
			}).bind(this.IMG_EVENT.NO, function (e) {
				self.onOut.call(this);
			});
		};

		/**
		 * A 要素 にイベントをbindする
		 * @param box
		 */
		fn.bindBoxRollover = function (box) {
			var boxs = $(box),
				self = this;

			boxs.each(function () {
				var images = $(this).find("img");

				// cache
				images.each(function () {
					self.cached(
						this.src.replace(self.DEFAULTS.NORMAL, self.DEFAULTS.OVER)
					);
				});

				// Event binding.
				$(this).bind(self.BOX_EVENT.OV, function () {
					images.each(function () {
						self.onOver.call(this);
					});
				}).bind(self.BOX_EVENT.NO, function (e) {
					images.each(function () {
						self.onOut.call(this);
					});
				});
			});
		};

		/**
		 * 画像をキャッシュする
		 * Image Element Cache Method.
		 * @param src
		 */
		fn.cached = function (src) {
			var cache = this.cache,
				i = cache.length;

			cache[i] = document.createElement("img");
			cache[i].src = src;
		};

	}.call(Rollover.prototype));

	window.Rollover = Rollover;
}(jQuery));