locked
How to add Image rollover to a sharepoint content editor webpart RRS feed

  • Question

  • Hi,

    In a SharePoint content editor webpart i have 5 buttons in a table.  I want to create a image rollover effect so when a user hoovers their mouse overt he image it changes.  Please can you help me do this?

    Thanks,

    Chad

    Monday, March 21, 2011 4:33 PM

Answers

  • You can achieve this by putting custom javascript in content editor webpart along with your buttons. Take a reference of below articles for image rollover using javascript.

    http://www.java-scripts.net/javascripts/Image-Rollover-Script.phtml

    http://www.webdevelopersnotes.com/tips/html/javascript_image_rollovers.php3


    w: http://www.worldofsharepoint.com | t: @sharesandip
    • Marked as answer by Emir Liu Wednesday, March 30, 2011 1:23 AM
    • Unmarked as answer by ChadPatel Thursday, April 14, 2011 2:57 PM
    • Marked as answer by Mike Walsh FIN Thursday, April 14, 2011 3:35 PM
    Monday, March 21, 2011 6:29 PM

All replies

  • You can achieve this by putting custom javascript in content editor webpart along with your buttons. Take a reference of below articles for image rollover using javascript.

    http://www.java-scripts.net/javascripts/Image-Rollover-Script.phtml

    http://www.webdevelopersnotes.com/tips/html/javascript_image_rollovers.php3


    w: http://www.worldofsharepoint.com | t: @sharesandip
    • Marked as answer by Emir Liu Wednesday, March 30, 2011 1:23 AM
    • Unmarked as answer by ChadPatel Thursday, April 14, 2011 2:57 PM
    • Marked as answer by Mike Walsh FIN Thursday, April 14, 2011 3:35 PM
    Monday, March 21, 2011 6:29 PM
  • Hi,

     

    According to your description, this script will change the appearance of an image to another state. This creates a hover effect for images that can be used for navigation links. Necessary tools: some images with 2 states (e.g. 2 different background colours, text colours for the same image) and a text editor for amending the code for your needs.
     
    <!-- rollover images using javascript. -->
    <!-- place the following code  within the <BODY> of your document -->
     
    <script language="javascript" type="text/javascript">
     
    normal_image = new Image();
    normal_image.src = "path/img.gif";
     
    mouseover_image = new Image();
    mouseover_image.src = "path/img2.gif";
     
     
    <!-- repeat the 4 lines above for any subsequent images. -->
     
    function swap(){
    if (document.images){
    for (var x=0;
    x<swap.arguments.length;
    x+=2) {
    document[swap.arguments[x]].src = eval(swap.arguments[x+1] + ".src");
    }
    }
    }
    </script>
     
    <!-- Place this code where you want the rollover buttons to appear.
    Parts to change here: name_of_img (to match <img name="", below), Image variable (e.g mouseover_image/normal_image - to match above code), href element to your documents url and the img name & src. -->
     
    <a href="page.html" onMouseOver="swap('name_of_img','normal_image')" onMouseOut="swap('name_of_img','mouseover_image')"><img name="name_of_img" src="path/img.gif" border="0"></a>
     
    Best Regards
    David Hu

     

    • Marked as answer by Emir Liu Wednesday, March 30, 2011 1:23 AM
    • Unmarked as answer by Mike Walsh FIN Thursday, April 14, 2011 3:35 PM
    Wednesday, March 23, 2011 1:16 AM
  • Thanks Sandip the first URL solved my problem
    Thursday, April 14, 2011 2:54 PM
  • > Thanks Sandip the first URL solved my problem

    In that case *his* was the post that should have been left marked as the answer.

    I've corrected your error in unmarking the Sandip post while leaving the other one marked.

    Moderator


    SP 2010 "FAQ" (mainly useful links): http://wssv4faq.mindsharp.com/default.aspx
    WSS3/MOSS FAQ (FAQ and Links) http://wssv3faq.mindsharp.com/default.aspx
    Both also have links to extensive book lists and to (free) on-line chapters
    Thursday, April 14, 2011 3:35 PM