FRIULIONTHEROAD.COM

-AREA DI SERVIZIO-

Questo spazio è stato scelto per condividere il materiale, che per le restrizioni proprie del servizio hosting del sito principale in WP, non poteva venir reso disponibile.

Avevo la necessità di creare delle mappe, più o meno interattive, ma dovendo necessariamente basarmi su servizi free e software opensource, ero limitato sotto vari aspetti.

Indice dei contenuti presenti in questo spazio web

Le mappe sono state realizzate partendo da quanto disponibile in rete.

La pagina originaria, inglese, è raggiungibile all'indirizzo: https://wiki.openstreetmap.org/wiki/Openlayers_POI_layer_example

La procedura per la pagina con il titolo è in Italiano. Rispetto alla versione originale in inglese, questa versione presenta un titolo avendo risolto il problema del tag <!DOCTYPE html>, un ridimensionamento delle dimesioni della mappa, riporta la procedura per la creazione di POI's personali, presenta inoltre un'ottimizzazione delle coordinate di partenza (centratura mappa) e dello zoom base. La pagina è raggiungibile all'indirizzo: https://wiki.openstreetmap.org/wiki/IT:Openlayers_POI_layer_example

Per comodità riporto il contenuto completo della pagina originaria.

ATTENZIONE

  1. Controllare che il vostro web editor (es. BlueGriffon) non aggiunga autonomamente il tag <!DOCTYPE html> all'inizio pagina, altrimenti la stessa pagina non funziona
  2. Il codice funziona solamente se il file che lo contiene, viene ospitato in un web server, che sia locale o meno. Ho perso una notte per capire che la mancata visualizzazione dei POI's o PDI (in italiano), ovvero i Point Of Interest (Punti D'Interesse), non era dato da un errore nel codice o nella formattazione del file che ne contiene descrizione e coordinate, ma dal fatto che cercavo di farlo funzionare in locale, senza aver un web server (es. Xampp) configurato sotto.
  3. I dati nel file textfile.txt devono necessariamente essere separati dalla tabulazione, e con un ritorno a capo dopo l'ultima riga di dati.
↑Torna in alto

File Index.html da wiki.openstreetmap.org/wiki/Openlayers_POI_layer_example

Openlayers POI layer example

Jump to navigationJump to search
Openlayers POI layer example - Altre lingue
Screenshot of the result

Purpose

The intention is to show markers for POIs on top of an OSM Slippy Map. This example shows a very simple way of doing this.


The files

index.html

Copy the following into a new HTML file and name it index.html.

<html><body>
  <div id="mapdiv"></div>
  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script>
    map = new OpenLayers.Map("mapdiv");
    map.addLayer(new OpenLayers.Layer.OSM());
       
    var pois = new OpenLayers.Layer.Text( "My Points",
                    { location:"./textfile.txt",
                      projection: map.displayProjection
                    });
    map.addLayer(pois);
 // create layer switcher widget in top right corner of map.
    var layer_switcher= new OpenLayers.Control.LayerSwitcher({});
    map.addControl(layer_switcher);
    //Set start centrepoint and zoom    
    var lonLat = new OpenLayers.LonLat( 9.5788, 48.9773 )
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            map.getProjectionObject() // to Spherical Mercator Projection
          );
    var zoom=11;
    map.setCenter (lonLat, zoom);  
    
  </script>
</body></html>

Attention: Don't work normally with <!DOCTYPE html>, see the discussion page

textfile.txt

Then create a second file called textfile.txt. It is a tab separated text file, each column being defined in the first line. An example of this file could be:

lat	lon	title	description	icon	iconSize	iconOffset
48.9459301	9.6075669	Title One	Description one	Ol_icon_blue_example.png 24,24	0,-24
48.9899851	9.5382032	Title Two	Description two Ol_icon_red_example.png	16,16	-8,-8

