[JS - CSS] Sovrapposizione <span> a img

Riekkime qua, erano secoli che nn mi facevo sentire in questa sezione :tongue

Allora, ho il seguente codice:

Codice HTML:

---

<script type="text/javascript"><!--

function showorhyde(id, SoH){

if(SoH==0){
        document.getElementById(id).style.display = 'none';
}else{
        document.getElementById(id).style.display = 'inline';
}

}

--></script>
<span class="mini_title">Men&ugrave;:</span>
&nbsp;&nbsp;
<a href="?" onMouseOver="showorhyde('desc_home',1);" onMouseOut="showorhyde('desc_home',0);"><img src="immagini/menu/homepage.BMP" alt="Homepage" border="0"></a>
&nbsp;
<span id="desc_home" class="desc" style="display: none;">
Torna alla homepage
</span>
&nbsp;
<a href="?p=barzellette" onMouseOver="showorhyde('desc_barze',1);" onMouseOut="showorhyde('desc_barze',0);"><img src="immagini/menu/barzellette.BMP" alt="Barzellette" border="0"></a>
&nbsp;
<span id="desc_barze" class="desc" style="display: none;">
Barzellette per tutti i gusti
</span>

---

In pratica ho due piccole immagini (messe una accanto all'altra); al passaggio del mouse su una delle due immagini viene visualizzata (con Javascript), a destra di questa, la relativa descrizione. Quando il mouse non è più su quell'immagine la scritta sparisce.

Ora, il mio prob è:
quando il mouse passa sulla prima img, viene sì visualizzata la descrizione a destra, ma la seconda img si sposta per fargli largo, per tornare poi alla sua posizione normale a scritta sparita.

C'è un modo (funzionante a tutte le risoluzioni) per far sì che la scritta appaia SOPRA la seconda img, senza che questa si sposti?

Grazie per le risp

uhm, se ti propongo un modo per farlo senza javascript, va bene lo stesso? (cfr. menu qua)

cmq si tratta di far uscire la descrizione dal normale layout - con float o position: absolute a seconda di come è fatta la pagina direi

Citazione:

---

Originalmente inviato da dreadnaut

uhm, se ti propongo un modo per farlo senza javascript, va bene lo stesso? (cfr. menu qua)

---

Non c'ho capito molto in quel modo di farlo... dovrei studiarci un po' su...

Citazione:

---

Originalmente inviato da dreadnaut

cmq si tratta di far uscire la descrizione dal normale layout - con float o position: absolute a seconda di come è fatta la pagina direi

---

Allora, position: absolute non lo posso usare perché il risultato cambierebbe a seconda della risoluzione.

Float devo guardare a che serve perché non me lo ricordo più :tongue

EDIT: ho guardato, ma non credo proprio faccia al caso mio... l'unica soluzione che resterebbe sarebbe quella di trovare un modo di usare position: absolute senza che il risultato si alteri a seconda della risoluzione... almeno per quanto ne so io...
se qualcuno ha una soluzione migliore me lo faccia sapere...

mea culpa, era position: relative e poi left e top per traslare di un tot rispetto alla posizione in cui l'elemento sarebbe stato - oppure margin: con un valore negativo.

e.g. se la descrizione è larga 10em, la sposti "indietro" di -5em e finisce sopra l'immagine.

Per il metodo usato nel css che ti ho indicato, invece del javascript si usa semplicemente un :hover nel css: normalmente la descrizione è display: none;, ma quando il mouse ci passa sopra, la regola apposita la rende visibile

Citazione:

---

Originalmente inviato da dreadnaut

mea culpa, era position: relative e poi left e top per traslare di un tot rispetto alla posizione in cui l'elemento sarebbe stato - oppure margin: con un valore negativo.

e.g. se la descrizione è larga 10em, la sposti "indietro" di -5em e finisce sopra l'immagine.

---

Sì ma lo spazio fra la prima e la seconda immagine resta :|

Citazione:

---

Originalmente inviato da dreadnaut

Per il metodo usato nel css che ti ho indicato, invece del javascript si usa semplicemente un :hover nel css: normalmente la descrizione è display: none;, ma quando il mouse ci passa sopra, la regola apposita la rende visibile

---

Ah, capito; vedrò di applicarlo nei prossimi giorni, se mi riesce.

EDIT:

Yessà!!! Soluzione trovata: in pratica metto tutte le descrizioni dopo tutte le immagini, settando ad ognuna un valore left diverso (con position: relative) e poi quando vengono richiamate si visualizzano nei punti giusti, a qualsiasi risoluzione :=): ho anche aggiunto un simpatico effetto di trasparenza delle scritte :tongue

Nei prox giorni vedrò di seguire il consiglio di dreadnaut facendo tutto in CSS.

hahaha incredibile: ho schiacciato Quote e mi son ritrovato a rispondere ad un messaggio diverso :mrgreen:

