finestra su regione

[Stevesteve]

saluti a tutti, mio primo messaggio.

Sono del tutto nuovo di javascript, e mi sono impuntato su questo:

ho una pagina html sulla quale c'è l'immagine dell'italia con le regioni in evidenza.

Su alcune delle regioni ho inserito il tag

<area alt="nome" shape="circle" coords="404,251,18" href="pagina.htm" />

Il link funziona correttamente ed apre la pagina successiva.

Voglio ottenere che, prima di passare alla pagina successiva con il clic sul link, appaia una piccola finestra con brevi informazioni su che cosa si troverà nella pagina che si sta per aprire.

Ho modificato così il tag:

<area alt="nome" shape="circle" coords="404,251,18" href="pagina.htm" onMouseOver = "alert('messaggio');" />

e la finestra si apre.

Voglio però che si apra una finestra della quale possa definire io le dimensioni, il colore etc.

Ho provato così

<area alt="nome" shape="circle" coords="404,251,18" href="pagina.htm" onMouseOver = window.document.write("prova") />

e si apre una finestra che sostituisce quella esistente, con la parola "prova" che lampeggia indefinitivamente.

Ho trovato, in giro per il web, qualche listato sui quali mi sono però regolarmente perso. Credo di dovere prima definire windows.open con le caratteristiche della finestra, ma è tutto il giorno che non trovo il modo di farlo.

