HTML Image Map


In this POST, we are going to talk about setting up multiple links within one piece of image.
Above shown images only single peace of images. But when we click on skype, ebay... it should navigate to respective hyper link.

 Your html code should contain below format.


 <html> <head> <title>Image Map</title> </head> <body>
<img src="images/weblogo.jpg" alt="" usemap="#logos" />
<map name="logos"> <area shape="circle" coords="68,56,33" href="http://www.stumbleupon.com/" title="StumbleUpon" alt="StumbleUpon" /> <area shape="rect" coords="220,19,306,54" href="http://www.youtube.com/" title="Youtube" alt="Youtube" /> <area shape="rect" coords="367,32,516,84" href="http://www.google.com/" title="Google" alt="Google" /> <area shape="rect" coords="556,12,639,115" href="http://www.wikipedia.com/" title="Wikipedia" alt="Wikipedia" /> <area shape="rect" coords="128,62,244,114" href="http://www.skype.com/" title="Skype" alt="Skype" /> <area shape="rect" coords="301,103,444,136" href="http://www.yahoo.com/" title="Yahoo" alt="Yahoo" /> <area shape="rect" coords="25,158,135,207" href="http://www.ebay.com/" title="eBay" alt="eBay" /> <area shape="rect" coords="180,147,271,175" href="http://www.flickr.com/" title="Flickr" alt="Flickr" /> <area shape="rect" coords="299,166,379,208" href="http://www.digg.com/" title="Digg" alt="Digg" /> <area shape="circle" coords="500,184,32" href="http://wordpress.org/" title="Wordpress.org" alt="Wordpress.org" /> <area shape="rect" coords="599,142,667,209" href="http://www.blogger.com/" title="Blogger" alt="Blogger" /> <area shape="default" nohref="nohref" title="Default" alt="Default"/> </map>
</body> </html>
Defiantly above code will work for any image. But, Question is how to identify label area on image?
this is very simple.
Download "GIMP" and install in your PC. It's free tool.
1. Open GIMP tool.
2. Open image in GIMP.
3. go to Filters-->Web-->Image Map from GIMP top navigation tools.
4. Right hand side you are able to see 3 types of selection shapes. Depends on your image shapes you need to select area of the image. as shown in the below image.

Now select rectangle for "YouTube" area selection. And double click on selected area immediately. It will popup one properties window as shown below image. You have to give URL & ALT text.



Now click on OK, Apply.

 You need repeat these steps for all labeled images.

 Now we have to save this image. Go to files and select SaveAs.
Select save location and rename file name as "ImageMap.txt"

 Now go to file saved location and open file in notepad.

 It contains
<img src="images/weblogo.jpg" alt="" usemap="#logos" />
<map name="logos"> <area shape="circle" coords="220,19,306,54" href="http://www.youtube.com/" title="Youtube" alt="Youtube" />

Now we can use above tags in the HTML code or any SharePoint Content Editor web part pages.

Please reply back with your queries & suggestions.

Comments

Post a Comment

Popular posts from this blog

Sending email using Powershell script

Image
 Below is a script that can be used to send email using Powershell. If ((Get-PSSnapIn -Name Microsoft.SharePoint.PowerShell -ErrorAction SilentlyContinue) -eq $null )   { Add-PSSnapIn -Name Microsoft.SharePoint.PowerShell } $currentDate = Get-Date -Format g $HeaderOne $HeaderTwo $HeaderThree $HeaderFour $Outputreport = "<HTML><TITLE> Test E-Mail notification </TITLE> <head> <style>body {font-family: Calibri;font-size: 14px;}table {border-collapse: collapse;}table, th, td {border: 1px solid black;font-family: Calibri,Verdana;font-size: 14px;}th {background-color: #4CAF50;color:white;}</style></head>                      <BODY>                                           <H2> Test E-Mail notification on $($currentDate) CET </H2>  ...
Read more

Convert List Collection to DataTable using C#

public System.Data.DataTable ConvertToDataTable<T>(IList<T> data)         {             PropertyDescriptorCollection properties =                TypeDescriptor.GetProperties(typeof(T));             System.Data.DataTable table = new System.Data.DataTable();             foreach (PropertyDescriptor prop in properties)                 table.Columns.Add(prop.Name, Nullable.GetUnderlyingType(prop.PropertyType) ?? prop.PropertyType);             foreach (T item in data)             {                 DataRow row = table.NewRow();                 foreach (PropertyDescriptor prop in properties)                ...
Read more

Difference Between Site Template and Site Definition

Difference Between Site Template and Site Definition Before going into direct comparison, let me define both: Site Templates  : Are  snapshots of  sites at a point in time. When a user customizes a site from the UI or SPD, the custom template consists of the difference between the original state of the site (determined by its definition) and the state of the site or list when the custom template is generated. Custom templates remain tied to a particular site definition (for example, the site definition for SharePoint Web sites or Meeting Workspace Web sites), so that if the site definition is not present or is changed, the custom template cannot work. Site Definitions  : As the name implies, A Site definition is "core definition of a site”. Each site definition emerges through a combination of files that are placed in the 12 hive of WFE during installation of SharePoint. Site definition files include .xml, .aspx, .ascx, and .master page files, as well as docum...
Read more