Attention: Please make sure you press enter after the last character in the last line. Otherwise the last POI will not work. The space in the title and description items is not the same as the TAB which separates the items.

Also see OpenLayers documentation on Layer.Text for more details.

Icon files

Then you want to download the two icon files that are needed by this example:

Result

All four files have to be in the same folder on your web server.

Now you can open a browser window with the URL of your new index.html file. You will see OSM maps, served from the main server. If you click on the layers switcher symbol ("+" in the top right corner of the map), you will see an overlay layer called "My Points". This layer shows the markers defined by the file textfile.txt. The blue and the red marker on the map are the visible result.

Important

If you publish this example on your website, you are responsible to add all license requirements!


↑Torna in alto

File Index_IT.html da wiki.openstreetmap.org/wiki/IT:Openlayers_POI_layer_example

IT:Openlayers POI layer example

Jump to navigationJump to search

Visualizzare POIs sulla mappa tramite OpenLayers

Screenshot del risultato

La pagina seguente è un esempio su come evidenziare e descrivere sulla mappa alcuni punti di interesse (POIs) (tramite OpenLayers).

Visualizza l'esempio (in Inglese).

Preparazione

Nell'esempio si ipotizza di dover recuperare alcuni POIs direttamente da OpenStreetMap per visualizzarli sulla mappa. Se invece i POIs fossero punti non necessariamente provenienti da OpenStreetMap, scorri direttamente a #File .txt per OpenLayers.

Recuperare POIs da OpenStreetMap

Per recuperare POIs da OpenStreetMap occorre ottenere una mappa in formato .osm aggiornata. Puoi farlo visionando la pagina sull'esportazione di mappe da OpenStreetMap.

Una volta ottenuta è necessario estrarre da essa soltanto i POIs di nostro interesse (per esempio recuperare esclusivamente i ristoranti). Per eseguire queste operazioni di filtraggio si può utilizzare il comando Osmosis.

Per installare Osmosis seguire la pagina IT:Osmosis/Installation.

Ecco come utilizzare il comando osmosis per recuperare da un file input_map.osm esclusivamente i ristoranti (amenity=restaurant) e salvare il risultato in un file chiamato restaurants.osm:

osmosis --rx input_map.osm --tf accept-nodes amenity=restaurant --tf reject-relations --tf reject-ways --wx restaurants.osm

Ora che si ha finalmente un file contenente esclusivamente i POIs di nostro interesse, è ora necessaria una conversione in un formato diverso dall'.osm, poichè quest'ultimo non è adatto per essere letto da OpenLayers.

Conversione file .osm in .txt per OpenLayers

Non essendo OpenLayers in grado di leggere i dati sotto forma di formato .osm, è necessario utilizzare programmi come [GPSBabel] per la conversione.

Per installare GPSBabel seguire la pagina IT:GPSBabel/Installation.

Prima di utilizzare GPSBabel occorre creare un file di regole di conversione che chiameremo formattazione.style.

formattazione.style:

# gpsbabel XCSV style file
#
# Format: Openlayers.Layer.Text
# Author: vclaw
# Date: 16/01/2010
# based on GPSBabel example styles
#
DESCRIPTION Openlayers.Layer.Text
#
#
# FILE LAYOUT DEFINITIIONS:
#
FIELD_DELIMITER TAB
RECORD_DELIMITER NEWLINE
SHORTLEN 24

PROLOGUE	lat	lon	title	description	icon	iconSize	iconOffset
EPILOGUE  NEWLINE

#
# INDIVIDUAL DATA FIELDS, IN ORDER OF APPEARANCE:
#

