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)