Home > Paul Mather, Work > #ProjectServer / #ProjectOnline custom PWA homepage #PS2013 #PS2010 #SharePoint #HTML #MSProject

#ProjectServer / #ProjectOnline custom PWA homepage #PS2013 #PS2010 #SharePoint #HTML #MSProject

Paul Mather
I am a Project Server and SharePoint consultant but my main focus currently is around Project Server.
I have been working with Project Server for nearly five years since 2007 for a Microsoft Gold Certified Partner in the UK, I have also been awared with the Microsoft Community Contributor Award 2011.
I am also a certified Prince2 Practitioner.

This article has been cross posted from pwmather.wordpress.com (original article)

This post covers an example landing page for PWA using HTML and an image. Firstly select your chosen image and add on containers, other images, text etc. – anything you want really to define the image hotspots. These hotspots will become links. See my example below:

Image for PWA homepage example

This was a picture taken from a recent trip to Venice Smile

Upload the image to the PWA site collection.

Once you have the chosen / updated image you need to create the hotspots or image maps.There are plenty of tools available or online sites that do this. I have used the following site:


Upload your chosen image then add the image maps as shown below:


Once all the maps are added update the other properties such as Href, Alt and the target.

Scroll down and you will see the code, copy and past this into notepad or your favourite HTML editor:


Now you need to update the HMTL to add the image reference and tag the map to the image, see the first line:


Navigate to you PWA homepage and add a script editor or content editor web part then paste the HTML code in:


I used a script editor web part in this example.

Now the image will be loaded to PWA with clickable links on the image maps Smile


This was just an example so I didn’t spend much time on the image but with a creative mind you could really liven up your PWA homepage, Project Sites or any SharePoint landing page etc.

Categories: Paul Mather, Work Tags:
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: