C'e` un po' di confusione sui termini.
Quello che chiami data, io lo chiamerei occhiello, e quello che chiami sottotitolo e` del testo.
La soluzione corretta XHTML+CSS, sarebbe di inserire tutto in un blocco; poi racchiudere tutte le scritte in un blocco a parte, ed usare
per occhiello e testo, e <h2> per il titolo (supponendo di avere un <h1> come titolo della pagina). In
codice:
<div class="contenitore">
[img]imm.png[/img]
<div class="scritte">
<p class="occhiello">data</p>
<h2>Titolo</h2>
<p class="testo">sottotitoloo</p>
</div>
</div>
A cui corrisponde un CSS del tipo:
codice:
.contenitore {
width: ...; height: ...; /* se serve */
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border: none;
}
.contenitore img {
width: ...; height: ...; /* stanno meglio qui che nell'HTML */
float: left;
}
.contenitore .scritte {
float: left;
}
.contenitore h2 {
font-size: 2em;
}
Poi in un futuro prossimo (ma non so quanto prossimo, forse con XHTML 2.0) si potra` scrivere:
<div class="contenitore" href="...">
Per il momento si puo` racchiudere il #contenitore in un <a> cui pero` occorre dare la proprieta`
a {
display: block;
}
Non e` corretto dal punto di vista semantico e/o sintattico, ma i browser potrebbero comportarsi bene (come dici fa FF - con display:block potrebbe comportarsi bene anche IE - fai una prova).
In alternativa (piu` corretto) occorre inserire i tag <a> (tutti uguali) dentro ciascuno dei singoli blocchi (all'esterno di <img>, all'interno dei due
e del <h2>, curando di dare sempre
display: block;
width: 100%; heigth: 100%;
Poi si puo` utilizzare un JS per assegnare una classe diversa a tutto il blocco, tipo:
codice:
function stileHover(ogg,on) {
document.getElementById(ogg).className = on ? "contenitoreHover" : "contenitoreNorm";
}
dove avrai definito le due classi
codice:
.contenitoreNorm {
width: ...; height: ...; /* se serve */
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border: none;
}
.contenitoreHover {
width: ...; height: ...; /* se serve */
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
border: none;
}
La funzione va chiamata con un link del tipo:
<a href="..." title="..." onmouseover="stileHover('ID_OGG',1);" onmouseout="stileHover('ID_OGG',0);">
dove ID_OGG sara` definito nei singoli blocchi con l'attributo id.
PS: il JS in questione opera solo una modifica estetica della pagina, pertanto non e` contrario all'accessibilta`.
Non so se sono stato chiaro (forse sono troppo conciso), altrimenti chiedi di nuovo.
)
Rispondi quotando
