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


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



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.