Welcome to SP!  -
7 Ways to Post Panoramas to SP
Article
 

7 Ways to Post Panoramas to SP

  Featured on the Front Page
7 Ways to Post Panoramas to SP

Page Type: Article

Object Title: 7 Ways to Post Panoramas to SP

Activities: Hiking, Mountaineering

 

Page By: Gangolf Haub

Created/Edited: Nov 5, 2006 / Oct 12, 2011

Object ID: 241488

Hits: 15113 

Page Score: 99.01%  - 95 Votes 

Vote: Log in to vote

 

Introduction

 
Waltental with Sarner Weißhorn
The Sarntal Alps as seen from Saxner

Half a year ago Lukas Kunze posted an article about creating panoramas, Panoramas? Here is how to do it!. After having received a number of comments and PMs about posting panoramas to SP I thought it might be a good idea to publish the whole information in an article. Some of the information of this article will be redundant with the one of Lukas but I think it makes sense to start from the beginning and discuss the prerequisites, at least shortly.

Also I can’t pretend that I invented panorama posting on SP. This honour goes to brendon, who pioneered it about two years ago on one of the Site Feedback Forum Threads. Several others have taken it up and I’m probably the one who used it most.

But before we start, let’s first recapitulate some hints and tips for creating panoramas. It is quite obvious that the best posting technique won’t help if the panorama itself is poor.

Prerequisite 1: The Photo Op

Surely you need a good opportunity to shoot panorama photographs. Often my own attempts have been worthless because I made silly – and sometimes not so silly – mistakes. Also different cameras pose different problems. Let me start with a checklist about taking panorama shots:
  1. The single shots should overlap. There is no optimum overlapping region, but most stitching programs work well with 10 – 20% overlap. At short focal length (wide angle shots) too much overlap can result in weird results while stitching, since the edges of the single shots are distorted (straight lines are curved).
  2. The single shots should be taken at the same focal length. This might sound like a no-brainer but with SLD-cameras a change might happen involuntarily. Digicams generally are safe since there the zoom factor is controlled by a stepper motor and you notice when there is a change. Different focal length shots are very hard to stitch and 360° panos might be impossible. The horizon often gets distorted, curving like a rollercoaster.
  3. The single shots should have the same exposure. Point at a direction where your pano will have medium light conditions and fix them by determining the exposure time and aperture. Fix them and take the rest of the shots.
    This is very hard to realize with digicams that are on automatic. Often you can fix exposure by pointing at a place, then dragging the exposure by keeping the shutter button pressed down slightly. Doing a 360° pano that way is a pain – I used to always fix the exposure at the place of the last shot, thus creating a gradation, which was slight enough so that the stitching program could adapt it.
  4. Don’t use polarisation filters. A polfilter changes the colouring of a photo and at different directions the colours are different. It often becomes impossible to fix these discrepancies with programs.
  5. If possible, don’t use your zoom at its widest angle. Always zoom in a bit to avoid curved lines at the edges of the frame (where it counts for stitching).
  6. Smaller panos are easier to stitch than large ones. A 360° pano can be a real pain in the butt to stitch, especially if some of the overlapping regions don’t show much contrast.
  7. Don’t point up or down while shooting the single shots. Keep the horizon. Pointing up or down will result in curved panoramas, which can be very hard to get straight again. The worst that can happen is that you have buildings at the edge of the pano frame which will point inwards or outwards.

Prerequisite 2: Digital Picture Processing

Pre-Stitching


If you follow the hints above you don’t need to do any picture processing prior to stitching the panorama and you should not do it. Only if there are changes to the exposure you might try to adapt the shots. Concentrate on the sky because differences in the exposure of the structured foreground are harder to detect.

It is much harder to adapt pictures in which the colour aspect changes from shot to shot. This happens if you use polarization filters and your panorama covers a wide angle. Often it is impossible to correct the errors but you can try. Adjust the pictures step by step (single shot by single shot). This might result in huge adjustments for the last shot and generally it is here that the panorama will look whacky.

As for Curved panoramas – the ones where your single shots were taken pointing up (or down) - you should try to correct the error in the single shots already. Photoshop has a feature while cropping, where you can correct for part of this error. Vertical lines, which on the un-edited shot point inwards, can be “straightened”. The whole picture looks straightened and a panorama stitch turns out much better results.

Stitching


Here I refer to Lukas’ article. He used a suite of programs, none of which I ever used. There is a multitude of quite decent panorama software out there, all with advantages and disadvantages. I used
  • PanoramaMaker
  • Canon Photo Stitch
  • Panorama Factory
  • Photoshop elements

For me PanoramaMaker is the program of choice, mainly because of its ease of use. It offers decent results when it is on automatic and only when the contrast is lacking or if some of the shots were taken at different focal length you have to do adjustments manually. However the drawback is that all single shots need to be the exact same pixel size, which is hard to realize if you scan slides or paper pictures. Moreover PanoramaMaker will only work with shots with aspect ratio between 2:3 and 3:4.

I use exposure and focal length adjustment while stitching my panoramas. Generally the results are satisfactory and I rather adjust the single shots before stitching than twiddling around with the controls of the stitching program.

Post-Stitching


Sometimes the exposure correction is overtaxed and you see the lines along which the program stitched. In that case I use Photoshop’s Healing Brush Tool to correct the error and make the line invisible. Nowadays it doesn’t happen too often anymore but my first panos all had these lines.

