将图像按钮滚动到所见即所得编辑器，如TinyMCEFCKEditorKupu

Posted 2021-02-26

/**
 * 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;			
		});
	});
}