Frame e Mappa immagine

**XYZ1** · 27-06-2012, 00:27

Salve a tutti !

Ho un piccolo problema con una pagina web che sto realizzando per la mia tesina.
Ho creato su photoshop un immagine. Sulla sinistra dell'immagine ci sono i nomi delle materie, la restante parte dell'immagine è occupata da un riquadro.

Mappando l'immagine ho ricavato le coordinare di ogni " materia " ed inoltre anche quelle del riquadro in modo che quando si fa click su " italiano " si apra il collegamento ad italiano.
Fin quì tutto facile, nulla di difficile.
Quel che vorrei però è che il collegamento non si aprisse in una nuova finestra ma bensi si visualizzasse all'interno del riquadro in questione sulla stessa pagina.

Ho letto che questo si può fare con "target " però come ?

Per esempio italiano si trova a queste coordinate e cliccando nell'area compresa tra queste coordinate si apre il collegamento a italiano.html:

codice:

<area shape="rect" coords="10,63, 159,86" href="ITALIANO.html" alt=" Italiano: Gabriele D'Annunzio" />

Ora io ho trovato un codice per i frame che mi dice <a href="italiano.htm" target="main"
E ok.. ma come faccio ad impostare che per quella pagina " main " è uguale all'area compresa nel rettangolo del riquadro ( del quale mi sono ricavato le coordinate ) ?

Grazie anticipatamente a chi mi aiuterà

P.s.: Codice:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/transitional.dtd">

<html>
<head>
<title> La Mia Tesina </title>
</head>

<area shape="rect" coords=" 255,61, 1022,633" name="main">


<center>[img]SFONDOTESINA.jpg[/img]</center>
<map name="Tesina">

<area shape="rect" coords="10,63, 159,86"
href="ITALIANO.html"

alt=" Italiano: Gabriele D'Annunzio" />

<area shape="rect" coords="9,132, 134,154"
href="STORIA.html"
alt=" Italiano: Gabriele D'Annunzio" />

<area shape="rect" coords="11,202, 140,220"
href="DIRITTO.html"
alt=" Italiano: Gabriele D'Annunzio" target="main" />


<area shape="rect" coords="9,270, 154,291"
href="SCIENZE".html"
alt=" Italiano: Gabriele D'Annunzio" />


<area shape="rect" coords="9,335, 191,361"
href="ECONOMIA.html"
alt=" Italiano: Gabriele D'Annunzio" />


<area shape="rect" coords="10,400, 159,426"
href="INGLESE.html"
alt=" Italiano: Gabriele D'Annunzio" />


<area shape="rect" coords="9,460, 234,497"
href="INFORMATICA.html"
alt=" Italiano: Gabriele D'Annunzio" />


<area shape="rect" coords="8,533, 218,566"
href="MATEMATICA.html"
alt=" Italiano: Gabriele D'Annunzio" />



</html>

**Vincent.Zeno** · 27-06-2012, 00:55

ciao XYZ1,
sta volta correggo io... le prossime ricorda che sei tenuto, come tutti, ad usare il tag CODE per postare codice, grazie.

buon lavoro

**XYZ1** · 27-06-2012, 01:16

Grazie e scusami.. per il futuro lo terrò presente : )

**Prill** · 27-06-2012, 09:27

Per visualizzare la pagina all'interno del riquadro dell'immagine usando un iframe, dovrai posizionare lo stesso iframe su quella parte dell'immagine. E per avere una sovrapposizione dell'iframe all'immagine ricorrere a posizionamenti assoluti. Esempio:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>La Mia Tesina</title>

<style type="text/css">
#container{
width: inserireLarghezza;
position: relative;
margin:0 auto;
}
img{
position: absolute;
top: 0;
left: 0;
z-index: 1;
border: 0
}
iframe{
width: 750px;
height: 500px;
position: absolute;
top: 61px;
left: 255px;
z-index: 2;
}
</style>
</head>
<body>

<div>
	[img]SFONDOTESINA.jpg[/img]
	<iframe name="riquadro" id="riquadro"></iframe>