volevo dirti che funzionare funziona. Però se vuoi le scritte sovraimpresse alle immagini, IE6 impazzisce :| se andassero bene sotto (come nell'esempio di qualche post fa) allora vanno ovunque.

Però il metodo dei "tanti left" potrebbe anche andare, prova! Per il css, vedi il link in questo post :wink

Citazione:

---

Originalmente inviato da dreadnaut

hahaha incredibile: ho schiacciato Quote e mi son ritrovato a rispondere ad un messaggio diverso :mrgreen:

---

:mrgreen: :mrgreen:

Più o meno quello che spesso mi capita nel topic inutile; invio una risp veloce e mi ritrovo non uno, non due, ma una decina di post in più da leggere prima del mio :mrgreen:

Citazione:

---

Originalmente inviato da dreadnaut

volevo dirti che funzionare funziona. Però se vuoi le scritte sovraimpresse alle immagini, IE6 impazzisce :| se andassero bene sotto (come nell'esempio di qualche post fa) allora vanno ovunque.

Però il metodo dei "tanti left" potrebbe anche andare, prova! Per il css, vedi il link in questo post :wink

---

Per il metodo dei tanti left, con IE7 (non ho più IE6, quindi non posso provare com'è) funziona. Ovviamente va anche con FF. Ho caricato il tutto online, quindi se mi potresti dire se con IE6 va, sarebbe una buona cosa :-) (non è spam vero?)

su IE6.... quasi :| le immagini vengono piccine, tipo alte 16-20px (come la scritta Menù alla loro sinistra) e il testo appare, ma appena muovi il mouse scompare.

Questo accade anche su FF e probabilmente IE7, ma solo in un caso particolare, perché le immagini son più grosse: visto che le scritte sono fuori dal link, se il mouse è in un punto che viene coperto dalla scritta che appare, la scritta scompare e poi riappare... lampeggia, vibra

Ecco, su IE6 con le immagini piccine, lo fa di continuo :(

Citazione:

---

Originalmente inviato da dreadnaut

su IE6.... quasi :| le immagini vengono piccine, tipo alte 16-20px (come la scritta Menù alla loro sinistra) e il testo appare, ma appena muovi il mouse scompare.

Questo accade anche su FF e probabilmente IE7, ma solo in un caso particolare, perché le immagini son più grosse: visto che le scritte sono fuori dal link, se il mouse è in un punto che viene coperto dalla scritta che appare, la scritta scompare e poi riappare... lampeggia, vibra

Ecco, su IE6 con le immagini piccine, lo fa di continuo :(

---

Sì, se il mouse andava sulla scritta lo sapevo anch'io che scompariva, ma non sapevo 'sto fatto delle immagini piccole... il bello è che io nn posso neanche provare eventuali modifiche al codice xk nn ho IE6 (-.-)

EDIT: prova ora... vediamo...

:!: a parte il fatto che balla, ora si vede uguale anche su IE6

In che senso "balla"? :???:

E per "uguale" intendi che ora è giusto, no?

balla nel senso di vibra, il problema di cui parlavamo. uguale nel senso di "come su FF" :mrgreen:

edit-ore-dopo, ma non posso fare un doppio post :roll:
Non l'ho cercato apposta, ma mi sono imbattuto in un articolo sull'usabilità e leggendolo non ho potuto che pensare al tuo menù :mrgreen:

Ritaglio, (che poi viene da wikipedia )

Citazione:

---

Mystery meat navigation (also abbreviated MMN) is a term coined and popularized by author, web designer, and usability analyst Vincent Flanders to describe user interfaces (especially in websites) in which it is inordinately difficult for users to discern the destinations of navigational hyperlinks—or, in severe cases, even to determine where the hyperlinks are. The typical form of MMN is represented by menus composed of unrevealing icons that are replaced with explicative text only when the mouse cursor hovers over them.

---

Citazione:

---

Originalmente inviato da dreadnaut

balla nel senso di vibra, il problema di cui parlavamo. uguale nel senso di "come su FF" :mrgreen:

edit-ore-dopo, ma non posso fare un doppio post :roll:
Non l'ho cercato apposta, ma mi sono imbattuto in un articolo sull'usabilità e leggendolo non ho potuto che pensare al tuo menù :mrgreen:

Ritaglio, (che poi viene da wikipedia )

---

Mah... secondo me quell'articolo spara fesserie... tipo nel mio menù magari uno la prima volta che ci va non capisce a prima impatto dove si trova il menù, ma quando lo capisce... lo capisce!
E poi è proprio per quello che ho messo la pagina "Come navigare" :roll:

mah, opinioni sia le tue che le sue :tongue Il fatto che però tu debba mettere una pagina per spiegare come funziona il tuo sito, gli da un po' ragione ecco.... se fosse ovvio ed evidente al primo impatto, sarebbe meglio. Ma poi boh, non è che lo considerassi Bibbia. l'ho letto e mi ha fatto ridere :mrgreen: