Advanced Search

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

/ Published in: JavaScript
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /**
  2.  * The following jQuery snippets allows use of roll over image effects in
  3.  * WYSIWYG HTML editors such as TinyMCe, FCKEditor and Kupu.
  4.  * 
  5.  * 
  6.  * 
  7.  * Criteria which must be met:
  8.  * 
  9.  * 1) This javascript is linked in
  10.  * 
  11.  * 2) Image has two versions with URLs lik
  12.  * 
  13.  *    - images/my_button.gif
  14.  *    
  15.  *    - images/my_button_rollover.gif
  16.  *    
  17.  * 
  18.  * 
  19.  * 3) You will have WYSIWYG editor style Rollover image link (a.image-button-link) created
  20.  * 
  21.  * Creation of a button in WYSIWYG editor:
  22.  * 
  23.  * - Upload my_button.gif and my_button_rollover.gif to your site
  24.  * 
  25.  * - Place my_button.gif image to the document in your WYSIWYG editor
  26.  * 
  27.  * - Click image, make a link of it
  28.  * 
  29.  * - Apply style "Rollover image" to the link
  30.  * 
  31.  * - Reload the page
  32.  * 
  33.  * When the page is loaded, this snippet adds and loads hidden rollover
  34.  * button images. 
  35.  * 
  36.  * 
  37.  * 
  38.  */function bootstrapImageButtonRollOvers() {
  39. 	jq("a.image-button-link").each( function() {
  40. 		var t= jq(this);		
  41.  
  42. 		var img = t.find("img");
  43.  
  44. 		var imageSrc= img.attr("src");
  45.  
  46. 		// Construct URLs
  47. 		var hoverSrc = imageSrc;		
  48.  
  49. 		var	filename = imageSrc
  50. 		var splitted = filename.split(".gif");
  51. 		hoverSrc = splitted[0] + "_rollover.gif" + splitted[1]; 
  52.  
  53. 		// Create hidden hover image and roll over image holders
  54. 		var hoverButton = jq('<img src="' + hoverSrc + '" style="display:none" class="hover-image">');
  55.  
  56. 		hoverButton.insertBefore(img);
  57.  
  58. 		// Hide src image
  59. 		img.addClass("normal-image");
  60.  
  61. 		var normalImage = img;
  62. 		var hoverImage = t.find(".hover-image");
  63.  
  64. 		t.bind("mouseenter", function(e) {
  65. 			normalImage.css("display", "none");
  66. 			hoverImage.css("display", "inline");
  67. 			return true;
  68. 		});
  69.  
  70. 		t.bind("mouseleave", function(e) {
  71. 			normalImage.css("display", "inline");
  72. 			hoverImage.css("display", "none");		
  73. 			return true;			
  74. 		});
  75. 	});
  76. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.