If I didn’t adhere my own tips and pointed upwards to take a panorama – e.g. a mountain from its base – I use the Crop Tool, allowing perspective corrections. This doesn’t always help, especially if there are objects with vertical lines at the edges.

Size Considerations

Before dealing with the html code itself, let’s discuss the size of the resulting panorama first. IMHO this is the most important part of the prerequisites. Why?

People use different browsers and different screen resolutions. What might look good on my 1400 x 1050 screen in Firefox might look terrible on IE on a resolution of 1024 x 768. Large width panoramas result in the pages to adapt to that width, resulting in scrollbars at lower resolutions. To read the texts above and below the panorama you have to scroll back and forth, which is simply not acceptable.

Therefore I would suggest you prepare your panoramas for a size of 1024 x 768 pixels, a size which nowadays most of the computers can deal with. Subtract the left SP-sidebar and the browser’s menu bar and you’ll come up with an effective size of 770 x 550 pixels. We (livioz and I) checked many browsers and this seemed to be the best compromise.

Consequently I reduce the height of my panos to 550 pixels and to whatever resulting width. With sliding panos (see below) the sliding frame will have 770 pixels width.

Colour code

The following html codes are posted in different colours:
  • Black: obligatory code for the respective type of panorama
  • Blue: optional code for a SP-frame around the panorama. Additionally there is an icon in the bottom right corner which lets you view the picture page of the panorama.
  • Green: code for labelling the panorama


And now: let’s go…

Simple Magic (SP Built In Dialog)

Let me start with the simplest option – using SP’s picture dialog. In edit mode you will find a button above each section: “Insert Image”. You can search for pictures, chose size and alignment and add a caption. Everything will be placed in a frame and look SP-like. My recommendation is to use the medium size and centered alignment. This works quite well with panoramas, created from two or three single shots, as it will result in a picture of 500px width. SP inserts some image code, which gets replaced by the image itself when viewing the page.

Code:
[img:241491:aligncenter:medium:The Northern Chain of the Pale di San Martino Group]

Result:
The Northern Chain of the Pale di San Martino Group
The Northern Chain of the Pale di San Martino Group


Labels:
With SP’s built in picture dialog there is only one possible way to add labels to the panorama: write directly onto the picture prior to submitting it to SP. However, that way parts of the picture will be hidden by text.

Example:
The Biegengebirge part of the...
The Biegengebirge part of the Carnic Alps as seen from the Rauchkofel summit

Advanced Magic (Native HTML)

If your panorama doesn’t exceed 770 pixels in width there is always the possibility to post it in its original size. Again this should only be done for panoramas, stitched from two or three pictures, since otherwise the height will be rather small. Here the solution is to use standard html code, maybe with a frame and the link to the picture page itself.

Code:
<center><table class='thumb'><tr><td><a href='/view_object.php?object_id=241495'><img src='/images/original/241495.jpg'> </img></a><div class='magnify' style='float: right; margin-top: 5px;'><a href='/view_object.php?object_id=241495' title='Enlarge'> <img src='/images/layout/abby/magnify.gif' alt='Enlarge' ></img></a></div>Marmolada and Gran Vernel as seen from Col da Cuc</td></tr></table></center>

Result:

Marmolada and Gran Vernel as seen from Col da Cuch

Heavily advanced Magic (Image Maps)

In addition to adding the labels to the picture itself, you can use the so-called image maps. Usually used for maps, you can get tooltips, when you move the mouse over an interactive area. While the code is still straightforward, you must figure out the coordinates of the spots of the panorama you want to “interactivate”. Some picture processing programs offer image map support, to determine the coordinates by clicking the mouse. I use Adobe Image Ready for a task like that. Drawback with the tooltips is that you don’t directly see the labels and thus don’t know where to put the mouse to get the text.

Code:
<noformat><center><table class='thumb'><tr><td><IMG SRC=" /images/original/241498.jpg" USEMAP="#Map">
<MAP NAME="Map">
<AREA SHAPE="poly" TITLE="Niederer Weißzint" COORDS="703,125, 769,163, 742,178, 705,179, 671,177, 641,136, 655,128, 692,124">
<AREA SHAPE="poly" TITLE="Hoher Weißzint" COORDS="639,134, 623,119, 572,115, 542,110, 523,117, 608,161, 621,179, 651,173, 669,173">
<AREA SHAPE="poly" TITLE="Hochfeiler" COORDS="475,83, 512,111, 522,116, 605,161, 621,179, 593,185, 531,146, 504,144, 484,121, 455,104, 438,116, 432,102, 455,98" HREF="http://www.summitpost.org/mountain/rock/150982/hochfeiler-granpilastro.html">
<AREA SHAPE="poly" TITLE="Blauer Kofel" COORDS="472,199, 539,223, 562,198, 594,183, 533,148, 505,142, 469,199">
<AREA SHAPE="poly" TITLE="Fituidenkopf" COORDS="468,199, 422,187, 392,168, 406,124, 442,115, 459,105, 482,119, 504,142, 503,142">
<AREA SHAPE="poly" TITLE="Weißspitzen" COORDS="413,86, 441,115, 405,125, 392,167, 335,169, 342,135, 361,126, 398,90">
<AREA SHAPE="poly" TITLE="Hochferner" COORDS="327,116, 382,81, 398,89, 361,123, 342,134, 331,170, 299,157, 316,132">
<AREA SHAPE="poly" TITLE="Rotwand" COORDS="302,126, 315,133, 294,157, 243,173, 290,130">
<AREA SHAPE="poly" TITLE="Großer Möseler" COORDS="132,145, 191,115, 220,109, 245,123, 289,130, 241,172, 184,179" HREF="http://www.summitpost.org/mountain/rock/151034/grosser-m-seler.html">
<AREA SHAPE="poly" TITLE="Hochsteller" COORDS="21,149, 63,131, 127,145, 187,182, 152,207">
</MAP><br /><div class='magnify' style='float: right; margin-top: 5px;'><a href='/view_object.php?object_id=241498' title='Enlarge'> <img src='/images/layout/abby/magnify.gif' alt='Enlarge' ></img></a></div>Hochfeiler Group seen from Grubenkopf. Hover mouse over mountains to see the names</td></tr></table></center></noformat>