Potete aiutarmi con indicazioni semplici (idiot proof , dicono gli inglesi.
ciao e grazie

Stefano

 

[PoLe]

Ciao

Se possi darti un parere, piuttosto che far aprire oggetti esterni alla pagina, è meglio che fai visualizzare una "etichetta" con la descrizione quando passi sopra la regione col puntatore del mouse.

Prendi spunto da qui
https://www.mrw.it/javascript/articoli/testo-alternativo-link_173.html

 

[Stevesteve]

ho visto l'esempio ed è proprio il risultato che voglio ottenere. Adesso me lo studio e cerco di metterlo in pratica.

grazie!

Stefano


PS se qualcuno ne ha voglia, a puro fine didattico, mi spiega la sequenza di istruzioni che avrei dovuto mettere per aprire un'altra pagina (visto che ci sono stato un bel po' sopra , magari viene buono per un'eventualità futura)?

 

[Stevesteve]

ehm...

allora, il codice è questo:


/** prima del codice che segue c'è una parte che viene da un template di dreamweaver che funziona bene anche su altre pagine e che qui non dovrebbe essere rilevante.



/** questo è il codice che ho copiato dall'esempio citato
<style type="text/css">
span{
font-size: 12px;
font-family: Verdana;
}
#livello{
background-color: #FFFFCC;
font-size: 10px;
padding: 5px;
border: Solid 1px #000000;
}
a{
color: #0000FF;
text-decoration: None;
}
a:hover{
color: #FF0000;
text-decoration: Underline;
}
</style>

<script language="javascript">
<!--
function Mostra(testo)
{
livello.innerHTML= testo; // IMPOSTA IL TESTO NEL LIVELLO
livello.style.visibility = "Visible"; // MOSTRA IL LIVELLO
livello.style.position = "Absolute"; // POSIZIONA LIVELLO IN MOD. ASSOLUTA
livello.style.left = event.clientX + 15; // IMPOSTA COORDINATE IN ORIZZONTALE
livello.style.top= event.clientY + 15; // IMPOSTA COORDINATE IN VERTICALE
}
function Nascondi()
{
livello.style.visibility = "Hidden"; // NASCONDE IL LIVELLO
}
//-->
</script>

/** fine del codice che ho copiato dall'esempio citato


/** comincia il mio codice. Ho evidenziato in rosso i tentativi fatti

<table width="96%" border="0" align="right" cellpadding="5" cellspacing="0">

<tr>
<td colspan="2" class="titolo">Le cantine </td>
</tr>
<tr>
<td>&nbsp; </td>
</tr>
<tr>
<td align="center"><img src="http://forum.mrwebmaster.it/Immagini/italia.gif" width="502" height="439" border="0" usemap="#italia">
<map name="italia" id="italia" >
<area alt="vetrere" shape="circle" coords="423,265,18" href="vetrere.htm" />
<area alt="vetrere2" shape="circle" coords="404,251,18" href="vetrere.htm" onMouseOver = "alert('Puglia - Vetrere');" />

/* questo funziona ma non è quello che voglio


<area alt="vetrere3" shape="circle" coords="378,232,18" href="vetrere.htm" />
<area alt="vetrere4" shape="circle" coords="349,214,18" href="vetrere.htm" />
<area alt="galasso" shape="circle" coords="291,190,25" <a href="galasso.htm"
target="_blank"
onMouseMove="Mostra('... il giornale per Webmaster')"
onMouseOut="Nascondi()">galasso.htm</a> />
<span id="livello"></span>

/* questo non funziona. O meglio: sotto l'immagine "italia" appare, come un link, ">galasso.htm" e passandoci sopra appare a fianco la scritta "... il giornale per Webmaster". Suppongo sia un problema di mia ignoranza di sintassi....

<area alt="venosa" shape="circle" coords="363,259,20" href="venosa.htm" />
<area alt="defalco" shape="circle" coords="323,247,25" href="defalco.htm" />
<area alt="umbria" shape="circle" coords="252,163,22" href="umbria.htm" />
<area alt="carboncine" shape="circle" coords="234,56,25" href="carboncine.htm" />
<area alt="cabanon" shape="circle" coords="172,56,32" href="cabanon.htm" onMouseOver = window.document.write("prova") />

/* questo funziona ma con una nuova pagina che sostituisce quella esistente



</map></td>


</tr>


</table>

 

[Stevesteve]

<area alt="galasso" shape="circle" coords="291,190,25"
<a href="galasso.htm"
target="_blank"
onMouseMove="Mostra('... il giornale per Webmaster')"
onMouseOut="Nascondi()">galasso.htm</a> />
<span id="livello"></span>



dai, aiutatemi a trovare l'errore..... ho riprovato in tutte le forme che mi sono venute in mente...

grazie


Stefano

 

[PoLe]

/* questo non funziona. O meglio: sotto l'immagine "italia" appare, come un link, ">galasso.htm" e passandoci sopra appare a fianco la scritta "... il giornale per Webmaster". Suppongo sia un problema di mia ignoranza di sintassi....

Se ci fosse un problema si sintassi non funzionerebbe nulla.
Da quello che hai scritto sopra sembra che funzioni. Cosa esattamente non ti convince? Riesci a postare uno screenshot di quel che visualizzi?

 

[Stevesteve]

eccolo. La finestrella gialla appare quando il mouse passa sulla scritta "galasso.htm />", (che non dovrebbe stare lì: per questo ritengo che ci sia un carattere in più o in meno da qualche parte).

Invece la scritta dovrebbe apparire quando il mouse passa sulla regione - abruzzo in questo caso - mappata.

grazie della pazienza.

Stefano

 

[PoLe]

Direi che il problema è qui: (togli la parte in rosso)

<area alt="vetrere3" shape="circle" coords="378,232,18" href="vetrere.htm" />
<area alt="vetrere4" shape="circle" coords="349,214,18" href="vetrere.htm" />
<area alt="galasso" shape="circle" coords="291,190,25" [B][COLOR="Red"]<a[/COLOR][/B] href="galasso.htm"
target="_blank"
onMouseMove="Mostra('... il giornale per Webmaster')"
onMouseOut="Nascondi()">[COLOR="red"][B]galasso.htm</a>[/B][/COLOR] />
<span id="livello"></span>

Facci sapere!
:byebye:

 

[Stevesteve]

intanto è andato! poi mi metterò a capire come funziona pezzo pezzo.

Grazie ancora per :tifoso: la disponibilità.

Stefano

 

[Stevesteve]

Adesso le scritte appaiono regolarmente per le diverse aree, il più è fatto.

Miglioramenti possibili (alcuni necessari):

1) all'apertura della pagina appaiono, attaccati tra di loro, tanti rettangolini gialli quante sono le finestrelle che si potranno aprire al passaggio del mouse. Immagino che si debba settare "nascosto" al momento del caricamento.... ma come si fa?

2) mantenendo

livello.style.position = "Abslolute";

la finestrella si apre sempre in alto a destra, al margine dell'immagine dell'Italia. Sarebbe bello farla apparire vicino alla regione su cui sta passando il mouse.... le coordinate sono già identificate, ma come si fa a dire alla finestra "apriti x pixel e y pixel da questa regione"?

3) sostituendo "Absolute" con "Relative" le finestrelle si aprono in basso al centro invece che in alto a destra... me le sarei aspettate un po' qua e un po' là...

4) Quando, variando un certo testo, scompariva tutto il testo, ci ho messo un po' a capire che il problema era questo (tanto per dire che prima di chiedere qualche tentativo di capire da solo lo faccio): come si fa a far apparire il carattere apostrofo ['] all'interno della finestrella?

5) le finestrelle si allungano all'allungarsi del testo .... ok questa l'ho capita da solo: basta <br> (che però funziona bene con "Absolute", mentre con "Relative" la seconda riga si sovrappone parzialmente alla prima).

6) come si fa a mettere un link "dentro" alla finestrella?


io ci provo a chiedere... 0 comunque grazie per l'aiuto già ricevuto.

saluti

Stefano

 

[Stevesteve]

4) ....... come si fa a far apparire il carattere apostrofo ['] all'interno della finestrella?

questa l'ho trovata: basta mettere il carattere \ prima dell'apostrofo. :mavieni: quindi [l'albero] diventa [l\'albero]

6) come si fa a mettere un link "dentro" alla finestrella?

questa così come l'ho espressa sembra inutile, perchè in effetti "si parte" da un link. La domanda più precisa è "si possono mettere link diversi tra di loro dentro alla finestrella"?

 

[Stevesteve]

1) all'apertura della pagina appaiono, attaccati tra di loro, tanti rettangolini gialli quante sono le finestrelle che si potranno aprire al passaggio del mouse. Immagino che si debba settare "nascosto" al momento del caricamento.... ma come si fa?


... e questi (immagine) sono i "rettangolini"...