Adding links to the banner:
The easiest way to add links to the banner is to use hotspots on the image for the banner.
You can create three types of hotspots: circles, rectangles, and freeform.
To create a hotspot, we use an imagemap. Go to your banner under Layouts\Banner Layours\NameOfBanner\ and open the .ascx file there
Between the Banner Content and the top two lines, add the following:
In between these two lines will go our hotspots.
You can add hotspots in one of three ways:
<area shape="circle" coords="997,27,20" tabindex="-1" target="_blank" href="https://twitter.com/" alt="Twitter"> (red circle on image below)
<area shape="rect" coords="977,7,1017,47" tabindex="-1" href="https://portalpage/" target="portalcontent" alt="Portal"> (red square on image below)
<area shape="poly" coords="977,27,997,7,1008,26,998,46" tabindex="-1" href="https://google.com/" alt="Google" target="_blank" /> (red diamond on image below)
In the area tag, the shape section determines what the coordinate section looks like:
For circles, the first two numbers are the coordinates of the center of the circle, and the third is the radius.
For rectangles, the first two numbers are the top left corner and the last two numbers are the bottom right corner.
For polygons, each pair of numbers denotes a coordinate that is linked to the previous and next pair of numbers to create an enclosed area that is the hotspot. The example above creates a dimaond shape.
The tabindex should be -1 since you likely do not want these to be tabbed to.
The target has a few choices as well. If you want the link to take the place of the portal main frame, it should say "portalcontent". If you want it to open in a new window or tab, it should say "_blank".
The href is the URL to go to when clicking the hotspot.
The alt text is what shows up when a user hovers over the hotspot.
The easiest way to get coordinates is to open your banner in Microsoft Paint.
You can see the black crosshairs of the cursor is in the middle of the Twitter icon, and the lower right has the coordinates on the image for that point, in this case, 999, 27.
After all of that you should end up with a map tag with a series of area tags in it with the links to your items.
The second part is to set the imagemap to be used. The default banner content looks as follows:
<table height="55" width="100%" style="background-color: 00235B; background-image:url('/Layouts/Banner Layouts/Default/images/Contemporary.gif'); background-repeat: no-repeat;">
We cannot set an imagemap to be used on a background image. Therefore, we need to set an image to be used as the imagemap. Fortunately, we have a large image in the one being used for the background already.
We need to replace the non-breaking space with the image link for that image. We also need to do some manipulation to the table so as not to have an image inset in another image.
<table cellspacing="0" cellpadding="0" height="55" width="100%" style="background-color: 00235B; background-image:url('/Layouts/Banner Layouts/SocialCompany/images/company portal banner.jpg'); background-repeat: no-repeat;">
<tr><td><img usemap="#hotspots" border="0" hidefocus="true" src='/Layouts/Banner Layouts/SocialCompany/images/company portal banner.jpg'></img></td></tr>
Make sure the src in the img tag matches the url. The cellspacing and cellpadding need to be added to the table tag as 0.
Usemap in the img tag should have the same name as the map tag. The border and hidefocus tags make it so the link isn't highlighted in the banner when clicked on.