Result:

Hochfeiler Group seen from Grubenkopf. Hover mouse over mountains to see the names


If you plan to use more than one image map per page make sure you use different names for the maps.

Explanation:
  • <IMG SRC="/images/original/241498.jpg" USEMAP="Map">
    Displays the image of the map and announces that an image map with the name "Map" will be used subsequently
  • <MAP NAME=" Map">...</MAP>
    Within these tags the actual image map is defined. For each image map use a unique name!
  • < AREA SHAPE="poly" TITLE="Hochfeiler" COORDS="475,83, 512,111, 522,116, 605,161, 621,179, 593,185, 531,146, 504,144, 484,121, 455,104, 438,116, 432,102, 455,98" HREF="http://www.summitpost.org/mountain/rock/150982/hochfeiler-granpilastro.html">
    • <Area>
      Definition of the area which will be interactive
    • SHAPE="poly"
      A polygon area will be interactive. Circles and Rectangles are also possible
    • TITLE="Hochfeiler"
      This text will be displayed as you hover the mouse over the interactive area
    • COORDS="475,83, 512,111, 522,116, 605,161, 621,179, 593,185, 531,146, 504,144, 484,121, 455,104, 438,116, 432,102, 455,98"
      Coordinates of the interactive area. Find out by trial and error or use a tool like Adobe Image Ready to find them.
      HREF=" http://www.summitpost.org/mountain/rock/150982/hochfeiler-granpilastro.html "
      Link to the Hochfeiler Page

Expert Wizardry (Sliding Panoramas)

Now for the real stuff – sliding panoramas. You submit your large panorama to SP and with a bit of rather simple code you get scrollbars to move the picture around. This method can also be found at the bottom of the current FAQ, where you can find a short explanation in addition to the one you get here. Take care to make the picture frame a bit higher than the original picture. You need the space of the additional scrollbar, which should be about 40px. The scrollbar itself is narrower but different browser display it differently so that you should give ample space. For a panorama of 550px you should use 590px x 770px for the frame.

Code:
<center><table class='thumb'><tr><td><div><div style="width:770px;height:590px;overflow:auto;"><img src="http://www.summitpost.org/images/original/239825.jpg"></div><div class='magnify' style='float: right; margin-top: 5px;'><a href='/view_object.php?object_id=239825' title='View Pano'> <img src='/images/layout/abby/magnify.gif' alt='Enlarge'></img></a></div>The Pfunderer Berge Group seen from Bairnockspitze</div></td></tr></table></center>

Result:
The Pfunderer Berge Group seen from Bairnockspitze


This technique also offers the opportunity to post labels which can be hidden at will. You need some dhtml (lots of divs and spans). If you plan to post more than one labelled panora per page, make sure that you exchange all “labelling1”, “show1”, “hide1” commands with new numbers. Otherwise both panoramas will be controlled by the same Show/Hide section.

The coordinates of the labels have to be found by trial and error. Since the length of the whole label text (all labels counted together) has an impact on the positions, you should add all labels before starting to position them. I always copy the first label n times and replace the texts, thus getting a long line of names somewhere in the panorama. Then I start to change positions, which is a pain for your first panorama but you soon get some feeling for positions and distances. One more consideration: the width of the labelled text should not be larger than the image width. In the code below it is 1835px, a number which has to be replaced by your picture width.

Code:
<center><table class='thumb'><tr><td><div><div style="width:770px;height:590px;overflow:auto;"><div id="labeling1" style="font-family:arial;font-size:12px;width:1835px"><span style="position:relative;top:210px;left:-570px;z-index:1;"><font color=black><b>Kleiner Kaserer</b></font></span><span style="position:relative;top:180px;left:-360px;z-index:1;"><font color=black><b>Großer Kaserer</b></font></span><span style="position:relative;top:120px;left:-230px;z-index:1;"><a href=http://www.summitpost.org/mountain/rock/151037/olperer.html><font color=black><b>Olperer</b></font></a></span><span style="position:relative;top:140px;left:-210px;z-index:1;"><font color=black><b>Fußstein</b></font></span><span style="position:relative;top:100px;left:190px;z-index:1;"><font color=black><b>Schrammacher</b></font></span><span style="position:relative;top:140px;left:50px;z-index:1;"><font color=black><b>Sagwandspitze</b></font></span><span style="position:relative;top:120px;left:330px;z-index:1;"><font color=black><b>Hohe Wand</b></font></span></div><img src="http://www.summitpost.org/images/original/241501.jpg"></div><div class='magnify' style='float: right; margin-top: 5px;'><a href='/view_object.php?object_id=241501' title='View Pano'> <img src='/images/layout/abby/magnify.gif' alt='Enlarge' ></img></a></div><font color="black">Summit View Grubenkopf: Tux Main Ridge. </font><span style="cursor:hand;cursor:pointer;"><span id="hide1" style="cursor:hand;cursor:pointer;text-decoration:underline;"onclick="labeling1.style.visibility='hidden'; hide1.style.textDecoration='none';show1.style.textDecoration='underline';"><font color="red">Hide</font></span><font color="red">  / </font><span id="show1" onclick="labeling1.style.visibility='visible'; hide1.style.textDecoration='underline';show1.style.textDecoration='none';"><font color="red"> Show</span></font><font color="black"> labels</font></span></div></div></td></tr></table></center>

