Answered by:
mouseover event in Sharepoint 2013

Question
-
Hi all,
I have been trying to do a button rollover effect in Sharepoint 2013. I have my 2 different .png files located in site assets. The code I have been working with is ...
<a href="https://linktopage.aspx" onmouseover="document.rollover.src=https://linktorolloverimage.png" onmouseout="document.rollover.src=https://linktomainbuttonimage.png"><img src="linktomainbuttonimage" border=0 name="rollover"></a>
I add a content editor web part>click on edit web part>click here to add new content>edit source and then paste the above code in.
I get the image and it goes to the appropriate link but the rollover does not happen. Not sure what I have been missing. I have read various post about this but unfortunetly it does not make a whole lot of sense to me. Is there additional code that I need to add to the "body" if so does the "body" refer to that page and just editing the source there as well as in the content editor? Any help would be greatly appreciated.
- Moved by Hemendra Agrawal Thursday, July 3, 2014 4:53 AM SP 2013
Saturday, June 14, 2014 4:45 PM
Answers
-
You need to place the onmouseover and onmouseout on the <IMG>, not the <A> (link). Check this post: http://helplogger.blogspot.com/2012/05/create-rollover-image-effect-change.html
<a href="https://linktopage.aspx"><img src="linktomainbuttonimage" border=0 name="rollover" onmouseover="document.rollover.src=https://linktorolloverimage.png" onmouseout="document.rollover.src=https://linktomainbuttonimage.png"></a>
Brandon Atkinson
Blog: http://sharepointbrandon.com- Proposed as answer by sk2014 Monday, June 16, 2014 9:42 AM
- Marked as answer by Hemendra Agrawal Thursday, July 3, 2014 4:52 AM
Sunday, June 15, 2014 1:01 AM
All replies
-
You need to place the onmouseover and onmouseout on the <IMG>, not the <A> (link). Check this post: http://helplogger.blogspot.com/2012/05/create-rollover-image-effect-change.html
<a href="https://linktopage.aspx"><img src="linktomainbuttonimage" border=0 name="rollover" onmouseover="document.rollover.src=https://linktorolloverimage.png" onmouseout="document.rollover.src=https://linktomainbuttonimage.png"></a>
Brandon Atkinson
Blog: http://sharepointbrandon.com- Proposed as answer by sk2014 Monday, June 16, 2014 9:42 AM
- Marked as answer by Hemendra Agrawal Thursday, July 3, 2014 4:52 AM
Sunday, June 15, 2014 1:01 AM -
Thank you for posting the code. On my SharePoint site, I can get the image to work while previewing but it stops working and will not mouseover once I save. Is there anything I can do? Thank you very much for any assistance.
Thursday, July 24, 2014 5:02 PM -
Dalinda, I am having the same issue. SharePoint 2013 on Office 365 strips out all scripting. Even when I embed the code using
Insert --> Embed Code
I've been hunting a solution for this for awhile and I am stumped.
Saturday, October 4, 2014 12:15 AM