OFIELD LAT_DECIMAL, "", "%08.5f"
OFIELD LON_DECIMAL, "", "%08.5f"
OFIELD SHORTNAME, "", "%-.24s"
OFIELD DESCRIPTION, "", "%-.50s"
OFIELD CONSTANT,"icona.png","%s"   # (icon)
OFIELD CONSTANT,"11","%s"   # (icon size)
OFIELD CONSTANT,COMMA,"%s","no_delim_before"
OFIELD CONSTANT,"13","%s","no_delim_before"   # (icon size)
OFIELD CONSTANT,"-8","%s"   # (icon offset)
OFIELD CONSTANT,COMMA,"%s","no_delim_before"
OFIELD CONSTANT,"-8","%s","no_delim_before"   # (icon offset)

Prestare attenzione al fatto che il file formattazione.style deve terminare con un "a capo", altrimenti l'ultimo POI nell'elenco potrebbe non essere visualizzato correttamente da OpenLayers.

Ecco come utilizzare il comando gpsbabel per eseguire il cambio di formato:

gpsbabel -i osm -f restaurants.osm -o xcsv,style=formattazione.style -F textfile.txt

Il comando ricava i POIs in formato .osm dal file restaurants.osm, e li converte (in formato xcsv) in un file chiamato textfile.txt pronto per essere usato da OpenLayers. Le regole per questa conversione sono quelle scritte nel file formattazione.style.

Procedimento

File .txt per OpenLayers

Il file textfile.txt conterrà tutti i POIs da visualizzare sulla mappa tramite OpenLayers.

Il file dovrebbe essere in un formato molto simile a questo:

textfile.txt:

lat	lon	title	description	icon	iconSize	iconOffset
48.9459301	9.6075669	Titolo uno	Descrizione uno<br>Bla bla.<br>	Ol_icon_blue_example.png	24,24	0,-24
48.9899851	9.5382032	Titolo due	Descrizione due.	Ol_icon_red_example.png	16,16	-8,-8

Ovvero un file di testo in formato .txt in cui la prima riga definisce i tipi delle colonne (lat, lon, ...) e nelle restanti righe sono elencati i POIs.

Le colonne dei POIs sono separate da tabulazioni.

Il file richiama anche il percorso delle icone che devono essere visualizzate sulla mappa (Ol_icon_blue_example.png e Ol_icon_red_example.png). Il file ne definisce la grandezza e l'offset dal punto di coordinata.

Vedi anche la documentazione su OpenLayers Layer.Text per maggiori dettagli.

Per scaricare le due icone necessarie per realizzare l'esempio:

Creazione file HTML

Occorre preparare un file HTML che si occuperà di recuperare e mostrare sulla mappa alcuni POIs.

Il file potrebbe essere per esempio questo:

index.html:

<!doctype html>
<html>
<head>
<title>OpenLayers OpenStreetMap</title>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
// Posizione iniziale della mappa
var lat  = 48.9773;
var lon  = 9.5788;
var zoom = 11;

function init() {
	map = new OpenLayers.Map (
		"map",
		{
			controls:[ 
				new OpenLayers.Control.Navigation(),
				new OpenLayers.Control.PanZoomBar(),
				new OpenLayers.Control.ScaleLine(),
				new OpenLayers.Control.Permalink('permalink'),
				new OpenLayers.Control.MousePosition(),                    
				new OpenLayers.Control.Attribution()
			],
			projection: new OpenLayers.Projection("EPSG:900913"),
			displayProjection: new OpenLayers.Projection("EPSG:4326")
		}
	);
	var mapnik = new OpenLayers.Layer.OSM("OpenStreetMap (Mapnik)");
	map.addLayer(mapnik);
	var pois = new OpenLayers.Layer.Text(
		"My Points",
		{
			location:"./textfile.txt",
			projection: map.displayProjection
		}
	);
	map.addLayer(pois);
	map.addControl(new OpenLayers.Control.LayerSwitcher());
	var lonLat = new OpenLayers.LonLat( lon ,lat ).transform(
		new OpenLayers.Projection("EPSG:4326"),  // transform from WGS 1984
		map.getProjectionObject()                // to Spherical Mercator Projection
	);
	map.setCenter (lonLat, zoom);
}
</script>
</head>
<body onload="init();">
	<h1>POI marker</h1>
	<div style="width:500px; height:400px" id="map"></div>
