Frame e librerie DOM

**fedex05** · 04-01-2007, 12:30

Ciao a tutti, ho bisogno del vostro aiuto....

Ho creato una mappa sensibile, e ora vorrei fare in modo che cliccando con il mouse sui vari oggetti compaia un frame con la descrizione dell'oggetto, una foto e un file audio.

Avete qualche idea su come posso realizzare questo in javascript?

Grazie a tutti in anticipo

**Mega69** · 04-01-2007, 18:06

Con qualcosa del genere:

codice:

document.getElementById("il_tuo_oggetto").onclick=function() {
myIframe=document.createElement("iframe");
myIframe.setAttribute("src", "mypage.htm");
document.body.appendChild(myIframe);
}

document.body è l'elemento dove viene creato l'iframe, se vuoi puoi cambiarlo con con un qualsiasi altro elemento della pagina, ad esempio document.getElementsById("myContainer") .

**fedex05** · 04-01-2007, 18:24

Ti mostro il codice della mappa sensibile...mi puoi dire come potrei inserire inserire lo script che mi hai detto nella pagina?

Scusa ma non sono molto pratico...

<HTML>
<HEAD>
<TITLE>mappa sensibile</TITLE>
</HEAD>
<BODY>
[img]mappa.jpg[/img]

<MAP NAME="mappa">
<AREA ID="T43" SHAPE="POLY" HREF="#" ALT="T43 - Incinerazione (?? sec)" COORDS="1558,366, 1577,382, 1562,392, 1546,373, 1558,366">
<AREA ID="T42" SHAPE="POLY" HREF="#" ALT="T42 - Tomba a sarcofago di carparo (?? sec)" COORDS="1512,451, 1533,477, 1602,419, 1579,394, 1512,451">
<AREA ID="T39" SHAPE="POLY" HREF="#" ALT="T39 - Tomba a sarcofago di carparo (?? sec)" COORDS="1484,410, 1466,389, 1535,334, 1554,359, 1484,410">
<AREA ID="T4" SHAPE="POLY" HREF="#" ALT="T4 - Tomba a sarcofago (V sec a.C.)" COORDS="735,447, 749,470, 825,418, 809,395, 808,396, 735,447">
<AREA ID="T6" SHAPE="POLY" HREF="#" ALT="T6 - Tomba a sarcofago (V sec a.C.)" COORDS="799,476, 839,449, 851,463, 807,490, 807,490, 799,476">
<AREA ID="T7" SHAPE="POLY" HREF="#" ALT="T7 - Tomba a sarcofago (V sec a.C.) " COORDS="762,486, 829,553, 840,537, 781,478, 778,476, 762,486">
<AREA ID="T29" SHAPE="POLY" HREF="#" ALT="T29 - Tomba xxx (seconda metà IV sec a.C.)" COORDS="891,612, 877,620, 895,636, 904,623, 895,614, 891,612">
<AREA ID="T11" SHAPE="POLY" HREF="#" ALT="T11 - Tomba xxx (fine VI, inizio V sec a.C.)" COORDS="574,418, 625,370, 640,380, 590,430, 576,422, 574,418">
<AREA ID="T10" SHAPE="POLY" HREF="#" ALT="T10 - Tomba xxx (fine VI, inizio V sec a.C.)" COORDS="647,341, 670,374, 756,310, 735,277, 651,339, 647,341">
<AREA ID="T8" SHAPE="POLY" HREF="#" ALT="T8 - Tomba xxx (fine VI, inizio V sec a.C.)" COORDS="762,505, 821,570, 807,581, 748,516, 756,503, 762,505">
<AREA ID="T40" SHAPE="POLY" HREF="#" ALT="T40 - Tomba xxx (fine VI, inizio V sec a.C.)" COORDS="1361,414, 1411,486, 1430,475, 1382,398, 1356,410, 1361,414">
<AREA ID="T21" SHAPE="POLY" HREF="#" ALT="T21 - Tomba a camera con kline intagliata (fine IV,III s" COORDS="775,721, 860,808, 886,792, 794,701, 775,721">
<AREA ID="T20" SHAPE="POLY" HREF="#" ALT="T20 - Tomba a camera con kline intagliata (fine IV,III sec a.C.)" COORDS="827,836, 761,767, 787,746, 850,815, 827,836">
<AREA ID="T50" SHAPE="POLY" HREF="#" ALT="T50 - Tomba a camera con kline centrale (metà IV sec a.C.)" COORDS="1482,866, 1518,910, 1611,838, 1568,789, 1482,866">
<AREA ID="T16" SHAPE="POLY" HREF="#" ALT="T16 - Tomba a camera con kline centrale (metà IV sec a.C.)" COORDS="1410,884, 1313,939, 1320,958, 1435,933, 1434,930, 1410,884">
<AREA ID="T13" SHAPE="POLY" HREF="#" ALT="T13 - Tomba a camera con kline intagliata (fine IV,III sec a.C.)" COORDS="221,234, 283,309, 313,285, 253,202, 221,231, 222,233, 221,234">
<AREA ID="T14" SHAPE="POLY" HREF="#" ALT="T14 - Tomba a camera con kline intagliata (fine IV,III sec a.C.)" COORDS="168,281, 228,360, 259,334, 195,256, 166,280, 168,281">
<AREA ID="T15" SHAPE="POLY" HREF="#" ALT="T15 - Tomba a camera con kline intagliata (fine IV,III sec a.C.) " COORDS="84,334, 142,395, 178,371, 115,302, 84,330, 87,330, 84,334">
<AREA ID="T12" SHAPE="POLY" HREF="#" ALT="T12 - Tomba a fossa in roccia (fine IV,III sec a.C.)" COORDS="461,141, 524,89, 513,71, 449,124, 459,139, 461,141">
<AREA ID="T18" SHAPE="POLY" HREF="#" ALT="T18 - Tomba a fossa in roccia " COORDS="345,120, 403,181, 420,164, 369,98, 344,118, 345,120">
<AREA ID="T17" SHAPE="POLY" HREF="#" ALT="T17 - Tomba a fossa in roccia (fine IV,III sec a.C.)" COORDS="272,159, 327,233, 358,211, 300,136, 271,159, 272,159">
</MAP>
</BODY>
</HTML>