Result:
Kleiner KasererGroßer KasererOlpererFußsteinSchrammacherSagwandspitzeHohe Wand
Summit View Grubenkopf: Tux Main Ridge. Hide  / Show labels



Explanation:
  • <table class='thumb'><tr><td> … <div class='magnify' style='float: right; margin-top: 5px;'><a href='/view_object.php?object_id=241501' title='View Pano'> <img src='/images/layout/abby/magnify.gif' alt='Enlarge' ></img></a></div></td></tr></table>
    A frame is put around the image with an icon the bottom right corner, from which you can direct to the picture page of the panorama
  • <div> … </div>
    Pieces together everything which is placed between the tags
  • <div><div style="width:770px;height:590px;overflow:auto;"> … </div><img src="http://www.summitpost.org/images/original/241501.jpg"></div>
    Displays a picture in a sliding frame of 770 x 590 pixels. “overflow:auto” ensures that the scroll bars are displayed, whenever the picture is larger than the frame.
  • <span style="position:relative;top:120px;left:-230px;z-index:1;"><a href=http://www.summitpost.org/mountain/rock/151037/olperer.html><font color=black><b>Olperer</b></font></a></span>
    Label with position and font stype, which is linked to the Olperer Page
  • <font color="black">Summit View Grubenkopf: Tux Main Ridge. </font>
    Picture caption
  • <div id="labeling1" style="font-family:arial;font-size:12px;width:1835px"> … <span style="cursor:hand;cursor:pointer;"><span id="hide1" style="cursor:hand;cursor:pointer;text-decoration:underline;"onclick="labeling1.style.visibility='hidden'; hide1.style.textDecoration='none';show1.style.textDecoration='underline';"><font color="red">Hide</font></span><font color="red">  / </font><span id="show1" onclick="labeling1.style.visibility='visible'; hide1.style.textDecoration='underline';show1.style.textDecoration='none';"><font color="red"> Show</span></font><font color="black"> labels</font></span></div></div>
    Code which shows or hides all texts, which are defined under “labelling1”, at the same time changes the texts “Show” and “Hide” to underlined or not.

Extreme Panoramaing

Once upon a time I took a panorama of the northern Dolomites from the summit of Hochgrabe in the southern Hohe Tauern Group. I did every conceivable mistake while taking the pictures (polarizer, changing exposure) so that it was already quite complicated to stitch the whole thing. In the end I succeeded and then decided to put up the panorama not only with labels but also with labels in two different languages – Italian and German.

It took forever to do this and finally this was the result:

Croda da CampoCima BagniCampanili PopèraCima PopèraMonte GiralbaPala di PopèraCroda Rossa di SestoCima UndiciCroda dei ToniCima UnaAntelaoMonte PaternoCima GrandeLastron dei ScarperiPunta dei Tre ScarperiSorapisPelmoTorre dei ScarperiCroda dei RondoiPiz PopenaMonte CristalloRocca dei BaranciCima Piatta AltaCivettaTofana di MezzoTofana di DentroMonti SpeciePicco di VallandroCroda RossaCime di SestoMarmoladaGran VernelPiccola Croda RossaCunturinesLa VarellaPiz BoèCr. del BeccoC. PiscaduC. NoveC. DieciSassolungoS. CiampacP. PuezDantersassLe OdleC. Colli AltiM. MuroP. Tre DitaSass de PutiaM. RovinaPlan de CoronesPloseOrtles/Cevedale Group
Summit View Hochgrabe: the complete Dolomites. Hide / German / Italian Labels



If you want to know the code, look at the last section of this article.

The Dolomite Panorama Code