</body>
</html>

Si può denotare questo stralcio di codice sorgente:

// [...]

var pois = new OpenLayers.Layer.Text(
	"My Points",
	{
		location:"./textfile.txt",
		projection: map.displayProjection
	}
);

// [...]

Questa parte si occupa di creare il layer per visualizzare i POIs sulla mappa. I POIs saranno recuperati dal file textfile.txt.

Risultato

Aprendo nel browser il file index.html verrà mostrata la mappa OpenStreetMap (Mapnik) ed in sovrapposizione le icone sui POIs le cui posizioni sono definite nel file textfile.txt.

Cliccando sul menu blu contrassegnato dal simbolo "+" nell'angolo in alto a destra nella mappa, sarà possibile rimuovere il layer con le icone.

ATTENZIONE

  1. Se non visualizza la traccia, mentre visualizza la dicitura Descrizione del layer nel menu a tendina a destra, probabilmente il servizio di hosting non permette di caricare i file gpx. In questo caso è sufficiente cambiare l'estensione da .gpx in .txt (modificando di conseguenza il listato).
  2. Nella parte finale viene suggerito di modificare le seguenti linee di codice 
    // Add the Layer with GPX Track
var lgpx = new OpenLayers.Layer.GML("Traccia GPX", "traccia.gpx", {
      format: OpenLayers.Format.GPX,
      style: {strokeColor: "green", strokeWidth: 5, strokeOpacity: 0.5},
      projection: new OpenLayers.Projection("EPSG:4326")
});

    purtroppo la mie conoscenze di scripting non sono sufficienti a farmi trovare l'errore, ma si può comunque personalizzare il codice secondo le proprio esigenze intervenendo in questa sezione  
    var lgpx = new OpenLayers.Layer.Vector("Descrizione del layer", {
				strategies: [new OpenLayers.Strategy.Fixed()],
				protocol: new OpenLayers.Protocol.HTTP({
					url: "traccia.gpx",
					format: new OpenLayers.Format.GPX()
				}),
				style: {strokeColor: "green", strokeWidth: 5, strokeOpacity: 0.5},
				projection: new OpenLayers.Projection("EPSG:4326")
			});

    sostituendo  "Descrizione del layer" con quella che meglio risponde alle nostre esigenze, racchiudendola sempre fra apici; il file della  "traccia.gpx" con quella che vogliamo usare, ricordando eventualmente di cambiare da GPX a TXT, come indicato nel punto 1 qui sopra. Nella riga style è possibile cambiare il colore della traccia, la sua dimensione e la dimensione dell'opacità laterale

↑Torna in alto

File Index_Traccia.html da wiki.openstreetmap.org/wiki/IT:Openlayers_POI_layer_example

IT:Openlayers Track example

Jump to navigationJump to search

Visualizzare file Track in formato GPX sulla mappa

Screenshot of the result

Questo esempio mostra come visualizzare una o più tracce GPX su una mappa utilizzando le librerie OpenLayers.

L' esempio è basato su OpenLayers Simple Example.

Questo esempio mostra la mappa OSM con le sue varianti Mapnik, Osmarender e Cyclemap, un layer con un marker nella posizione indicata come centro della mappa ed un layer con la traccia GPX.

il codice:

var lgpx = new OpenLayers.Layer.GML("Traccia GPX", "traccia.gpx", {
				format: OpenLayers.Format.GPX,
				style: {strokeColor: "green", strokeWidth: 5, strokeOpacity: 0.5},
				projection: new OpenLayers.Projection("EPSG:4326")
			});

definisce il layer di tipo GML usato per diversi formati vettoriali di dati, in questi caso il formato GPX, e definisce il file dove caricare questi dati, "traccia.gpx".

Da notare che si sarebbe potuto tranquillamente chiamare questo file "traccia.txt" se il server dove è ospitato il vostro sito non permette l' upload di files di tipo .gpx.