**Mega69** · 04-01-2007, 19:03

Prima di tutto inserisci questo codice dopo il tag map:

codice:

<div id="myIframeDiv"></div>

Poi questo codice all'interno della sezione <head></head> del documento

codice:

myAreas=new Array();

window.onload=function() {
myAreas=document.getElementsByTagName("area");
for(i=0; i!=myAreas.length, i++)
  {
      settaOnclick(myAreas[i], myAreas[i].getAttribute("rel"));
  }
}

function settaOnclick(elemento, pagina) {
elemento.onclick=function() { creaIframe(pagina); }
}

function creaIframe(url) {
myIframe=document.createElement("iframe");
myIframe.setAttribute("src", url);
document.getElementById("myIframeDiv").appendChild(myIframe);
}

Inoltre, a ogni tag area devi aggiungere l'attributo rel ( onestamente non so se si può specificare nel tag area ), nel quale indichi quale pagina aprire.
ad esempio:
<AREA ID="T40" SHAPE="POLY" HREF="#" ALT="T40 - Tomba xxx (fine VI, inizio V sec a.C.)" COORDS="1361,414, 1411,486, 1430,475, 1382,398, 1356,410, 1361,414" rel="pagina_da_aprire.htm">

Lo script non l'ho provato, e ci sono il 70% di prob che nn funzioni

Infine, lo script ti converrebbe metterlo in un file esterno.

**fedex05** · 04-01-2007, 19:05

Grazie mille, ora provo.

**fedex05** · 04-01-2007, 19:21

Non so se sono io scemo (probabile) ma non funziona.

Lo script devo inserirlo all'interno dei tag <SCRIPT></SCRIPT> giusto?

**Mega69** · 04-01-2007, 19:26

si, più precisamente in
<script type="text/javascript">
//codice
</script>

Ah, e in html dovresti scrivere sia i tag sia gli attributi in minuscolo. Lo script potrebbe anche non funzionare altrimenti.

**fedex05** · 04-01-2007, 19:31

Si si lo so che vanno in minuscolo...cmq non funziona...

Però avrei un'altra cosa da chiederti che è più importante.

Vai sul link che ti posto qui:

http://www.museotaranto.it/necropoli/necropoli.html

Come avrai capito ci sono 2 immagini: una meno dettagliata, e l'altra, più dettagliata, che è visibile passando la lente di ingrandimento...

Bene io devo mettere al posto dell'immagine dettagliata la mappa sensibile...tu riesci a darmi una mano? Scusa se ti rompo, ma è importante

Grazie in anticipo, sei già stato troppo gentile

**Mega69** · 04-01-2007, 21:10

Originariamente inviato da fedex05
cmq non funziona...

E' difficile far funzionare uno script al primo tentativo!
Cmq quella cosa che vuoi fare tu è semplicissima:
cacci questo nel link che mi hai dato
[img]mappa_small.png[/img]

e metti questo

codice:

[img]mappa.jpg[/img]





