Newsgroup: it.comp.www.html
Titolo: Immagine-link

Salve,
vi scrivo dopo essermi scervellato su questo problema. Su un sito che
gestisco ho impostato via css un bordo per i link al passaggio del
mouse, un semplice a:hover.per intenderci.
Il problema si presente quando il link contiene un'immagine: il bordo
in questo caso non si dovrebbe mostrare.
Sempre tramite css, no ovviamente impostato una classe .noborder.
Ma me ne faccio poco o nulla, perché la maggior parte delle persone
che lavora su questo sito ha già problemi col solo editor wysiwyg.
Urge una soluzione. Tramite css credo proprio sia impossibile. Non so
se voi conoscete qualche trucchetto.
Mi vengono in mente altre due idee:
1) tramite javascript, analizzare gli elementi della pagina e
aggiungere la classe .noborder nei casi richiesti;
2) fare lo stesso lavoro tramite php (magari tramite regex), ovvero
modificare al momento dell'inserimento di un contenuto oppure prima di
inviare la pagina.
Ma anche qui:
1) vale la pena usare javascript in questo caso? E gli utenti che
l'hanno disattivato? Punto e da capo;
2) vorrei evitare per quanto possibile di apportare modifiche al core
o ai componenti di base di Wordpress (sì, dimenticavo, usiamo questo),
la considero come l'ultima possibilità.
Suggerimenti?
--
Newsgroup robomoderato - gli articoli vengono approvati automaticamente

 Suggerimenti?
Spiega meglio il problema, la parte degli utenti con problemi non era 
chiara: tu vuoi che i contenuti inviati da parte degli utenti su una 
istallazione di WP abbiano l'underline solo su hover.
Secondo me la soluzione migliore è un filtro nel senso di WP: aggiungi 
una classe CSS agli anchor che contengono immagini (se non la hanno già) 
e vivi felice.
Usare regex mi sembra inutile, con poche righe di procedurale hai 
risolto in maniera semplice e quando lo rileggi dopo un anno non hai 
voglia di tirare un colpo in fronte al te stesso del passato.


 Spiega meglio il problema
Semplicemente:
1) la mia necessitŕ: vorrei che il tag a, nel momento in cui contiene
un tag img (=una immagine che fa da link), abbia delle proprie regole
css rispetto agli altri tag a. Nel mio caso specifico, il tag a ha un
effetto di underline su hover, che non vorrei invece sulle immagini
che fanno da link;
2) il mio problema: devo trovare una soluzione automatizzata, perché
molte persone che usano questo blog sanno usare appena appena l'editor
wysiwyg.
Un po' di codice esemplificativo:
a {
    /* qualche regola qui */
}
a:hover {
    /* qualche altra regola qui */
}
Ovviamente queste regole vengono applicate anche al seguente caso:
<a href="#"><img src="..." /></a>
Mentre io vorrei che questo NON accadesse. Ovvero: nel momento in cui
il link č un'immagine, non voglio che siano applicate quelle regole.
Se invece č un link testuale, sě.
Posso stabilire una classe:
a.norules, a.norules:hover {
   /* qui annullo le regole del precedente esempio */
}
E poi scrivere il codice cosě:
<a href="#" class="norules"><img src="..." /></a>
Ma non posso chiedere agli utenti del sito una cosa del genere.
Spero di essermi spiegato per bene :-)


 }
Forse ho capito male ma una regola del tipo:
a:hover img {
   /* qui annullo le regole del precedente esempio */
}
?
Ovviamente così gli attributi si applicano all'immagine ma se si tratta 
di un bordo dovrebbe andare.
Altrimenti racchiudi il link in uno span e fai l'operazione opposta.
Da dire che editor WYSIWYG e CSS personalizzati non sempre vanno 
d'accordo...


 Spero di essermi spiegato per bene :-)
Comunque non c'è un selettore per i padri in funzione dei figli, usa un 
filtro di WP.


 a:hover img {
Verrebbe applicata all'immagine ma non all'anchor.


 filtro di WP.
Come temevo. Grazie comunque per l'aiuto.


 Verrebbe applicata all'immagine ma non all'anchor.
Sì, questo l'avevo scritto anch'io, però l'anchor non eredita il bordo 
dell'immagine che contiene?
Per via dei loro valori di default di display, se non ricordo male 
(probabile! ;-) )...
Mi risulta che sia così e per sicurezza ho appena verificato (solo su 
firefox 3.6.13).


 dell'immagine che contiene?
Sarebbe eredità verso l'alto.
Ad ogni modo underline è un valore di text-decoration e non del bordo, e 
non viene ereditato [1]
[1] 
http://htmlhelp.com/reference/css/text/text-decoration.html


 non viene ereditato [1]
Qui mi son perso: da dove salta fuori l'underline?
L'OP parlava di un bordo, non dell'underline di default.


 L'OP parlava di un bordo, non dell'underline di default.
Il mio voleva solo essere un esempio, non � tanto una questione della
regola precisa. Devo comunque far s� che img non erediti le regole di
a, tutto qui.


 L'OP parlava di un bordo, non dell'underline di default.
Era la mia interpretazione di bordo al passaggio del mouse per un link, 
se con il bordo la tua prova funziona tanto di guadagnato per l'OP.
Io userei un filtro.


 a, tutto qui.
A livello teorico e molto generico se usi una sintassi del tipo "a img" 
(o meglio "a.unaclasse img") puoi settare per le immagini racchiuse nei 
link degli attributi che vadano a sovrascrivere quelli dell'anchor.
Ovviamente, come si diceva, dipende da quali attributi hai settato per 
l'anchor.
L'unica è provare... ;-)