In questo esempio i vari layers sono caricati sulla mappa dopo la loro definizione anzichè con una unica istruzione tipo;

map.addLayers( [ layerMapnik,layerTilesAtHome,layerCycleMap,layerMarkers, lgpx )];

Il file HTML

Copiare il codice seguente in un file testo e salvarlo come file HTML nel vostro sito (per ragioni di sicurezza Javascript impedisce il caricamento della traccia se il file HTML è salvato in una cartella locale).

Esempio per OpenLayers 2.12 o seguente:

<html>
<head>
	<!-- Source: http://wiki.openstreetmap.org/wiki/Openlayers_Track_example -->
	<title>Simple OSM GPX Track</title>
	<!-- bring in the OpenLayers javascript library
		 (here we bring it from the remote site, but you could
		 easily serve up this javascript yourself) -->
	<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
	<!-- bring in the OpenStreetMap OpenLayers layers.
		 Using this hosted file will make sure we are kept up
		 to date with any necessary changes -->
	<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>

	<script type="text/javascript">
		// Start position for the map (hardcoded here for simplicity,
		// but maybe you want to get this from the URL params)
		var lat=44.353
		var lon=11.707
		var zoom=13

		var map; //complex object of type OpenLayers.Map

		function init() {
			map = new OpenLayers.Map ("map", {
				controls:[
					new OpenLayers.Control.Navigation(),
					new OpenLayers.Control.PanZoomBar(),
					new OpenLayers.Control.LayerSwitcher(),
					new OpenLayers.Control.Attribution()],
				maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
				maxResolution: 156543.0399,
				numZoomLevels: 19,
				units: 'm',
				projection: new OpenLayers.Projection("EPSG:900913"),
				displayProjection: new OpenLayers.Projection("EPSG:4326")
			} );

			// Define the map layer
			// Here we use a predefined layer that will be kept up to date with URL changes
			layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
			map.addLayer(layerMapnik);
			layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
			map.addLayer(layerCycleMap);
			layerMarkers = new OpenLayers.Layer.Markers("Markers");
			map.addLayer(layerMarkers);

			// Add the Layer with the GPX Track
			var lgpx = new OpenLayers.Layer.Vector("Descrizione del layer", {
				strategies: [new OpenLayers.Strategy.Fixed()],
				protocol: new OpenLayers.Protocol.HTTP({
					url: "traccia.gpx",
					format: new OpenLayers.Format.GPX()
				}),
				style: {strokeColor: "green", strokeWidth: 5, strokeOpacity: 0.5},
				projection: new OpenLayers.Projection("EPSG:4326")
			});
			map.addLayer(lgpx);

			var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
			map.setCenter(lonLat, zoom);

			var size = new OpenLayers.Size(21, 25);
			var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
			var icon = new OpenLayers.Icon('http://www.openstreetmap.org/openlayers/img/marker.png',size,offset);
			layerMarkers.addMarker(new OpenLayers.Marker(lonLat,icon));
		}
	</script>

</head>
<!-- body.onload is called once the page is loaded (call the 'init' function) -->
<body onload="init();">
	<!-- define a DIV into which the map will appear. Make it take up the whole window -->
	<div style="width:100%; height:90%" id="map"></div>
</body>
</html>

il file .gpx

Copiare il codice seguente in un file testo e salvarlo come "traccia.gpx" nella stessa cartella del file HTML.

