/**
 * The following jQuery snippets allows use of roll over image effects in
 * WYSIWYG HTML editors such as TinyMCe, FCKEditor and Kupu.
 * 
 * 
 * 
 * Criteria which must be met:
 * 
 * 1) This javascript is linked in
 * 
 * 2) Image has two versions with URLs lik
 * 
 *    - images/my_button.gif
 *    
 *    - images/my_button_rollover.gif
 *    
 * 
 * 
 * 3) You will have WYSIWYG editor style Rollover image link (a.image-button-link) created
 * 
 * Creation of a button in WYSIWYG editor:
 * 
 * - Upload my_button.gif and my_button_rollover.gif to your site
 * 
 * - Place my_button.gif image to the document in your WYSIWYG editor
 * 
 * - Click image, make a link of it
 * 
 * - Apply style "Rollover image" to the link
 * 
 * - Reload the page
 * 
 * When the page is loaded, this snippet adds and loads hidden rollover
 * button images. 
 * 
 * 
 * 
 */function bootstrapImageButtonRollOvers() {
	jq("a.image-button-link").each( function() {
		var t= jq(this);		
		
		var img = t.find("img");
		
		var imageSrc= img.attr("src");
		
		// Construct URLs
		var hoverSrc = imageSrc;		
		
		var	filename = imageSrc
		var splitted = filename.split(".gif");
		hoverSrc = splitted[0] + "_rollover.gif" + splitted[1]; 
						
		// Create hidden hover image and roll over image holders
		var hoverButton = jq('<img src="' + hoverSrc + '" style="display:none" class="hover-image">');
		
		hoverButton.insertBefore(img);
				
		// Hide src image
		img.addClass("normal-image");

		var normalImage = img;
		var hoverImage = t.find(".hover-image");
								
		t.bind("mouseenter", function(e) {
			normalImage.css("display", "none");
			hoverImage.css("display", "inline");
			return true;
		});

		t.bind("mouseleave", function(e) {
			normalImage.css("display", "inline");
			hoverImage.css("display", "none");		
			return true;			
		});
	});
}

/**
 * The following jQuery snippets allows use of roll over image effects in
 * WYSIWYG HTML editors such as TinyMCe, FCKEditor and Kupu.
 * 
 * 
 * 
 * Criteria which must be met:
 * 
 * 1) This javascript is linked in
 * 
 * 2) Image has two versions with URLs lik
 * 
 *    - images/my_button.gif
 *    
 *    - images/my_button_rollover.gif
 *    
 * 3) The attached CSS styles are in effect
 * 
 * 4) You will have WYSIWYG editor style Rollover image link (a.image-button-link) created
 * 
 * Creation of a button in WYSIWYG editor:
 * 
 * - Upload my_button.gif and my_button_rollover.gif to your site
 * 
 * - Place my_button.gif image to the document in your WYSIWYG editor
 * 
 * - Click image, make a link of it
 * 
 * - Apply style "Rollover image" to the link
 * 
 * - Reload the page
 * 
 * When the page is loaded, this snippet adds and loads hidden rollover
 * button images. 
 * 
 * Needed CSS styles:
 * 
 * 
 * a.image-button-link {
 * 	float: left;
 * }
 * 
 * a.image-button-link img {
 * 	display: inline;
 * 	padding: 0;
 * 	margin: 0;
 * 	margin-right: 12px;
 * }
 * 
 * 
 */
function bootstrapImageButtonRollOvers() {
	jq("a.image-button-link").each( function() {
		var t= jq(this);		
		
		var img = t.find("img");
		
		var imageSrc= img.attr("src");
		
		// Construct URLs
		var hoverSrc = imageSrc;		
		
		var	filename = imageSrc
		var splitted = filename.split(".gif");
		hoverSrc = splitted[0] + "_rollover.gif" + splitted[1]; 
						
		// Create hidden hover image and roll over image holders
		t.append('<img src="' + hoverSrc + '" style="display:none" class="hover-image">');
				
		// Hide src image
		img.addClass("normal-image");

		var normalImage = img;
		var hoverImage = t.find(".hover-image");
								
		t.bind("mouseenter", function(e) {
			normalImage.css("display", "none");
			hoverImage.css("display", "inline");
			return true;
		});

		t.bind("mouseleave", function(e) {
			normalImage.css("display", "inline");
			hoverImage.css("display", "none");		
			return true;			
		});
	});
}

jq(bootstrapImageButtonRollOvers);

Rollover image buttons to WYSIWYG editors like TinyMCE, FCKEditor, Kupu

css, image, link, jquery, button

JavaScript