Logo
Banner Informatica

Mappe e stili

Per creare zone attive in un'immagine si usa il tag<map>

All'interno di questo tag di definiscono delle aree con coordinate e link

Esempio d'uso

	<a href="Page1.html">
		<img src="Home.jpg" width="100%" title="Indice" usemap="#IndexMap">
	</a>

	<map name="IndexMap">
		<area shape="rect" coords="0,70,849,170" href="Page1.html#Tit1" title="Paragrafo 1">
		<area shape="rect" coords="0,270,849,370" href="Page1.html#Tit2" title="Paragrafo 2">
		<area shape="rect" coords="0,500,849,600" href="Page1.html#Tit3" title="Paragrafo 3">
		<area shape="rect" coords="0,700,849,800" href="Page1.html#Tit4" title="Paragrafo 4">
	</map>

Per formattare e decorare testo e immagine si usano i fogli di stili (CSS)

Esempio d'uso

	.ClsContainer
	{
		margin: 0 auto;
		overflow: hidden;
		width: 850px;
		background-color: #f8f6e6;
		min-height: 100%;
	}

	.TxtColor
	{
		color: #2c0e10;
	}

	.Indent1
	{
		padding-right: 24px;
	}

	.Indent2
	{
		margin-left: 24px;
		padding-left: 10px;
	}

	.ClsBold
	{
		font-weight: bold;
	}

	.ClsRosso
	{
		color: #ff0000;
	}
	
	...
	
	<img src="busines_plan1.jpg" style="float:left; margin: 10px; height: 150px;">

Ecco i link ad una pagina di indice con aree attive

Esempio indice      Esempio indice su JSFiddle

Ecco i link ad una pagina di esempio con uso di stili

Esempio stili      Esempio stili su JSFiddle

Torna all'indice