locked
Make a Clikable Image in sharepoint Site RRS feed

  • Question

  • Hello All,

    I have a requirement where I need to make my Image clickable to point to two urls in a sharepoint webpart.

    Description of Image: I have two oval shaped figures in the image connected by a circle at the middle of the image.
    I have to put this image on the home page of a sharepoint site.

    My requirement is I nned to point two oval shape images to two different urls.

    Can anyone advice me how to do it.

    I appreciate your responses.

    Thank You,
    Smith


    smith
    Thursday, May 12, 2011 3:10 PM

Answers

  • Excellent, I have found the answer as " Nonsense! In SharePoint Designer 2007 it is simple. First, make sure your "picture" tool bar is on. Go to view/toolbars/pictures. Then select the image you want to have a hotspot on and select the "rectangular hotspot" and drag your hotspot over the image. It's that simple! " in http://social.technet.microsoft.com/Forums/en-US/sharepointgeneral/thread/3d386e37-83a8-4ed9-bd0a-eccafc1adf7b/
    smith
    • Proposed as answer by Parvez Akkas Saturday, May 14, 2011 3:15 PM
    • Marked as answer by David HM Friday, May 20, 2011 1:37 AM
    Thursday, May 12, 2011 3:28 PM

All replies

  • Excellent, I have found the answer as " Nonsense! In SharePoint Designer 2007 it is simple. First, make sure your "picture" tool bar is on. Go to view/toolbars/pictures. Then select the image you want to have a hotspot on and select the "rectangular hotspot" and drag your hotspot over the image. It's that simple! " in http://social.technet.microsoft.com/Forums/en-US/sharepointgeneral/thread/3d386e37-83a8-4ed9-bd0a-eccafc1adf7b/
    smith
    • Proposed as answer by Parvez Akkas Saturday, May 14, 2011 3:15 PM
    • Marked as answer by David HM Friday, May 20, 2011 1:37 AM
    Thursday, May 12, 2011 3:28 PM
  • Split the image into images, format with divs so they are right next to each other (looks like 1 image when rendered) and in the code give them the href.

    As an example (adjust this so it works for you) - this should work, adjust the CSS/HTML as you need

    <style type="text/css">
    .divwrapper {
    width:100px; /*width of entire image*/
    clear:both;
    }
    .image1div {
    width:50px; /*first image width*/
    float:left;
    }
    .image2div {
    width:50px; /*first image width*/
    float:left;
    }
    </style>

    <div class=divwrapper>
       <div class=image1div>
           <a href="/yoururl1.aspx"><img src="/image1.jpg"></a>
       </div>
       <div class=image2div>
           <a href="/yoururl2.aspx"><img src="/image2.jpg"></a>
       </div>
    </div>

    Thursday, May 12, 2011 7:47 PM