Guida essenziale per l’implementazione della mappa sul loro Sito

IFRAME

Attribute Specifications to Adjust Appearance and Behavior

  • src="/(URL of initial iframe content)"
  • name="(name of frame, required for targeting)"
  • longdesc="(link to long description)"
  • width=(frame width, % or pixels)
  • height=(frame height, % or pixels)
  • align=[ top | middle | bottom | left | right | center ] (frame alignment, pick two, use comma)
  • frameborder=[ 1 | 0 ] (frame border, default is 1)
  • marginwidth=(margin width, in pixels)
  • marginheight=(margin height, in pixels)

scrolling=[ yes | no | auto ] (ability to scroll)

An example is shown here:

<iframe name="inlineframe" src="/http://maps.ilikesardinia.com/index.php?option=com_content&view=article&id=1&tmpl=component&task=preview" frameborder="0" scrolling="auto" width="500" height="180" marginwidth="5" marginheight="5" ></iframe>

 

Categorie Maps |-Sardinia All (ID=1)  

  |-Accommodation (ID=9)

    |-Cagliari (ID=58)

    |-Medio Campidano (ID=63)

    |-Nuoro (ID=58)

    |-Olbia Tempio (ID=59)

    |-Sassari (ID=60)

    |-Sulcis Iglesiente (ID=62)

  |-Enogastronomia (ID=6)

    |-Cagliari (ID=40)

    |-Medio Campidano (ID=41)

    |-Nuoro (ID=42)

    |-Olbia Tempio (ID=43)

    |-Sassari (ID=44)

    |-Sulcis Iglesiente (ID=45)

|-Handicraft (ID=8)

    |-Cagliari (ID=52)

    |-Medio Campidano (ID=53)

    |-Nuoro (ID=54)

    |-Olbia Tempio (ID=55)

    |-Sassari (ID=56)

    |-Sulcis Iglesiente (ID=57)

|-Storia e Cultura (ID=2)

    |-Cagliari (ID=10)

    |-Medio Campidano (ID=11)

    |-Nuoro (ID=12)

    |-Olbia Tempio (ID=13)

    |-Sassari (ID=14)

    |-Sulcis Iglesiente (ID=15)

|-Divertimento e Svago (ID=4)

    |-Cagliari (ID=28)

    |-Medio Campidano (ID=29)

    |-Nuoro (ID=30)

    |-Olbia Tempio (ID=31)

    |-Sassari (ID=32)

    |-Sulcis Iglesiente (ID=33)

  |-General Informations (ID=7)

    |-Cagliari (ID=51)

    |-Medio Campidano (ID=46)

    |-Nuoro (ID=47)

    |-Olbia Tempio (ID=48)

    |-Sassari (ID=49)

    |-Sulcis Iglesiente (ID=50)

|-Natura e Ambiente (ID=3)

    |-Cagliari (ID=21)

    |-Medio Campidano (ID=20)

    |-Nuoro (ID=19)

    |-Olbia Tempio (ID=18)

    |-Sassari (ID=17)

    |-Sulcis Iglesiente (ID=16)

  |-Eventi (ID=64)

    |-Cagliari (ID=27)

    |-Medio Campidano (ID=26)

    |-Nuoro (ID=22)

    |-Olbia Tempio (ID=23)

    |-Sassari (ID=2)

    |-Sulcis Iglesiente (ID=25)

 Accessible Modal Pop-ups using CSS3

Activating links

Only need to be associated by the href fragment identifier.


<ul id="links">
  <li><a href="#pop1">Pop-up One</a></li>
  <li><a href="#pop2">Pop-up Two</a></li>
  <li><a href="#pop3">Pop-up Three</a></li>
</ul>
  

The pop-up block

Every fragment identifier must have an associated block id.


<div id="pop2" class="pop-up">
  <div class="popBox">
    <div class="popScroll">
      <h2>Pop-up Two</h2>
      <p>Blah, blah, blah. Yada, yada, yada.</p>
    </div>
    <a href="/" class="close"><span>Close</span></span></a>
  </div>
  <a href="#links" class="lightbox">Back to links</a>
</div>
  

The CSS

Outside block

Takes over the whole display once activated via :target.


.pop-up {position:absolute; top:0; left:-500em}
.pop-up:target {position:static; left:0;}
  

First child block

Sets the pop-ups look, its size, position, and activation effect.


.popBox {
  background:#ffffff;

  /* alternatively fixed width / height and negative margins from 50% */
  position:absolute; left:30%; right:30%; top:30%; bottom:30%;

  z-index:1;
  /* padding:1%; removed 17/07/2012 */
  border:1px solid #3a3a3a;

  /* CSS3 rounded corners, drop-shadow and opacity fade in */
  -moz-border-radius:12px;
  border-radius:12px;
  -webkit-box-shadow:2px 2px 4px #3a3a3a;
  -moz-box-shadow:2px 2px 4px #3a3a3a;
  box-shadow:2px 2px 4px #3a3a3a;
  opacity:0;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  -ms-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}
:target .popBox {position:fixed; opacity:1;}

.popBox:hover {box-shadow:3px 3px 6px #5a5a5a;}
  

The lightbox

Is actually a link itself. On clicking it returns to the activating link set. How accessible.


.lightbox {display:none; text-indent:-200em; background:#000; opacity:0.4; width:100%; height:100%; position:fixed; top:0; left:0; bottom:0; right:0;}
:target .lightbox {display:block}
  

Close pop-up graphic

Is not a graphic but more CSS.


.close {
  position:absolute; top:-0.75em; right:-0.75em; display:block; width:1em; height:1em;
  font:bold large/1 arial, sans-serif; text-align:center; text-decoration:none;
  background:#000; border:3px solid #fff; color:#fff;
  -moz-border-radius: 1em;
  -webkit-border-radius: 1em;
  border-radius: 1em;
  -moz-box-shadow: 0 0 1px 1px #3a3a3a;
  -webkit-box-shadow: 0 0 1px 1px #3a3a3a;
  box-shadow: 0 0 1px 1px #3a3a3a;
}
.close:before {content:"X"}
.close:hover {box-shadow:0 0 1px 1px #c00; background:#c00;}
.close span {text-indent:-200em; display:block;}
  

Pop-up content block

May be bigger than the space defined, therefore allow it to scroll.


/* .popScroll {max-height:99%; overflow-y:scroll;} removed 17/07/2012 */
.popScroll {position:absolute; top:9%; left:3%; right:3%; bottom:9%; overflow-y:auto; *overflow-y:scroll; padding-right:0.5em}
  

 

Vai all'inizio della pagina