<div><div style="width:770px;height:500px;overflow:auto;"><div id="labelingI" style="font-family:arial;font-size:12px;width:3900px"><span style="position:relative;top:140px;left:50px;z-index:1;"><font color="black"><b>Croda da Campo</b></font></span><span style="position:relative;top:120px;left:50px;z-index:1;"><font color="black"><b>Cima Bagni</b></font></span><span style="position:relative;top:170px;left:60px;z-index:1;"><font color="black"><b>Campanili Popèra</b></font></span><span style="position:relative;top:140px;left:40px;z-index:1;"><font color="black"><b>Cima Popèra</b></font></span><span style="position:relative;top:120px;left:40px;z-index:1;"><font color="black"><b>Monte Giralba</b></font></span><span style="position:relative;top:270px;left:-130px;z-index:1;"><font color="white"><b>Pala di Popèra</b></font></span><span style="position:relative;top:250px;left:-100px;z-index:1;"><font color="white"><b>Croda Rossa di Sesto</b></font></span><span style="position:relative;top:100px;left:-150px;z-index:1;"><font color="black"><b>Cima Undici</b></font></span><span style="position:relative;top:140px;left:-120px;z-index:1;"><a href="http://www.summitpost.org/show/mountain_link.pl/mountain_id/2909"><font color="black"><b>Croda dei Toni</b></font></a></span><span style="position:relative;top:280px;left:10px;z-index:1;"><font color="white"><b>Cima Una</b></font></span><span style="position:relative;top:140px;left:50px;z-index:1;"><font color="black"><b>Antelao</b></font></span><span style="position:relative;top:180px;left:160px;z-index:1;"><a href="http://www.summitpost.org/show/mountain_link.pl/mountain_id/2860"><font color="black"><b>Monte Paterno</b></font></a></span><span style="position:relative;top:140px;left:120px;z-index:1;"><a href="http://www.summitpost.org/show/mountain_link.pl/mountain_id/27"><font color="black"><b>Cima Grande</b></font></a></span><span style="position:relative;top:160px;left:80px;z-index:1;"><a href="http://www.summitpost.org/show/mountain_link.pl/mountain_id/3996"><font color="black"><b>Lastron dei Scarperi</b></font></a></span><span style="position:relative;top:110px;left:20px;z-index:1;"><font color="black"><b>Punta dei Tre Scarperi</b></font></span><span style="position:relative;top:160px;left:10px;z-index:1;"><font color="black"><b>Sorapis</b></font></span><span style="position:relative;top:180px;left:40px;z-index:1;"><a href="http://www.summitpost.org/show/mountain_link.pl/mountain_id/1399"><font color="black"><b>Pelmo</b></font></a></span><span style="position:relative;top:300px;left:-20px;z-index:1;"><font color="white"><b>Torre dei Scarperi</b></font></span><span style="position:relative;top:300px;left:50px;z-index:1;"><font color="white"><b>Croda dei Rondoi</b></font></span><span style="position:relative;top:180px;left:0px;z-index:1;"><font color="black"><b>Piz Popena</b></font></span><span style="position:relative;top:160px;left:0px;z-index:1;"><a href="http://www.summitpost.org/show/mountain_link.pl/mountain_id/2270"><font color="black"><b>Monte Cristallo</b></font></a></span><span style="position:relative;top:190px;left:0px;z-index:1;"><font color="black"><b>Rocca dei Baranci</b></font></span><span style="position:relative;top:210px;left:30px;z-index:1;"><font color="black"><b>Cima Piatta Alta</b></font></span><span style="position:relative;top:220px;left:80px;z-index:1;"><a href="http://www.summitpost.org/show/mountain_link.pl/mountain_id/2886"><font color="black"><b>Civetta</b></font></a></span><span style="position:relative;top:220px;left:170px;z-index:1;"><font color="black"><b>Tofana di Mezzo</b></font></span><span style="position:relative;top:200px;left:130px;z-index:1;"><font color="black"><b>Tofana di Dentro</b></font></span><span style="position:relative;top:360px;left:30px;z-index:1;"><font color="white"><b>Monti Specie</b></font></span><span style="position:relative;top:350px;left:70px;z-index:1;"><font color="white"><b>Picco di Vallandro</b></font></span><span style="position:relative;top:180px;left:-30px;z-index:1;"><font color="black"><b>Croda Rossa</b></font></span><span style="position:relative;top:300px;left:-1250px;z-index:1;"><font color="white"><b>Cime di Sesto</b></font></span><span style="position:relative;top:200px;left:-90px;z-index:1;"><a href="http://www.summitpost.org/show/mountain_link.pl/mountain_id/337"><font color="black"><b>Marmolada</b></font></a></span><span style="position:relative;top:220px;left:-70px;z-index:1;"><font color="black"><b>Gran Vernel</b></font></span><span style="position:relative;top:350px;left:-140px;z-index:1;"><font color="white"><b>Piccola Croda Rossa</b></font></span><span style="position:relative;top:240px;left:-100px;z-index:1;"><font color="black"><b>Cunturines</b></font></span><span style="position:relative;top:260px;left:-80px;z-index:1;"><a href="http://www.summitpost.org/show/mountain_link.pl/mountain_id/1394"><font color="black"><b>La Varella</b></font></a></span><span style="position:relative;top:240px;left:-80px;z-index:1;"><a href="http://www.summitpost.org/show/mountain_link.pl/mountain_id/754"><font color="black"><b>Piz Boè</b></font></a></span><span style="position:relative;top:370px;left:0px;z-index:1;"><a href="http://www.summitpost.org/show/mountain_link.pl/mountain_id/1257"><font color="white"><b>Cr. del Becco</b></font></a></span><span style="position:relative;top:250px;left:-80px;z-index:1;"><a href="http://www.summitpost.org/show/mountain_link.pl/mountain_id/1316"><font color="black"><b>C. Piscadu</b></font></a></span><span style="position:relative;top:290px;left:-100px;z-index:1;"><font color="black"><b>C. Nove</b></font></span><span style="position:relative;top:280px;left:-120px;z-index:1;"><font color="black"><b>C. Dieci</b></font></span><span style="position:relative;top:300px;left:-140px;z-index:1;"><a href="http://www.summitpost.org/show/mountain_link.pl/mountain_id/1908"><font color="black"><b>Sassolungo</b></font></a></span><span style="position:relative;top:300px;left:-90px;z-index:1;"><a href="http://www.summitpost.org/show/mountain_link.pl/mountain_id/2761"><font color="black"><b>S. Ciampac</b></font></a></span><span style="position:relative;top:280px;left:-50px;z-index:1;"><a href="http://www.summitpost.org/show/mountain_link.pl/mountain_id/3470"><font color="black"><b>P. Puez</b></font></a></span><span style="position:relative;top:300px;left:-50px;z-index:1;"><font color="black"><b>Dantersass</b></font></span><span style="position:relative;top:280px;left:-10px;z-index:1;"><a href="http://www.summitpost.org/show/mountain_link.pl/mountain_id/2910"><font color="black"><b>Le Odle</b></font></a></span><span style="position:relative;top:410px;left:0px;z-index:1;"><font color="white"><b>C. Colli Alti</b></font></span><span style="position:relative;top:410px;left:30px;z-index:1;"><font color="white"><b>M. Muro</b></font></span><span style="position:relative;top:410px;left:40px;z-index:1;"><font color="white"><b>P. Tre Dita</b></font></span><span style="position:relative;top:280px;left:-50px;z-index:1;"><a href="http://www.summitpost.org/show/mountain_link.pl/mountain_id/2834"><font color="black"><b>Sass de Putia</b></font></a></span><span style="position:relative;top:300px;left:-70px;z-index:1;"><font color="black"><b>M. Rovina</b></font></span><span style="position:relative;top:430px;left:110px;z-index:1;"><font color="white"><b>Plan de Corones</b></font></span><span style="position:relative;top:385px;left:30px;z-index:1;"><font color="white"><b>Plose</b></font></span><span style="position:relative;top:280px;left:0px;z-index:1;"><a href="http://www.summitpost.org/show/mountain_link.pl/mountain_id/878"><font color="black"><b>Ortles/Cevedale Group</b></font></a></span></div><div id="labelingG" style="font-family:arial;font-size:12px;width:3900px;visibility:hidden"><span style="position:relative;top:125px;left:50px;z-index:1;"><font color="black"><b>Croda da Campo</b></font></span><span style="position:relative;top:105px;left:50px;z-index:1;"><font color="black"><b>Cima Bagni</b></font></span><span style="position:relative;top:155px;left:60px;z-index:1;"><font color="black"><b>Campanili Popèra</b></font></span><span style="position:relative;top:125px;left:40px;z-index:1;"><font color="black"><b>Cima Popèra</b></font></span><span style="position:relative;top:105px;left:40px;z-index:1;"><font color="black"><b>Monte Giralba</b></font></span><span style="position:relative;top:255px;left:-120px;z-index:1;"><font color="white"><b>Neuner</b></font></span><span style="position:relative;top:235px;left:-40px;z-index:1;"><font color="white"><b>Sextener Rotwand</b></font></span><span style="position:relative;top:85px;left:-80px;z-index:1;"><font color="black"><b>Elfer</b></font></span><span style="position:relative;top:125px;left:10px;z-index:1;"><a href="http://www.summitpost.org/show/mountain_link.pl/mountain_id/2909"><font color="black"><b>Zwölfer</b></font></a></span><span style="position:relative;top:265px;left:140px;z-index:1;"><font color="white"><b>Einser</b></font></span><span style="position:relative;top:125px;left:200px;z-index:1;"><font color="black"><b>Antelao</b></font></span><span style="position:relative;top:165px;left:320px;z-index:1;"><a href="http://www.summitpost.org/show/mountain_link.pl/mountain_id/2860"><font color="black"><b>Paternkofel</b></font></a></span><span style="position:relative;top:125px;left:290px;z-index:1;"><a href="http://www.summitpost.org/show/mountain_link.pl/mountain_id/27"><font color="black"><b>Große Zinne</b></font></a></span><span style="position:relative;top:145px;left:270px;z-index:1;"><a href="http://www.summitpost.org/show/mountain_link.pl/mountain_id/3996"><font color="black"><b>Schusterplatte</b></font></a></span><span style="position:relative;top:95px;left:230px;z-index:1;"><font color="black"><b>Dreischusterspitze</b></font></span><span style="position:relative;top:145px;left:240px;z-index:1;"><font color="black"><b>Sorapis</b></font></span><span style="position:relative;top:165px;left:270px;z-index:1;"><a href="http://www.summitpost.org/show/mountain_link.pl/mountain_id/1399"><font color="black"><b>Pelmo</b></font></a></span><span style="position:relative;top:295px;left:200px;z-index:1;"><font color="white"><b>Schwabenalpenkopf</b></font></span><span style="position:relative;top:285px;left:260px;z-index:1;"><font color="white"><b>Schwalbenkofel</b></font></span><span style="position:relative;top:165px;left:210px;z-index:1;"><font color="black"><b>Piz Popena</b></font></span><span style="position:relative;top:145px;left:200px;z-index:1;"><a href="http://www.summitpost.org/show/mountain_link.pl/mountain_id/2270"><font color="black"><b>Monte Cristallo</b></font></a></span><span style="position:relative;top:175px;left:250px;z-index:1;"><font color="black"><b>Haunold</b></font></span><span style="position:relative;top:195px;left:310px;z-index:1;"><font color="black"><b>Hochebenkofel</b></font></span><span style="position:relative;top:205px;left:370px;z-index:1;"><a href="http://www.summitpost.org/show/mountain_link.pl/mountain_id/2886"><font color="black"><b>Civetta</b></font></a></span><span style="position:relative;top:205px;left:460px;z-index:1;"><font color="black"><b>Tofana di Mezzo</b></font></span><span style="position:relative;top:185px;left:420px;z-index:1;"><font color="black"><b>Tofana di Dentro</b></font></span><span style="position:relative;top:345px;left:300px;z-index:1;"><font color="white"><b>Strudelköpfe</b></font></span><span style="position:relative;top:345px;left:360px;z-index:1;"><font color="white"><b>Dürrenstein</b></font></span><span style="position:relative;top:205px;left:270px;z-index:1;"><font color="black"><b>Hohe Gaissl</b></font></span><span style="position:relative;top:285px;left:-900px;z-index:1;"><font color="white"><b>Gsellknoten</b></font></span><span style="position:relative;top:185px;left:240px;z-index:1;"><a href="http://www.summitpost.org/show/mountain_link.pl/mountain_id/337"><font color="black"><b>Marmolada</b></font></a></span><span style="position:relative;top:205px;left:260px;z-index:1;"><font color="black"><b>Gran Vernel</b></font></span><span style="position:relative;top:335px;left:200px;z-index:1;"><font color="white"><b>Kleine Gaissl</b></font></span><span style="position:relative;top:225px;left:280px;z-index:1;"><font color="black"><b>Cunturines</b></font></span><span style="position:relative;top:245px;left:300px;z-index:1;"><a href="http://www.summitpost.org/show/mountain_link.pl/mountain_id/1394"><font color="black"><b>La Varella</b></font></a></span><span style="position:relative;top:225px;left:290px;z-index:1;"><a href="http://www.summitpost.org/show/mountain_link.pl/mountain_id/754"><font color="black"><b>Piz Boè</b></font></span><span style="position:relative;top:355px;left:380px;z-index:1;"><a href="http://www.summitpost.org/show/mountain_link.pl/mountain_id/1257"><font color="white"><b>Seekofel</b></font></a></span><span style="position:relative;top:235px;left:320px;z-index:1;"><a href="http://www.summitpost.org/show/mountain_link.pl/mountain_id/1316"><font color="black"><b>C. Piscadu</b></font></a></span><span style="position:relative;top:275px;left:310px;z-index:1;"><font color="black"><b>Neuner</b></font></span><span style="position:relative;top:265px;left:290px;z-index:1;"><font color="black"><b>Zehner</b></font></span><span style="position:relative;top:285px;left:280px;z-index:1;"><a href="http://www.summitpost.org/show/mountain_link.pl/mountain_id/1908"><font color="black"><b>Langkofel</b></font></a></span><span style="position:relative;top:285px;left:330px;z-index:1;"><a href="http://www.summitpost.org/show/mountain_link.pl/mountain_id/2761"><font color="black"><b>S. Ciampac</b></font></a></span><span style="position:relative;top:265px;left:360px;z-index:1;"><a href="http://www.summitpost.org/show/mountain_link.pl/mountain_id/3470"><font color="black"><b>Puezspitzen</b></font></a></span><span style="position:relative;top:285px;left:330px;z-index:1;"><font color="black"><b>Zwischenkofel</b></font></span><span style="position:relative;top:265px;left:350px;z-index:1;"><a href="http://www.summitpost.org/show/mountain_link.pl/mountain_id/2910"><font color="black"><b>Geislergruppe</b></font></a></span><span style="position:relative;top:395px;left:290px;z-index:1;"><font color="white"><b>Hochalpenkopf</b></font></span><span style="position:relative;top:395px;left:320px;z-index:1;"><font color="white"><b>Maurerkopf</b></font></span><span style="position:relative;top:395px;left:330px;z-index:1;"><font color="white"><b>Dreifingerspitze</b></font></span><span style="position:relative;top:265px;left:210px;z-index:1;"><a href="http://www.summitpost.org/show/mountain_link.pl/mountain_id/2834"><font color="black"><b>Peitlerkofel</b></font></a></span><span style="position:relative;top:285px;left:180px;z-index:1;"><font color="black"><b>Aferer Geisseln</b></font></span><span style="position:relative;top:415px;left:370px;z-index:1;"><font color="white"><b>Kronplatz</b></font></span><span style="position:relative;top:370px;left:310px;z-index:1;"><font color="white"><b>Plose</b></font></span><span style="position:relative;top:265px;left:260px;z-index:1;"><a href="http://www.summitpost.org/show/mountain_link.pl/mountain_id/878"><font color="black"><b>Ortler/Cevedale Group</b></font></a></span></div><table cellpadding=0 cellspacing=0 style="position:relative;"><tr><td><img src="http://www.summitpost.org/images/original/123563.jpg"></td><td><img src="http://www.summitpost.org/images/original/123565.jpg"></td><td><img src="http://www.summitpost.org/images/original/123566.jpg"></td><td><img src="http://www.summitpost.org/images/original/123567.jpg"></td><td><img src="http://www.summitpost.org/images/original/123568.jpg"></td><td><img src="http://www.summitpost.org/images/original/123569.jpg"></td></tr></table></div><font color="green"><b>Summit View Hochgrabe: the complete Dolomites. </font></b><span style="cursor:hand;cursor:pointer;"><span id="hideAll" style="cursor:hand;cursor:pointer;text-decoration:underline;" onclick="labelingG.style.visibility='hidden'; labelingI.style.visibility='hidden'; hideAll.style.textDecoration='none'; showG.style.textDecoration='underline';showI.style.textDecoration='underline';"><font color="red"><b>Hide</b></font></span> <font color="red"> <b> / </b></font><span id="showG" style="cursor:hand;cursor:pointer;text-decoration:underline;" onclick="labelingG.style.visibility='visible'; labelingI.style.visibility='hidden'; hideAll.style.textDecoration='underline';showG.style.textDecoration='none';showI.style.textDecoration='underline';"><font color="red"> <b>German</b></font></span><font color="red"> <b> / </b></font><span id="showI" onclick="labelingG.style.visibility='hidden'; labelingI.style.visibility='visible'; hideAll.style.textDecoration='underline';showI.style.textDecoration='none';showG.style.textDecoration='underline';"><font color="red"><b>Italian</b></font></span><font color="green"> <b>Labels</b></font></span></div></div>

