[JS - CSS] Sovrapposizione <span> a img

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

Allora, ho il seguente codice:

<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

[dreadnaut]

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

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...

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ù

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...

[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.

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

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

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

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

[dreadnaut]

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

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

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

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

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?)

[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 :(

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...

[dreadnaut]

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?

[dreadnaut]

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

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

Ritaglio, (che poi viene da wikipedia )

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.

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

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

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"

[dreadnaut]

mah, opinioni sia le tue che le sue 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