<?xml version="1.0" encoding="UTF-8"?>
<gpx version="1.0">
	<name>Example gpx</name>
    <trk>
	<trkseg>
            <trkpt lon="11.707633137702942" lat="44.35309951704362"><ele>51.0</ele><time>2010-12-26T17:07:40.421Z</time></trkpt>
            <trkpt lon="11.70541763305664" lat="44.35334884358864"><ele>50.0</ele><time>2010-12-26T17:07:47.750Z</time></trkpt>
            <trkpt lon="11.704532504081726" lat="44.35360967637735"><ele>50.0</ele><time>2010-12-26T16:07:50.877Z</time></trkpt>
            <trkpt lon="11.703078746795654" lat="44.35413900993877"><ele>50.0</ele><time>2010-12-26T16:07:56.204Z</time></trkpt>
            <trkpt lon="11.701050996780396" lat="44.351427083875"><ele>52.0</ele><time>2010-12-26T16:08:10.219Z</time></trkpt>
            <trkpt lon="11.699634790420532" lat="44.350510294065636"><ele>50.0</ele><time>2010-12-26T16:08:16.451Z</time></trkpt>
            <trkpt lon="11.699248552322388" lat="44.35042206667484"><ele>50.0</ele><time>2010-12-26T16:08:17.775Z</time></trkpt>
            <trkpt lon="11.699146628379822" lat="44.35024561149473"><ele>50.0</ele><time>2010-12-26T16:08:18.644Z</time></trkpt>
            <trkpt lon="11.69867992401123" lat="44.34975460298043"><ele>51.0</ele><time>2010-12-26T16:08:21.347Z</time></trkpt>
            <trkpt lon="11.695396900177002" lat="44.346064235486004"><ele>52.0</ele><time>2010-12-26T16:08:41.258Z</time></trkpt>
            <trkpt lon="11.69371247291565" lat="44.3454734482214"><ele>55.0</ele><time>2010-12-26T16:08:47.376Z</time></trkpt>
            <trkpt lon="11.69244647026062" lat="44.345089816939044"><ele>54.0</ele><time>2010-12-26T16:08:51.860Z</time></trkpt>
            <trkpt lon="11.688272953033447" lat="44.34223552137326"><ele>57.0</ele><time>2010-12-26T16:09:10.671Z</time></trkpt>
            <trkpt lon="11.687886714935303" lat="44.34198231102353"><ele>58.0</ele><time>2010-12-26T16:09:12.377Z</time></trkpt>
            <trkpt lon="11.687532663345337" lat="44.341848032364"><ele>59.0</ele><time>2010-12-26T16:09:13.682Z</time></trkpt>
            <trkpt lon="11.687403917312622" lat="44.341886397726675"><ele>59.0</ele><time>2010-12-26T16:09:14.136Z</time></trkpt>
            <trkpt lon="11.68720543384552" lat="44.34174828230355"><ele>59.0</ele><time>2010-12-26T16:09:15.036Z</time></trkpt>
            <trkpt lon="11.687087416648865" lat="44.34137613634955"><ele>59.0</ele><time>2010-12-26T16:09:16.767Z</time></trkpt>
            <trkpt lon="11.681814193725586" lat="44.33566704462428"><ele>61.0</ele><time>2010-12-26T16:09:47.832Z</time></trkpt>
    </trkseg>
	</trk>
</gpx>

Modificare l' esempio

Se l' esempio sopra riportato ha funzionato, potreste volerlo personalizzare secondo le vostre necessità.

// Start position for the map (hardcoded here for simplicity
// but maybe you want to get this from the URL params)
var lat=47.496792
var lon=7.571726
var zoom=13

// Add the Layer with GPX Track
var lgpx = new OpenLayers.Layer.GML("Traccia GPX", "traccia.gpx", {
      format: OpenLayers.Format.GPX,
      style: {strokeColor: "green", strokeWidth: 5, strokeOpacity: 0.5},
      projection: new OpenLayers.Projection("EPSG:4326")
});

↑Torna in alto

https://www.mrw.it/html/elementi-comparsa-puro-html-no-javascript_13014.html

MRW.it → HTML → Articoli → Elementi a comparsa in puro HTML (no Javascript)

Elementi a comparsa in puro HTML (no Javascript)

   Claudio Garau