Images

Olperer, Fußstein, Schrammacher as seen from GrubenkopfGroßer Möseler, Hochferner, Hochfeiler and Hoher WeißzintThe Marmolada Massif as seen from Col da CucThe Biegengebirge part of the...Summit view Bairnockspitze: Pfunderer Berge360° summit panorama Col da CucThe Northern Chain of the Pale di San Martino Group

Comments


[ Post a Comment ]
Viewing: 1-20 of 29 « PREV 1 2 NEXT » 

Lukas KunzeGreat job !

Lukas Kunze

Voted 10/10

Great job Gangolf. I thought about posting a similar article to explain the html coding. This is a perfect startup!
Cheers Lukas
Posted Nov 5, 2006 3:53 pm

Gangolf HaubRe: Great job !

Gangolf Haub

Hasn't voted

Thanks Lukas! I'll add a section, explaining the code. I wanted to do this but somehow ended up not doing it. Doh!
Posted Nov 6, 2006 5:45 pm

alex_vegaFantastic ..

alex_vega

Voted 10/10

.. job Gangolf! Your help will help me sure in future. Thank you for posting!

Cheers, Alex
Posted Nov 5, 2006 4:57 pm

Gangolf HaubRe: Fantastic ..

Gangolf Haub

Hasn't voted