<MAP NAME="mappa">
<AREA ID="T43" SHAPE="POLY" HREF="#" ALT="T43 - Incinerazione (?? sec)" COORDS="1558,366, 1577,382, 1562,392, 1546,373, 1558,366">
<AREA ID="T42" SHAPE="POLY" HREF="#" ALT="T42 - Tomba a sarcofago di carparo (?? sec)" COORDS="1512,451, 1533,477, 1602,419, 1579,394, 1512,451">
<AREA ID="T39" SHAPE="POLY" HREF="#" ALT="T39 - Tomba a sarcofago di carparo (?? sec)" COORDS="1484,410, 1466,389, 1535,334, 1554,359, 1484,410">
<AREA ID="T4" SHAPE="POLY" HREF="#" ALT="T4 - Tomba a sarcofago (V sec a.C.)" COORDS="735,447, 749,470, 825,418, 809,395, 808,396, 735,447">
<AREA ID="T6" SHAPE="POLY" HREF="#" ALT="T6 - Tomba a sarcofago (V sec a.C.)" COORDS="799,476, 839,449, 851,463, 807,490, 807,490, 799,476">
<AREA ID="T7" SHAPE="POLY" HREF="#" ALT="T7 - Tomba a sarcofago (V sec a.C.) " COORDS="762,486, 829,553, 840,537, 781,478, 778,476, 762,486">
<AREA ID="T29" SHAPE="POLY" HREF="#" ALT="T29 - Tomba xxx (seconda metà IV sec a.C.)" COORDS="891,612, 877,620, 895,636, 904,623, 895,614, 891,612">
<AREA ID="T11" SHAPE="POLY" HREF="#" ALT="T11 - Tomba xxx (fine VI, inizio V sec a.C.)" COORDS="574,418, 625,370, 640,380, 590,430, 576,422, 574,418">
<AREA ID="T10" SHAPE="POLY" HREF="#" ALT="T10 - Tomba xxx (fine VI, inizio V sec a.C.)" COORDS="647,341, 670,374, 756,310, 735,277, 651,339, 647,341">
<AREA ID="T8" SHAPE="POLY" HREF="#" ALT="T8 - Tomba xxx (fine VI, inizio V sec a.C.)" COORDS="762,505, 821,570, 807,581, 748,516, 756,503, 762,505">
<AREA ID="T40" SHAPE="POLY" HREF="#" ALT="T40 - Tomba xxx (fine VI, inizio V sec a.C.)" COORDS="1361,414, 1411,486, 1430,475, 1382,398, 1356,410, 1361,414">
<AREA ID="T21" SHAPE="POLY" HREF="#" ALT="T21 - Tomba a camera con kline intagliata (fine IV,III s" COORDS="775,721, 860,808, 886,792, 794,701, 775,721">
<AREA ID="T20" SHAPE="POLY" HREF="#" ALT="T20 - Tomba a camera con kline intagliata (fine IV,III sec a.C.)" COORDS="827,836, 761,767, 787,746, 850,815, 827,836">
<AREA ID="T50" SHAPE="POLY" HREF="#" ALT="T50 - Tomba a camera con kline centrale (metà IV sec a.C.)" COORDS="1482,866, 1518,910, 1611,838, 1568,789, 1482,866">
<AREA ID="T16" SHAPE="POLY" HREF="#" ALT="T16 - Tomba a camera con kline centrale (metà IV sec a.C.)" COORDS="1410,884, 1313,939, 1320,958, 1435,933, 1434,930, 1410,884">
<AREA ID="T13" SHAPE="POLY" HREF="#" ALT="T13 - Tomba a camera con kline intagliata (fine IV,III sec a.C.)" COORDS="221,234, 283,309, 313,285, 253,202, 221,231, 222,233, 221,234">
<AREA ID="T14" SHAPE="POLY" HREF="#" ALT="T14 - Tomba a camera con kline intagliata (fine IV,III sec a.C.)" COORDS="168,281, 228,360, 259,334, 195,256, 166,280, 168,281">
<AREA ID="T15" SHAPE="POLY" HREF="#" ALT="T15 - Tomba a camera con kline intagliata (fine IV,III sec a.C.) " COORDS="84,334, 142,395, 178,371, 115,302, 84,330, 87,330, 84,334">
<AREA ID="T12" SHAPE="POLY" HREF="#" ALT="T12 - Tomba a fossa in roccia (fine IV,III sec a.C.)" COORDS="461,141, 524,89, 513,71, 449,124, 459,139, 461,141">
<AREA ID="T18" SHAPE="POLY" HREF="#" ALT="T18 - Tomba a fossa in roccia " COORDS="345,120, 403,181, 420,164, 369,98, 344,118, 345,120">
<AREA ID="T17" SHAPE="POLY" HREF="#" ALT="T17 - Tomba a fossa in roccia (fine IV,III sec a.C.)" COORDS="272,159, 327,233, 358,211, 300,136, 271,159, 272,159">
</MAP>

Possibilmente cercando di scrivere tutto in minuscolo.
Teoricamente il fatto che l'immagine sia una mappa non dovrebbe interferire sulla lente.

**fedex05** · 04-01-2007, 21:49

Forse non hai capito quello che devo fare.......

Io devo modificare la pagina necropli.html (il link che ho postato) in modo da avere la mappa sensibile invece dell'immagine ingrandita (quella di sfondo). Si deve visualizzare tutto come lo vedi tu nel link, soltanto che passando la lente di ingrandimento, nelle porzioni ingrandite deve essere possibile cliccare sulle varie tombe (che è reso possibile dalla mappa sensibile che ho fatto).

Secondo me bisogna fare qualche modifica allo script; io ho provato a fare qualcosa senza successo. Come vedi, tra l'altro, nel codice di necropoli.html l'immagine ingrandita viene caricata con il loadmagnifier e non tramite un [img]mappa.jpg[/img]...

Discussione: Frame e librerie DOM

Strumenti discussione

Ricerca discussione

Visualizza

Frame e librerie DOM

Permessi di invio