Alt particolare ^_^

**Charlotte17** · 15-04-2006, 18:14

Ciao ragazzi! ^_^
Premetto che non sono sicura di stare postando nella sezione giusta poichè non so come si potrebbe risolvere il mio problema, con quale linguaggio precisamente. Ho provato a ragionarci su e sono arrivata alla conclusione che con dovrebbe essere fattibile con javascript...
Nel caso in cui avessi sbagliato, spostatemi pure!

Allora... navigando per la rete ho visto delle bellssime pagine con scritte ed immagini a href (di collegamento, quindi) che, quando ci passi sopra il mouse, appare non solo una scritta ma tutto un bel riquadro colorato. LO VOGLIO FARE! ^_^
Ho provato qualche codice ma niente. Ho pensato che si tratti di un div e che sia associato ad un mouseover ma purtoppo non sono riuscita a ricavare un codice decente...

Qualcuno mi aiuta?
Grazie
ciauu

**fcaldera** · 15-04-2006, 19:36

si in effetti è un div... devi crearne uno e nasconderlo con un css (display: none) e all'evento onmouseover gli dai display: block;

**Charlotte17** · 15-04-2006, 19:39

ok... ci sono... il problema è che non mi viene il codice!
ho creato il div (^_^ fin qui ci sono) ma non riesco a fare la parte javascipt...
Non è che per caso potresti darmi una mano solo con quel pezzo di codice? Te ne sarei grata...

E poi un'altra domanda.... il div con display: none lo devo inserire lì dove appare poi con mouseover?
In questo modo quindi ne dovrei fare tanti quanti sono i commenti che devo mettere... oppure in qualche modo posso creare semplicemente un div ed il testo cambia a seconda del mio utilizzo?
Scusa le mille domande... ^_^ voglio imparare!

**fcaldera** · 15-04-2006, 20:17

eccoti un esempio (copia e incolla). l'aspetto visuale del div lo imposti tramite css. Nel suo stato iniziale la classe .altdiv imposta i vari div con display: none;

codice:

<head>
<style>
.altdiv {
  position  : absolute;
  width     : 140px;
  height    : auto; /* l'altezza del div si basa sul testo contenuto */
  background: #dde;
  display   : none;
  border    : 1px #9c9 solid;
  font      : 9px verdana
}


</style>

<script>
function showAlt(element, id) {

    // posiziona il div in base all'offset orizzontale dell'elemento.
    offset_x = element.offsetLeft;
    document.getElementById(id).style.left = offset_x + 'px'; 
    // mostra il div.    
    document.getElementById(id).style.display = 'block';
    
}

function hideAlt(id) {
    // nasconde il div.    
    document.getElementById(id).style.display = 'none';
}
</script>

<body>
link
<div id="altdiv1" class="altdiv">
  testo alternativo 1
</div>

link
<div id="altdiv2" class="altdiv">
  testo alternativo 2
</div>






link
<div id="altdiv3" class="altdiv">
  testo alternativo 3
</div>

</body>

Può andare bene come esempio?

Ciao

**eX-Arus** · 15-04-2006, 20:32

allora, il discorso e' un poco complicato.
non si tratta di poche righe di codice.
e ci sono anche diversi modi x arrivare all'obiettivo, si tratta solo del gusto e della fantasia del programmato.

di mio, cerchero' di renderti astrattamente l'idea.

nel body si deve creare un div iniziale vuoto, invisibile, con posizione assoluta, e con uno z-index altissimo, diciamo il + alto (poiche' deve comparire sopra tutto):
esempio:

codice:

/*
nel css definisci lo stile del div
*/
#dettagli { 
   display:none;
   position:absolute;
   z-index:9999;
}

//------------------------

/*
mentre nel body inseriamo il div vuoto
N.B. il div deve essere un childNode di BODY, altrimenti il suo z-index nn funziona (da quanto ho potuto constatare con i miei test)
*/

<div id="dettagli"></div>

questo div sara' semplicemente il contenitore dell'alt, che si popolera' ogni qualvolta viene richiamato.

----

ora, mettiamo caso che hai un link, od una immagine, alla quale quando ci passi sopra ti deve apparire questo riquadro dei dettagli.

al tag del link (o dell'immagine) ci aggiungi la proprieta' onmouseover e onmouseout attaccati ad una funzione javascript, in questo modo:

pappagallo

le quali 2 funzioni contengono piu' o meno questi passi:

codice:

function mostraDettagli(id) {

d = document.getElementById('dettagli');

switch (id) {
   case 'pappagallo':
      d.innerHTML = '[img]pappagallo.jpg[/img] bla bla bla'; // qui ci metti il codice HTML della descrizione
      break;
   case 'oca':
      d.innerHTML = '[img]oca.jpg[/img] bla bla bla'; // qui ci metti il codice HTML della descrizione
      break;
   ... // e cosi via
}

// una volta popolato il codice HTML dentro il div, bisogna

d.style.display = 'block'; // renderlo visibile

// e poi posizionarlo sotto il cursore
// (il codice e' abbastanza complesso da spiegare)

}

function nascondiDettagli() {
   // rendiamo invisibile il div #ettagli
   document.getElementById('dettagli').style.display = 'none';
}

---

questo e' un esempio terra-terra, ci sono modi + avanzati, piu' completi, e piu' unobtrusive per fare la stessa cosa

saluti

**Charlotte17** · 16-04-2006, 18:16

Ciao ragazzi!
Ringrazio mille entrambi per le risposte lunghe, esaurienti e semplici (all'incirca

) da capire!
Entrambi gli esempi vanno bene per il mio utilizzo... anche se devo dire che trovo quello di fcaldera più semplice! Ciò non toglie che quello di eX-Arus sia fatto bene (il problema è che io sono abbastanza alle prime armi quindi ci metto un pò per capire i vari codici...

)
In sostanza quindi, mi sono presa entrambe le risposte ed ho iniziato a studiarmele per bene, trovando il modo migliore per utilizzarle per me. Grazie quindi a tutti e due.
Solo volevo chiedere una cosa ad eX-Arus. All'interno del tuo codice ho trovato scritto:

codice:

// e poi posizionarlo sotto il cursore
// (il codice e' abbastanza complesso da spiegare)

Potresti comunque postarmi il codice da utilizzare? poi provo a capirlo da sola se pensi che sia troppo lungo... ^__^
A presto ragazzi
ciauuu

Discussione: Alt particolare ^_^

Strumenti discussione

Ricerca discussione

Visualizza

Alt particolare ^_^

^___^

Permessi di invio