Thanks Alex - this is exactly the reason why I posted this article: people keep asking me about the panos and now I can simply direct them here ;-)
Posted Nov 6, 2006 5:54 pm

thephotohikerUnparalleled !

thephotohiker

Voted 10/10

Your work on this is superb. If anyone had doubts about whether or not you should be at the head of the class, this should dispel any such notions!
Posted Nov 5, 2006 5:11 pm

Gangolf HaubRe: Unparalleled !

Gangolf Haub

Hasn't voted

Thanks a lot. I think it still needs a bit of tweaking ...
Posted Nov 6, 2006 5:55 pm

liviozindeed...

livioz

Voted 10/10

..a very useful article!
Posted Nov 5, 2006 11:22 pm

Gangolf HaubRe: indeed...

Gangolf Haub

Hasn't voted

Thanks Livio, also for the discussions we had over the years about the several techniques :-)
Posted Nov 6, 2006 5:55 pm

gulohelp

gulo

Voted 10/10

this might be something simple I am missing but after I add the code to my picture page how do I remove the original image ?
I made one at http://www.summitpost.org/image/241240/153204/western-view.html but
it's still showing original image on top

thanks
Posted Nov 6, 2006 6:48 am

Gangolf HaubRe: help

Gangolf Haub

Hasn't voted

