OnmouseOver...

[ricanto]

Ciao a tutti, mi chiamo riccardo ed è la prima volta che scrivo su questo forum. Intanto vorrei ringraziarvi perchè ho sempre preso molto spunto dalle discussioni che ci sono qui sopra. Ma per il problema che vi dirò propio non ho trovato soluzione.
Il mio problema è questo:
io ho l'immagine della toscana con sopra i nomi delle città. Quello che mi piacerebbe è che al passaggio del mouse sopra il nome di una città, mi appaia accanto una piccola scheda con una fotografia, piccola. E' possiile fare questo con un javascript?

Sapete come aiutarmi? Mi andrebbe anche un tutorial.

Grazie a tutti.

Ciao Riccardo.

[Mich_]

Per il mouseover, devi usare una mappa lato client (tag HTML <map> e <area> ).
Il tag <area> si comporta come un link, per cui puoi usare il mouseover su tale link.

Per il commento e la foto, si tratta di far apparire qualcosa in un posto fisso? Allora fai un <div> con dentro cio` che vuoi per ogni citta`, li metti nello stesso posto con display:none , e al mouseover sull'area interessata fai cambiare il 'none' in 'block' .

Esempio:
<img ... usemap="mappatosc">

<map name="mappatosc">
<area ... onmouseover="visual('arezzo');" onmouseout="visual('nulla');" />
...
</map>

<div id="disp_arezzo" style="display:none;">
... qui il codice HTML del div arezzo ...
</div>
<div id="disp_..." style="display:none;">
...


Poi occorre sistemare lo script (da mettere in head) e la funzione visual():

function visual(cosa) {
  if(cosa == 'nulla') {
    var tutti = document.getElementsByTagName('div');
    for(var t in tutti) {
      if(t.id.substr(0,4) == 'disp') t.style.display = 'none';
    }
  } else {
    document.getElementById('disp_'+cosa).style.display = 'block';
  }
  return;
}

Dovrebbe andare bene, ma controlla che non abbia fatto errori

[ricanto]

Grazie mille, l'ho provato subito e mi è riuscito !!! Grazie ancora per il tuo aiuto.

Ciao Riccardo.

[ricanto]

Un'altra cosa... non troppo fondamentale, credo. Quando provo sul browser il risultato, mi dà un errore nello script da mettere in head:

---------
if(t.id.substr(0,4) == 'disp') t.style.display = 'none';
---------

per essere precisi mi dice: 'id' è nullo o non è un oggetto.

Cosa significa?

Poi già che ci sono ti/vi chiedo un'altra cosa. Come posso fare per far "scomparire" il div di spegazione della città, quando vado su un'altra città?

Poi giuro non chiederò più niente.
Grazie ancora

Ciao Riccardo.

[Mich_]

Il codice che ho postato sopra, dovrebbe togliere (nascondere) il div al mouseout, ma lo script trova l'errore e la funzione non viene completata.
Riscrivo la funzione in modo diverso, forse cosi` va:

function visual(cosa) {
  if(cosa == 'nulla') {
    var tutti = document.getElementsByTagName('div');
    for(var t=0; t<tutti.length; t++) {
      if(tutti[t].id.substr(0,4) == 'disp') tutti[t].style.display = 'none';
    }
  } else {
    document.getElementById('disp_'+cosa).style.display = 'block';
  }
  return;
}

Per un funzinamento sicuro in tutti i browser attuali, sarebbe meglio usare la proprieta` name, anziche` l'id per determinare se il div e` da nascondere.
Per questo occorre:
1. scrivere anche l'attributo name di ogni div:
<div id="disp_arezzo" name="disp_arezzo" style="display:none;">

2. modifcare lo script cosi`:

function visual(cosa) {
  if(cosa == 'nulla') {
    var tutti = document.getElementsByTagName('div');
    for(var t=0; t<tutti.length; t++) {
      if(tutti[t].name.substr(0,4) == 'disp') tutti[t].style.display = 'none';
    }
  } else {
    document.getElementById('disp_'+cosa).style.display = 'block';
  }
  return;
}

Solo che poi potrebbe non funzionare con i browser futuri (valli a capire 'sti W3Cisti e 'sti browser).

[ricanto]

Ora mi va perfettamente, grazie per l'aiuto!

Ciao Riccardo.

[Mich_]

Scusa, potresti dire se hai provato ambedue gli script e/o quale hai usato e funziona?

Cosi` io ho un feedback, e altri possono giovarsi delle tue esperienze.

Grazie

[ricanto]

Ho fatto le modifiche che mi avevi detto, scrivendo l'attributo name ad ogni div. Poi ho provato il primo script e mi andava benissimo, mentre per il secondo mi dava questo errore:
---
'name' è nullo o non è un oggetto
---

in questa riga di codice
---
if(tutti[t].name.substr(0,4) == 'disp') tutti[t].style.display = 'none';
---

Ciao.

[Mich_]

Grazie.

Il primo script dovrebbe essere il migliore.

Per il secondo, il tipo di errore mi fa supporre che in qualche div tra quelli che vengono presi in considerazione dal ciclo non sia definto l'attributo name.