none
Image hover in Sharepoint images RRS feed

  • Question

  • Hi All, 

    I am doing a modification with my images stored in SP.

    The image is embedded with link and once click, will be redirected to the site.

    Anyway, my question is how to add a code that will make the image i bit larger during mouseover and make it back to normal size in mouseout.

    here's my code for image:

    <img alt="Asset.png" src="/sites/pub/test/Asset.png" style="margin: 5px; width: 160px; height: 55px;"/></a> 

    Thanks!!

    Monday, January 30, 2017 7:36 AM

All replies

  • Hi

    you can do it use javascript in your page

    function mouseOver()
    {
    var img1 = document.getElementById("img1");
    img1.src ="images/p2.jpg";
    img1.width = "";
    img1.height = "";
    }
    function mouseOut()
    {
    var img1 = document.getElementById("img1");
    img1.src ="images/p1.jpg";
    img1.width = "90";
    img1.height = "110";
    }

    or using css

    <style type="text/css"> 
    .box { width: 150px; border: 1px solid #9325BC; padding: 10px; }
    .box:hover { -moz-box-shadow: 0 0 10px #ccc; -webkit-box-shadow: 0 0 10px #ccc; box-shadow: 0 0 10px #ccc; } 
    </style>
     </head> 
    <body> 
    <div class="box"> Move your mouse here </div> 


    Romeo Donca, Orange Romania (MCSE, MCITP, CCNA) Please Mark As Answer if my post solves your problem or Vote As Helpful if the post has been helpful for you.

    Monday, January 30, 2017 8:50 AM
  • Dear Romeo,

    I appreciate your reply. I cant seem to make it work :( 

    Do I have to removed all the existing embeded codes and replace it with your new code?

    And the img.src, i cant seem to understand. To give you an idea, here's th existing code in SP

    <h1 style="text-align: center;"> 
       <span style="font-size: 15pt;">For New Mass Upload Request</span></h1>
    <p style="text-align: center;">Please click the button below.</p>
    <p style="text-align: center;"> 
       <a href="/sites/pub/mdmrequests/Lists/New%20Mass%20Upload%20Requests/Item/newifs.aspx?List=33cf32a0-38b1-467f-8d57-01399a00338f&amp;Source=https%3a//sharepoint.com/sites/pub/mdmrequests/Lists/New%2520Mass%2520Upload%2520Requests/AllItems.aspx&amp;RootFolder=&amp;Web=cc3aea35-e893-45c1-92f4-b8c842103970"><img width="190" height="55" class="ms-rteImage-0 ms-rtePosition-4" alt="images.png" src="/sites/pub/mdmrequests/requesttypeselection/SiteAssets/SitePages/Home/images.png"/></a>&#160;</p>
    <p style="text-align: center;">&#160;</p>


    Monday, January 30, 2017 8:54 AM
  • Hi Geo,

    I know it might not give the same effect that you are trying to achieve here but you might consider the OOB Promoted Links App since its a no code solution 

    Monday, January 30, 2017 1:50 PM
  • Hi,

     

    The solution of Romeo need add the function to image and then update the image src( when hover, use bigger image, when mouse out, use smaller image).

    Example:

    <img width="190" onmouseover="mouseOver()" onmouseout="mouseOut()" height="55" class="ms-rteImage-0 ms-rtePosition-4" alt="images.png" 
                 src="/sites/pub/mdmrequests/requesttypeselection/SiteAssets/SitePages/Home/images.png" />

     

    Best Regards,

    Lee


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

    • Proposed as answer by Victoria XiaModerator Sunday, February 5, 2017 6:28 AM
    • Unproposed as answer by Gelo123 Monday, February 6, 2017 6:50 AM
    Tuesday, January 31, 2017 2:49 AM
  • Hi All,

    I cant seem to make this work :( this is the actual code that i have:

    <a>

    <h1 style="text-align: center;"> 
       <span style="font-size: 15pt;">For New Mass Upload Request</span></h1>
    <p style="text-align: center;">Please click the button below.</p>
    <p style="text-align: center;"> 
       <a href="/sites/pub/mdmrequests/Lists/New%20Mass%20Upload%20Requests/Item/newifs.aspx?List=33cf32a0-38b1-467f-8d57-01399a00338f&amp;Source=https%3a//sharepoint.com/sites/pub/mdmrequests/Lists/New%2520Mass%2520Upload%2520Requests/AllItems.aspx&amp;RootFolder=&amp;Web=cc3aea35-e893-45c1-92f4-b8c842103970"><img width="190" height="55" class="ms-rteImage-0 ms-rtePosition-4" alt="images.png" src="/sites/pub/mdmrequests/requesttypeselection/SiteAssets/SitePages/Home/images.png"/></a>&#160;</p>
    <p style="text-align: center;">&#160;</p>

    </a>

    Monday, February 6, 2017 6:49 AM
  • Hi,

     

    Just sample code for your reference.

     

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script type="text/javascript">
            function imageHover() {                        
                $("#myImage").attr("src", "http://sp:12001/SiteAssets/small.PNG");            
            }
            function imageOut() {            
                var newSrc = $("#myImage").attr("src", "http://sp:12001/SiteAssets/big.PNG");           
            }
        </script>
    </head>
    <body>
        <div>
            <h1 style="text-align: center;">
                <span style="font-size: 15pt;">For New Mass Upload Request</span>
            </h1>
            <p style="text-align: center;">Please click the button below.</p>
            <p style="text-align: center; margin:0 auto;">
                <a  href="http://sp:12001/_layouts/15/start.aspx#/">
                    <div style="width: 202px; height: 194px;" onmouseover="imageHover()" onmouseout="imageOut()">
                        <img id="myImage" class="ms-rteImage-0 ms-rtePosition-4" alt="images.png" src="http://sp:12001/SiteAssets/big.PNG" />
                    </div>
                </a>&#160;
            </p>
            <p style="text-align: center;">&#160;</p>
        </div>
    </body>
    </html>
    

    Best Regards,

    Lee


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

    Monday, February 6, 2017 7:57 AM
  • Hi,

    Is any update for your issue?

    Best Regards,

    Lee


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

    Thursday, February 9, 2017 8:58 AM
  • Hi Lee, 

    Can you give a detailed steps on how can i apply the code above in my sharepoint list?

    Sorry, wasnt able to check this thread but am still having the same issue.

    Not really a programmer, hence having difficulty with understanding the codes.

    Thanlks!

    Friday, February 10, 2017 3:58 AM
  • Hi,

    You could add content editor web part to your page and then add below code to content editor web part.(replace the image and link with your own)

    Settings->Edit page->Insert

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script type="text/javascript">
            function imageHover() {                        
                $("#myImage").attr("src", "http://sp:12001/SiteAssets/small.PNG");            
            }
            function imageOut() {            
                var newSrc = $("#myImage").attr("src", "http://sp:12001/SiteAssets/big.PNG");           
            }
        </script>
    
     <div>
            <h1 style="text-align: center;">
                <span style="font-size: 15pt;">For New Mass Upload Request</span>
            </h1>
            <p style="text-align: center;">Please click the button below.</p>
            <p style="text-align: center; margin:0 auto;">
                <a  href="http://sp:12001/_layouts/15/start.aspx#/">
                    <div style="width: 202px; height: 194px;" onmouseover="imageHover()" onmouseout="imageOut()">
                        <img id="myImage" class="ms-rteImage-0 ms-rtePosition-4" alt="images.png" src="http://sp:12001/SiteAssets/big.PNG" />
                    </div>
                </a>&#160;
            </p>
            <p style="text-align: center;">&#160;</p>
        </div>

    Best Regards,

    Lee


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

    Friday, February 10, 2017 8:55 AM
  • Dear Lee, 

    I appreciate your very detailed explanation. But that add in is not existing in my SP site due to access restriction. :(

    Is there anyway to embed the code directly in the webpart?

    Monday, February 13, 2017 10:35 AM
  • Hi,

    Seems you’re using content editor web part based on the screenshot you showed.

    If so, you could insert the code( html and JavaScript to the web part).

    Best Regards,

    Lee


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

    Tuesday, February 14, 2017 8:09 AM