none
Mouseover image change RRS feed

  • Question

  • This there no way within SharePoint online/2013 to do simple mouse over image changes?

    In CSS in HTML this would work:

    .myimg { 
        width:80%;
        height:200px;
        background: url(/sites/x/SiteAssets/CIC/5.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .myimg:hover { 
        background: url(/sites/x/SiteAssets/CIC/5a.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    or 

    <a href=""><img src="" border=0 name="rollover" onmouseover="document.rollover.src=onmouseout="document.rollover.src=

    But no matter how I put this in SharePoint 2013, directly edit the html source or do an embed or content editor webpart, no rollover seems to work.  

    Is this the right forum for this?

    Wednesday, April 19, 2017 12:56 PM

All replies

  • Hi Edward,

    I tested a simple code in my environment, however it worked fine.

    You can test it in your environment to see what happens.

    <html>
    <head>
    <style>
    .myimg { 
        width:80%;
        height:200px;
        background: url(/sites/x/SiteAssets/CIC/5.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .myimg:hover { 
        background: url(/sites/x/SiteAssets/CIC/5a.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    </style>
    </head>
    <body>
    <div class=”myimg”>Test</div>
    </body>
    </html>

    You can also share your whole code here for further research.

    Best Regards,

    Victoria


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com


    Friday, April 21, 2017 9:48 AM
    Moderator
  • Hi,

    Please check below HTML/CSS code block, in this css used to change the background of div:

      <style>
        #divImage {
       background-image: url('http://dummyimage.com/100x100/000/fff');
       height: 70px;
       width: 120px;
    }
    
    #divImage:hover {
       background-image: url('http://dummyimage.com/100x100/eb00eb/fff');
    }
      </style>
      <div id="divImage"></div>


    Thanks, Amit Kumar, LinkedIn Profile ** My Blog
    Please click "Mark As Answer" if this post solves your problem or "Vote As Helpful" if it was useful

    Friday, April 21, 2017 12:42 PM
  • Hi Edward,

    I am checking to see how things are going there on this issue. Please let us know if you would like further assistance.

    Best Regards,

    Victoria


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Tuesday, April 25, 2017 1:50 AM
    Moderator
  • Hi Victoria

    I have tried inserting your code on our SharePoint 2013 site but it strips out all the images.

    The code now becomes the below after I saved it:

    <style unselectable="on">
    .myimg {
    width:80%;
    height:200px;
    background-repeat:no-repeat;
    }

    .myimg:hover {
    background-repeat:no-repeat;
    }
    </style>

    <div class="”myimg”" unselectable="on">Test</div>

    Please assist.

    Wednesday, February 27, 2019 5:50 AM
  • Mine is the same... It changes when I save the page

    the code now becomes the below after I saved it:

    <style unselectable="on">
    .myimg {
    width:80%;
    height:200px;
    background-repeat:no-repeat;
    }

    .myimg:hover {
    background-repeat:no-repeat;
    }
    </style>

    <div class="”myimg”" unselectable="on">Test</div>

    Please assist.

    Wednesday, June 12, 2019 9:40 PM