Connecting pictures by content

This article is written on nartreb suggestion in Linking Pictures thread, so thanks him for supporting this idea.

Here I will give some basic information about how this custom object is made and what future I suppose for it. Sure it is not necessary for web professionals and others who have some knowledge about html to read this, but I suppose the most of members here are not of that kind. I also suggest all those gurus stop reading at this point, except if they want to have good laugh about how lame I am.

While browsing photos on SP, especially of mountains I was never on (or I will never be on, which are the most of them) I often had feeling that such fragmented view can be improved by putting pictures in some visual relationship, beside existing textual relationship which connect them by description of what is on picture, and what place it is taken from. There are wealth of pictures on SP, showing the same places from different angles, and, again pictures taken from that places. So, I thought, it would be nice if one can jump from peak to peak from valley to ridge just by one click on it. Not some revolutionary idea, known for ages, but for html pure ignorant as I am, not something which looks easy to be made.

As poor user of Adobe Photoshop I supposed something about it could be found in its Help. So I found that "image map" which can be created by ImageReady.

Here is what help says:

"Image maps link an area of an image to a URL. You can set up multiple linked areas--called image map areas--in an image, with links to other Web pages or multimedia files....

Using image maps keeps the exported image intact as a single file ....

Image maps enable you to link circular, polygonal, or rectangular areas in an image... "

After some sweating to find out how it works (now looking back, funny, it's pretty easy), ImageReady produced piece of code, for picture which I was working on, and for creating my custom object I used only this part of it:

<img class="lozad img-responsive" data-src="https://images-sp.summitpost.org/tr:e-sharpen,e-contrast-1,fit-max,q-60,h-800/134522.jpg" width="1024" height="768" border="0" alt="" usemap="#id134522_Map">


<map name="id134522_Map">


<area shape="circle" alt="View toward Leljen" coords="397,428,10" href="https://www.summitpost.org/images/original/217641.jpg" target="_blank">


<area shape="circle" alt="View down to Trnovacko lake" coords="550,368,10" href="https://www.summitpost.org/images/original/64438.jpg" target="_blank">


<area shape="circle" alt="View to Trnovacko lake" coords="740,360,10" href="https://www.summitpost.org/images/original/258633.jpg" target="_blank">


<area shape="circle" alt="View back to Lelija" coords="748,375,10" href="https://www.summitpost.org/images/original/288517.jpg" target="_blank">


<area shape="circle" alt="View toward Prenj" coords="796,375,10" href="https://www.summitpost.org/images/original/235648.jpg" target="_blank">


<area shape="circle" alt="View down to Orlovacko lake" coords="471,452,10" href="https://www.summitpost.org/images/original/118987.jpg" target="_blank">


<area shape="circle" alt="View along Maglic toward Volujak" coords="405,353,10" href="https://www.summitpost.org/images/original/251583.jpg" target="_blank">


</map>

In first line img src=... contains URL of original size picture on SP which I used for adding image map areas on. I used picture no. 134522, so you can only replace it with number of picture which you want to work on (and change extension if it is not jpg).

width and height are picture dimensions, so you put in dimensions of your own picture,

border=0 means you will use no border around picture.

usemap gives name of map, and map is that what you can see from <map name= ...> to </map>. You can change that name, having in mind that usemap name and map name must be the same. And in usemap you have to have # ahead that name.

What follows are image map areas definition, ie description of points in picture which you want to be clickable and link to other pictures. I say point but it is small area surrounding that point which can be circle, rectangular or polygonal - and what of that, is said with shape. In this case it is circle.

alt contains text which will appear when you come with mouse pointer on that area, and you can use it to describe what is shown on picture which will be opened if you click on that point.

coords="x,y,r" gives coordinates of point you choose, by x and y axe (ie how many pixels is that point far away from left, and from top, respectively), and radius (in pixels) of clickable circled area surrounding that point. On my picture I put links for 7 other pictures, so I have 7 area descriptions.

href gives URL of picture which that area links to. So, you will put there no. of pictures you want that area links to. I used hard coded address (https://www.summitpost.org/images/original/) which is useful if you are testing your piece of code from your PC, before uploading to SP. You can save it as somename.html and test how it works when you open it in browser. Once when you think it is working as you like it, you can replace hard coded address with /images/original/. But it is not must to.

target="_blank" means that new picture will be opened in its own window.

So, one can use ImageReady to make it, use some other tool, or this can be simply written in any text editor in which case you need only coordinates of point you want to put area around.

Here is freeware, simple for use and easy for finding coordinates of point. When you open picture in it, just point on picture where you want and (x,y) of that point will appear in title bar.

After you have this piece of code, go to Create new custom object on SP and copy/paste code in body section.

So, this is how it could be made, and I hope some people will do the same with their pictures (one can use others pictures, too), and we will link each others visually related custom objects of that kind and collaborate on building virtual hiking tours.
(It would be much more comfortable if SP gives possibility to edit original size picture by adding image map areas on it, instead of making additional custom objects.)

External Links