In molti siti web sono implementate tecniche di web-design che consentono di mostrare o nascondere elementi al semplice click del mouse: si tratta di tecniche che hanno il grosso vantaggio di non appesantire eccessivamente la pagina mantenendo certi elementi nascosti sino a quando l'utente non ne faccia esplicita richiesta.

Si pensi, ad esempio, ai menu a tendina a scomparsa dove l'elenco dei link compare solo nel momento in cui l'utente effettua il click sull'apposito pulsante oppure, ancora, agli accordion (cd. effetto fisarmonica) dove determinate porzioni di testo compaiono solo nel momento in cui l'utente decida di visualizzarle mediante il click.

Ma come realizzare effetti del genere? Fino a poco tempo fa era possibile realizzare elementi HTML a comparsa solo facendo ricorso a Javascript. Recenti novità introdotte dallo standard HTML 5, tuttavia, aprono nuovi scenari in cui il markup HTML è più che sufficiente a raggiungere simili risultati.

I nuovi tag <summary> e <details>

summary e details sono due nuovi elementi di HTML 5.1 che consentono di mostrare e nascondere dei blocchi di contenuti all'interno di una pagina Web, all'utente verrà richiesto di interagire con le informazioni tramite un semplice click del mouse che le renderà visibili o le nasconderà a seconda di quello che era il loro stato precedente (cd, effetto "toggle").


In precedenza tale funzionalità richiedeva l'utilizzo di codice JavaScript, con questo aggiornamento sarà invece possibile sfruttare un sistema interamente basato sul markup HTML che prevede di inserire l'elemento summary all'interno di un elemento details, il primo si occuperà di nascondere i contenuti del secondo (testi, immagini..) fino a quando l'utente non scatenerà l'evento che ne determina la visualizzazione.

Un semplice esempio riguardante l'utilizzo di questi due elementi in una pagina Internet potrebbe essere il seguente:

<section>
  <h2>Lorem Ipsum</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor rutrum nisl eu facilisis. Vestibulum feugiat pretium nibh, vitae accumsan dolor varius id.
  </p>
  <details>
    <summary>
      Vestibulum eget?
    </summary>
    <p>
    Quisque lacinia molestie felis, vitae sodales neque viverra nec. Proin eu metus quis magna varius sagittis eget id ante. Maecenas vel lacus pretium, varius est quis, egestas velit. Vestibulum eget lacinia mauris.
    </p>
  </details>
  <details>
    <summary>
      Vivamus?
    </summary>
    <p>
    Praesent eget sagittis turpis. Nunc mattis arcu ullamcorper ligula interdum sagittis. Mauris sem enim, bibendum sed aliquet non, sollicitudin et quam. Vivamus quis vestibulum sapien.
    </p>
  </details>
</section>
Copia

Per completare il lavoro iniziato, e renderlo graficamente gradevole, è possibile formattare i contenuti utilizzando semplici regole di stile CSS:

body {
  font-family: 'Arial';
  color: black;
  font-size: 0.9em;
}

section {
  max-width: 450px;
}

details {
  background: green;
  color: white;
  padding: 15px;
  margin-bottom: 2px;
  border-radius: 25px;
}

summary {
  cursor: pointer;
  font-weight: 900;
  font-size: 1.2em;
}
Copia

Per testare il risultato finale si faccia click sul pulsante qui sotto:

Prova il codice

A livello di output avremo come risultato due schede che, quando sono entrambe chiuse, appariranno nel modo seguente:

Cliccando sulla piccola freccia in corrispondenza del primo summary potremo visualizzare il contenuto del details associato ad esso:

I blocchi risulteranno entrambi aperti una volta cliccato anche sulla freccia del secondo summary:

details e summary garantiscono ad oggi un buon livello di compatibilità con le versioni più aggiornate di tutti i browser Web più diffusi.

Ti è sembrato interessante?

Iscriviti alla nostra newsletter e ricevi gli ultimi aggiornamenti dal nostro network.

Free Web Hosting