Newsgroup: it.lavoro.professioni.webmaster
Titolo: Imagini e alt...

Ciao a tutti,
in una pagina web tableless, dove viene appunto fatto un forte uso di css, 
ho una immagine in cui è presente un testo alternativo.
Finchè i css sono attivi nessun problema; il problema si pone se i css non 
sono attivi.
Se i css non sono attivi, anzichè continuare a visualizzare l'immagine 
vorrei far si che venisse visualizzato solo il testo alternativo.
Per far ciò, ho pensato di caricare l'immagine anzichè mediante IMG sulla 
pagina, tramite css usando BACKGROUND-IMAGE.
Risultato: se disattivo i css l'immagine scompare e fin qui tutto bene 
quello che volevo io.
Il problema però è un altro e cioè che in questa immagine è applicato un 
link.
Il risultato che dovrei ottenere è quindi quello di avere il link attivo 
quando si passa il mouse sopra l'immagine col relativo title; e ovviamente 
il link testuale soltanto nel caso in cui i css sono disattivati.
Chiedo quindi come avete risolto il problema in merito e se eventualmente 
potete darmi una dritta in tal senso.
Grazie in anticipo,
Cooper.
PS: L'obiettivo finale è quello di ottenere una pagina solo testuale (ovvero 
priva di elementi grafici nel caso in cui il css è disattivato).
-- 
BlueWare WebAgency
  [Internet:] 
http://www.blueware.it
  [icq:] 146-781-935
  [msn:] 
coo...@blueware.it
 

 priva di elementi grafici nel caso in cui il css è disattivato).
non vuoi immagini... ma ci deve essere il link, e senza testo in quel punto
ovvio... :)
non puoi applicare un link a un background...
che ne dici di inserire un testo sotto lo sfondo e linkarlo? Coi css attivi
avrai un doppio link, ma non è per niente strano (immagine e testo entrambi
linkati).
Comunque, anche se le immagini sono impostate come sfondo... ci sono sempre
nella pagina.
Magari puoi risolvere con una gif trasparente di 1px, che poi deformerai con
le dimensioni dell'immagine dello sfondo. Si carica in un attimo.
Daniele
-- 
<danieleimperi> </webdesigner>
http://www.danieleimperi.it
 - "I design your web idea"
http://www.ludus.info
 - Ludus: Vignette, Fumetti, Illustrazioni
"L'arte è come il crimine. Non paga."


si ma resta il fatto che se il css non è attivo, apparirà quel quadratino 
che denota l'assenza dell'immagine; in questo caso magari no, però 
nascerebbe il problema nel caso in cui le immagini venissero disattivate (il 
caricamento intendo).
Ciò premesso, provo a spiegarmi meglio. Io creo un documento testuale 
(simulando l'assenza di immagini e css) insomma prima di inserire immagini e 
css mi occupo di definire l'aspetto estetico del documento sotto il profilo 
meramente testuale (quindi ordinato ben formattato etc).
Da questo, costruisco sopra la grafica tramite css e immagini caricate 
attraverso il css.
In alcune aree in cui è presente il testo, questo dovrebbe essere SOSTITUITO 
da quanto definito sul css.
Non so se mi spiego... in modo tale cosi da rendere il processo invertibile, 
ovvero avere una pagina meramente grafica con i css e una pagina meramente 
testuale senza css.
Cooper.


 il link testuale soltanto nel caso in cui i css sono disattivati.
La tecnica che vuoi usare viene definita FIR (Fahrer Image Replacement -
dal nome del suo "inventore" Todd Fahrner). Ce ne sono di diversi tipi,
ognuna con diversi vantaggi e svantaggi.
Comunque il punto da cui partire è questo:
<html>
<head>
<title>FIR in action</title>
<style type="text/css">
a#titolo {
	background:url("hello_world.gif") no-repeat;
	width:217px;
	height:35px;
	display:block;
}
a:hover#titolo {
	background:url("hello_world_over.gif") no-repeat;
}
span { position:absolute;top:-5000px; }
</style>
</head>
<body>
<h1><a id="titolo" href="#"><span>Hello world!</span></a></h1>
</body>
</html>
Sappi che però, di base, questa tecnica NON è accessibile: infatti con CSS
attivi e immagini disabilitate non appare nulla.
Venerdì scorso sono stato ad un corso sui CSS di Gianluca Troiani e ci ha
mostrato una tecnica di Image Replacement "quasi" accessibile. Non ho avuto
ancora tempo di studiarla, ma appena me la guardo bene ti faccio sapere.
Ciao,
Max Graziani

 all'immagine? in termini di validazione xhtml 1.0 strict come si comporta?
Tu puoi dare al tuo link (anche vuoto, se vuoi) le dimensioni (sempre di
forma rettangolare, però) che vuoi, tramite css, e poi sovrapporre questo
link all'immagine di sfondo. Il principio è quello descritto qui:
http://www.constile.org/tips/emulare_le_immagini_mappate_con_i_css/
il tutto perfettamente valido e accessibile! :-)
Max Graziani


Ok grazie mille, perň qualcosa continua a non tornare, non č prevista una 
struttura condizionale anche elementare all'interno di XHTML ? Si potrebbe 
evitare cosi di scomodare il css con qualcosa del tipo:
In pratica qualcosa del tipo:
[ SE IMMAGINI ATTIVE ]
   <IMG SRC="PINCOPALLINO.GIF" />
[ ALTRIMENTI ]
   <H1> TESTO DEL MESSAGGIO </H1>
Cosi almeno dovrebbe risultare piu semplice, o no? o al limite se non 
proprio sul XHTML almeno sul CSS ?
Grazie ancora :)
Cooper.
PS: Rimango in attesa di avere tue notizie in merito all'altra soluzione a 
cui mi accennavi.


 proprio sul XHTML almeno sul CSS ?
Sarebbe bello :-)
-- 
Max Graziani
http://www.maxgraziani.net/

 priva di elementi grafici nel caso in cui il css è disattivato).
è possibile invece richiamare un'immagine coi css? Non come background, ma
come immagine.
Perché se è possibile farlo, il testo alternativo che hai messo risulta
linkato e avresti risolto.


Studiando la soluzione proposta sia da te che dal sito constile etc, sono 
arrivato a questa:
<html>
 <head>
   <style type="text/css">
     #titolo {
        background: url(resource/images/banner.gif) no-repeat;
        display: block;
        height: 74px;
        width: 580px;
      }
     #nodisplay { display: none; }
   </style>
 </head>
 <body>
   <a id="titolo" href="#" title="Esempio di link" ><span 
id="nodisplay">Esempio di link</span></a>
 </body>
</html>
In pratica, se i css sono disattivi viene visualizzato soltanto il testo e 
nessuna immagine.
Se i css sono attivi occorre distinguere due casi: a) se la visualizzazione 
delle immagini è attiva, viene visualizzata l'immagine; b) se la 
visualizzazione delle immagini è disattiva, non viene visualizzata 
l'immagine ma viene mantenuta l'area del link.
In altre parole viene visualizzato un testo alternativo (ovvero quello 
contenuto nel title) al posto dell'immagine.
Già cosi andrebbe bene, andrebbe però ancora meglio se nel caso b (soltanto) 
fosse visualizzato un bordo che evidenzi in modo particolare l'area del 
link.
Questo è fattibile?
Cooper.
