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

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:

This was a picture taken from a recent trip to Venice

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:

http://www.maschek.hu/imagemap/imgmap 

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

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.

Advertisement