Rollover particolare

[mad_griffith]

Non avendo granché idea di cosa cercare nel dettaglio, chiedo a voi.

Ho un sito musicale, e nella home vengono mostrate delle copertine. Su ciascuna di esse vorrei ora applicare l'immagine di una freccia, che compare unicamente passandoci sopra il mouse. Ora, l'immagine di questa freccia dovrebbe comparire SOPRA le copertine, e non sotto, come un normale sfondo. In che modo è possibile realizzare quest'effetto? Il metodo canonico del rollover non mi andrebbe bene, perchè mi costringerebbe a creare il secondo stato per ogni copertina: io invece vorrei solo che l'immagine della freccia si sovrapponesse al primo stato (quello normale).

Grazie mille

[Francis87]

se puoi avere un'immagine con la freccia che abbia sfondo trasparente e metterla sopra la copertina potrebbe andare bene. poi al "rollover" devi solo mostrare l'immagine (visibility: visible).

[mad_griffith]

ciao francis, potresti spiegarmi bene qual'è la base di codice da cui devo partire?

[Xinod]

per come e' posta, e' una questione risolvibile con i soli css,
sposto

[mad_griffith]

non saprei come realizzare il codice, però... potete aiutarmi?

[mad_griffith]

up

[Mich_]

Quanto hai descritto spiega cosa vuoi fare ma non e` sufficiente per capire come realizzare la cosa.

In particolare:
- Cosa sono le copertine? Potrebbero essere delle immagini, ma sono tutte grandi uguali?
- E che tipo di immagini? Sono degli sfondi o sono oggetti di tipo <img ...>?
- Come sono inserite nella pagina? (una lista?)
- Sono dei link? (per cui il blocco potrebbe essere assimilabile ad un menu)

Ancora:
La "freccia" cosa e`? Potrebbe essere un'immagine da usare come sfondo di un oggetto? Puo` essere grande come le immagini che hai chiamato copertine?

[mad_griffith]

Originariamente inviato da Mich_
Quanto hai descritto spiega cosa vuoi fare ma non e` sufficiente per capire come realizzare la cosa.

In particolare:
- Cosa sono le copertine? Potrebbero essere delle immagini, ma sono tutte grandi uguali?
- E che tipo di immagini? Sono degli sfondi o sono oggetti di tipo <img ...>?
- Come sono inserite nella pagina? (una lista?)
- Sono dei link? (per cui il blocco potrebbe essere assimilabile ad un menu)

Ancora:
La "freccia" cosa e`? Potrebbe essere un'immagine da usare come sfondo di un oggetto? Puo` essere grande come le immagini che hai chiamato copertine?

Ti dò direttamente il link:

www.unprogged.com

Ogni copertina è richiamata da questo singolo codice:

<if condition="$vertical"><tr></if>
<td class="alt1" style="background-color:transparent" align="center" valign="top" onmouseover="this.src='http://www.unprogged.com/images/recehome_bg.gif';"
onmouseout="style.background='none'; style.backgroundColor='#EDF0FA';">
    <a href="$bburl/showthread.php?t=$result[threadid]" title="$result[title]">
    <div style="display: block;">
    [img]$result[image][/img]
    

    <span style="padding-top: 3px; font-family: Arial, Tahoma; font-weight: bold; font-size:10px;">
	$result[title]
    </span>  
    </div>
    </a>
</td>
<if condition="$vertical"></tr></if>

Per quanto concerne la freccia, ti faccio un esempio pratico dell'effetto che vorrei ottenere al passaggio del mouse:



Non è proprio una freccia, ma la funzione è quella...

[Mich_]

Allora procediamo con ordine.

Anzitutto devi capire la differenza tra programma lato server e pagina Web.
Il codice postato e` un pezzo del programma che genera la pagina. NON SERVE.
Quello che serve quando si tratta di lavorare sul client (CSS e JS) e` il solo codice HTML.

Ecco il pezzo generato dal tuo codice:

<td class="alt1" style="background: rgb(237, 240, 250) none repeat scroll 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;" onmouseover="this.src='http://www.unprogged.com/images/recehome_bg.gif';" onmouseout="style.background='none'; style.backgroundColor='#EDF0FA';" align="center" valign="top">
    <a href="http://www.unprogged.com/showthread.php?t=2499" title="DIMENSION X - Implications Of A Genetic Defense">
    <div style="display: block;">
    

    

    <span style="padding-top: 3px; font-family: Arial,Tahoma; font-weight: bold; font-size: 10px;">
	DIMENSION X - Implications Of A Genetic Defense
    </span>  
    </div>
    </a>
</td>

E` un codice realizzato male:
1. usi una tabella per formattare: i tuoi pezzetti formano una lista, e non c'e` rrelazione di riga-colonna.
2. I tag sono innestati in modo sbagliato: non si puo` inserire un <div> dentro un <a>
3. usi formattazione tramite attributi HTML: in qualceh browser oscurano i CSS, e non riesci a fare una cosa funzionante in tutti i browser.
4. Usi gli stili dentro il codice HTML: complica di molto la manutenzione.

Ora ti propongo una cosa piu` semplice e corretta:

<ul id="copertine">
  <li id="DAIUNNOMEDIVERSO">
    <a href="..." title="...">
      [img]...[/img]
      <span>DIMENSION X - Implications Of A Genetic Defense</span>  
    </a>
  
  ...[/list]

Naturalmente ho ignorato il JS, che andrebbe sostituito con il CSS.

TUTTO il resto va inserito nel CSS:

#copertine {
  list-style-type: none;
  margin: 0;        /* o altro */
  padding: 0;
  width: ....;     /* va in qualche modo definito, meglio se in % rispetto ai blocchi superiori */
}
#copertine li {
  float: left;
  width: ...px;
  height: ...px;
  list-style-type: none;
  margin: 0;        /* o altro */
  padding: 0;
}
#copertine a {
  display: block;
  width: 100%; height: 100%;
  background: transparent;
  text-decoration: none;
}
#copertine a:hover {
  background: url(path/freccia.gif);
  text-decoration: none;
}
#copertine a:hover img {
  border: 0;
}

Questo CSS non e` completo, e non tiene inconsiderazione gli attributi che hai inserito tu: dovrai integrarlo. Ho inserito le cose che ritengo piu` importanti per la formattazione.

[mad_griffith]

Ti ringrazio, ho modificato e aggiunto il codice, ma ci sono alcuni punti oscuri:

1) per dare un id univoco del LI su cosa devo basarmi?

2) in stato di hover, la freccia si vede ma lateralmente, anzichè sovrapposta alla copertina.

3) il testo sotto le copertine (per esempio sotto la prima) finisce sotto alla copertina sottostante.