You can't - I hadn't thought that people might use the panorama code on the picture page itself - my intension had been mountain or route pages. Yes it works but in that case the small picture will always remain on top.
Posted Nov 6, 2006 7:39 am

rpcExcellent!

rpc

Voted 10/10

thanks for the great effort Gangolf!
Posted Nov 6, 2006 5:40 pm

Gangolf HaubRe: Excellent!

Gangolf Haub

Hasn't voted

Thanks a lot, hopefully it will pay off...
Posted Nov 6, 2006 5:56 pm

gimpilatorAmazing

gimpilator

Voted 10/10

This is one of the best and most useful articles I've seen posted. Thank you.
Posted Nov 6, 2006 11:23 pm

William MarlerExcellent work

William Marler

Voted 10/10

Great job very informative and helpful. Cheers William
Posted Nov 7, 2006 4:44 pm

Sebastian HammStanding ovations!

Sebastian Hamm

Voted 10/10

Thank you very much for this great article. I´ll try it out. Gruß Sebastian
Posted Nov 9, 2006 10:04 pm

vvujisicThanks Gangolf

vvujisic

Voted 10/10

for helping all of us! I hope that i will understand all these commands, hehe...
Posted Nov 12, 2006 12:00 pm

Gangolf HaubRe: Thanks Gangolf

Gangolf Haub

Hasn't voted

No need to understand them ;-) That was part of the reason I put them up here. Just copy and paste, then change the numbers of the pictures and you're done (at least with the un-labelled sliding panos). Easy, isn't it ;-)
Posted Nov 13, 2006 7:34 am

vvujisicRe: Thanks Gangolf

vvujisic

Voted 10/10

Yes! Thanks again in the name of all SP members!
Posted Nov 13, 2006 12:18 pm

danielrothwww.alpen-panoramen.de

Hasn't voted

Cool stuff, man! But if you want to avoid the HTML, have a look at the site www.alpen-panoramen.de - there you can interactively label the summits on the pano you've uploaded - that rocks!
Posted Nov 13, 2006 4:05 pm

Gangolf HaubRe: www.alpen-panoramen.de

Gangolf Haub

Hasn't voted

Yes, but I haven't figured out, how to ajax, yet ;-)
Posted Nov 13, 2006 4:29 pm

Viewing: 1-20 of 29 « PREV 1 2 NEXT »