</div>
<map name="Tesina" id="Tesina">
  <area shape="rect" coords="10,63, 159,86" href="ITALIANO.html" alt=" Italiano: Gabriele D'Annunzio" target="riquadro" />
  <area shape="rect" coords="9,132, 134,154" href="STORIA.html" alt="..." target="riquadro" />
  <area shape="rect" coords="11,202, 140,220" href="DIRITTO.html" alt="..." target="riquadro" />
  <area shape="rect" coords="9,270, 154,291" href="SCIENZE.html" alt="..." target="riquadro" />
  <area shape="rect" coords="9,335, 191,361" href="ECONOMIA.html" alt="..." target="riquadro" />
  <area shape="rect" coords="10,400, 159,426" href="INGLESE.html" alt="..." target="riquadro" />
  <area shape="rect" coords="9,460, 234,497" href="INFORMATICA.html" alt="..." target="riquadro" />
  <area shape="rect" coords="8,533, 218,566" href="MATEMATICA.html" alt="..." target="riquadro" />
</map>


</body>
</html>

ma, dipende dalla tua immagine, forse ci sono soluzioni più consigliabili (ad esempio i link alle materie potrebbero essere dei link testuali e l'immagine modificata potrebbe essere usata come sfondo)

**XYZ1** · 27-06-2012, 10:45

Ciao, grazie per avermi risposto.. tra poco provo a fare come mi hai consigliato tu : )

L'immagine di sfondo sarebbe questa:

**XYZ1** · 27-06-2012, 11:02

Ti ringrazio Prill, funziona !

Un ultima domanda, due, se posso..

Come posso centrare l'immagine al centro della pagina ?
Quando apro il file principale diciamo ( forse è più corretto dire il frameset ) l'interno del riquadro è vuoto. Come posso fare in modo che di base ( diciamo come se fosse l'home ) ci sia già un documento caricato ?

Grazie anticipatamente

**Prill** · 27-06-2012, 11:31

Avevo saltato nel codice precedente l'id sul div, ecco il codice rivisto in base alla tua immagine:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>La Mia Tesina</title>

<style type="text/css">
body {margin:0}
#container{
width:1050px;
height:660px;
position: relative;
margin:0 auto
}
img{
position: absolute;
top: 0;
left: 0;
z-index: 1;
border: 0;

}
iframe{
width: 756px;
height: 571px;
position: absolute;
top: 62px;
left: 246px;
z-index: 2;
border:0
}
</style>
</head>
<body>



<div id="container">
	[img]SFONDOTESINA.jpg[/img]
	<iframe src="pagina.html" name="riquadro" id="riquadro"></iframe>
</div>
<map name="Tesina" id="Tesina">
  <area shape="rect" coords="10,63, 159,86" href="ITALIANO.html" alt=" Italiano: Gabriele D'Annunzio"  target="riquadro" />
  <area shape="rect" coords="9,132, 134,154" href="STORIA.html" alt="..." target="riquadro" />
  <area shape="rect" coords="11,202, 140,220" href="DIRITTO.html" alt="..." target="riquadro" />
  <area shape="rect" coords="9,270, 154,291" href="SCIENZE.html" alt="..." target="riquadro" />
  <area shape="rect" coords="9,335, 191,361" href="ECONOMIA.html" alt="..." target="riquadro" />
  <area shape="rect" coords="10,400, 159,426" href="INGLESE.html" alt="..." target="riquadro" />
  <area shape="rect" coords="9,460, 234,497" href="INFORMATICA.html" alt="..." target="riquadro" />
  <area shape="rect" coords="8,533, 218,566" href="MATEMATICA.html" alt="..." target="riquadro" />
</map>


</body>
</html>

per avere una pagina caricata nell'iframe basta specificarla attraverso src

**XYZ1** · 27-06-2012, 11:35

Prill ti ringrazio infinitamente : )

Ora creo ogni singolo documento per ogni materia ed ho finito. La mia idea è di portare il pc a scuola e portare la tesina su internet.. un qualcosa diverso dal solito " malloppo " di 100 pagine che portano tutti i maturandi. Qualcosa di nuovo insomma..

Grazie ancora

**Prill** · 27-06-2012, 11:37

In bocca al lupo

Discussione: Frame e Mappa immagine

Strumenti discussione

Ricerca discussione

Visualizza

Frame e Mappa immagine

Permessi di invio