Background-image nei commegamenti ipertestuali

**silverseraph** · 10-09-2005, 14.23.03

Ragazzi, volevo sapere se esistesse un modo per far si che se passi il mouse su un collegamento ipertestuale come background appaia un'immagine. Magari è possibile cn i CSS, o con lo JAVASCRIPT?

Grazie infinite.

10-09-2005, 14.48.45

con i css di sicuro si puo fare con un colore con un img nn so prova nei tag <head> metti <style>a:hover {backgroung-image: url(url tua img);}</style>

**poske** · 10-09-2005, 14.49.18

a:hover {
background-image: url('immagine.gif');
}

Ciao! :D

**silverseraph** · 10-09-2005, 17.42.01

Poske ho provato a fare come dici tu, ma non funziona: il class l'ho denominto "select_menu" e questo è il codice css:

Codice:

A.select_menu:link { 
color: #fff; FONT-FAMILY: Arial, Verdana, Helvetica, sans-serif; font-size: 
22px; TEXT-DECORATION: none
} 
A.select_menu:active {
color: #fff; FONT-FAMILY: Arial, Verdana, Helvetica, sans-serif; font-size: 
22px; TEXT-DECORATION: none
} 
A.select_menu:visited {
color: #fff; FONT-FAMILY: Arial, Verdana, Helvetica, sans-serif; font-size: 
22px; TEXT-DECORATION: none
} 
A.select_menu:hover{
background-image: url('bar_menu.gif')
}

10-09-2005, 18.07.57

il codice è url(immagine.gif) nn url('immagine.gif')

**poske** · 10-09-2005, 18.52.34

Codice:

.select_menu a:link { 
color: #fffff;
FONT-FAMILY: Arial, Verdana, Helvetica, sans-serif;
font-size: 22px;
TEXT-DECORATION: none;
} 
.select_menu a:active {
color: #ffffff;
FONT-FAMILY: Arial, Verdana, Helvetica, sans-serif;
font-size: 22px;
TEXT-DECORATION: none;
} 
.select_menu a:visited {
color: #ffffff;
FONT-FAMILY: Arial, Verdana, Helvetica, sans-serif;
font-size: 22px;
TEXT-DECORATION: none;
} 
.select_menu a:hover {
background-image: url('bar_menu.gif');
}

Questo codice dovrebbe funzionare... provalo!

Ciao! :D

**heracleum** · 10-09-2005, 19.42.09

infatti con l'url(), es.:
background-image: url(/dir/img.gif)
gli apici NON vanno messi.

**poske** · 10-09-2005, 19.59.48

Originalmente inviato da heracleum

infatti con l'url(), es.:
background-image: url(/dir/img.gif)
gli apici NON vanno messi.

[ot]Io nel mio sito li metto e funziona...

e li ho anche validati col W3C... boh?[/ot]

Ciao! :D

**silverseraph** · 10-09-2005, 21.00.57

Originalmente inviato da jostock

il codice è url(immagine.gif) nn url('immagine.gif')

Anche in questo modo: url(immagine.gif) non mi funziona lo stesso.

**poske** · 10-09-2005, 21.08.30

Originalmente inviato da silverseraph

Anche in questo modo: url(immagine.gif) non mi funziona lo stesso.

Il file immagine.gif deve trovarsi nella stessa cartella della pagina in cui si trova il foglio di stile (se quest'ultimo è esterno).

Ciao! :D

**silverseraph** · 10-09-2005, 21.13.20

Certo, si trova nella stessa Directory.

Ho provato ad inserire il class anche tra i tag DIV, ma niente da fare.

**poske** · 10-09-2005, 21.14.41

Puoi postare una pagina di esempio? mi sembra strano che non vada...

Ciao! :D

**silverseraph** · 10-09-2005, 21.17.28

Ecco qui, il codice CSS lo metto nella pagina per non creare impicci :D

Codice:

<HTML> 
<HEAD> 
<STYLE TYPE="text/css" MEDIA=screen> 
<!-- 
A.select_menu a:link { 
color: #fffff;
FONT-FAMILY: Arial, Verdana, Helvetica, sans-serif;
font-size: 22px;
TEXT-DECORATION: none;
} 
A.select_menu a:active {
color: #ffffff;
FONT-FAMILY: Arial, Verdana, Helvetica, sans-serif;
font-size: 22px;
TEXT-DECORATION: none;
} 
A.select_menu a:visited {
color: #ffffff;
FONT-FAMILY: Arial, Verdana, Helvetica, sans-serif;
font-size: 22px;
TEXT-DECORATION: none;
} 
A.select_menu a:hover {
background-image: url(bar_menu.gif);
}--> 
</STYLE> 
</HEAD> 
<BODY> 
<a href="#" class="select_menu">Prova</a> 
</BODY> 
</HTML>

**poske** · 10-09-2005, 21.20.48

Originalmente inviato da silverseraph

A.select_menu a:link {
color: #fffff;
FONT-FAMILY: Arial, Verdana, Helvetica, sans-serif;
font-size: 22px;
TEXT-DECORATION: none;
}

Ecco cos'è! devi togliere tutte le "A" prima dei .select_menu :D

Ciao! :D

**silverseraph** · 10-09-2005, 21.28.19

Le ho tolte, non ci crederai mai, ma non funziona lo stesso....STO IMPAZZENDO!!

**heracleum** · 11-09-2005, 00.05.10

Ecco il codice STYLE corretto (e anche un po' ottimizzato):

Codice HTML:

<HTML> 
<HEAD> 
<STYLE TYPE="text/css" MEDIA="screen"> 
<!-- 
.select_menu a:link, 
.select_menu a:visited, 
.select_menu a:active { 
 color: #ffffff;
 FONT-FAMILY: Arial, Verdana, Helvetica, sans-serif;
 font-size: 22px;
 TEXT-DECORATION: none;
 background-image: none;
} 

.select_menu a:hover {
 background-image: url(bar_menu.gif);
}
--> 
</STYLE> 
</HEAD> 
<BODY> 
<div class="select_menu">
<a href="#">Prova</a> 
</div>
</BODY> 
</HTML>

Dunque, visto che gli stili li indichiamo nell'ordine:
.classeElemento a:stato {}
vuol dire che i link devono essere CONTENUTI da un contenitore (quello che volete, span, div, td è uguale) che abbia class=".classeElemento", infatti come vedete ora c'è un div che ha il class e dentro tutti i link avranno quello stile senza doverlo neanche ripetere per tutti i link -eventualmente numerosi-.
Da notare che l'ottimizzazione sta nel fatto che tutti gli stati con aspetto identico possono essere definiti una volta sola in blocco, separati da virgole.

Da notare anche quel curioso:
background-image: none;
nelle classi dei link normali (non hover) ... perché esplicitare che non ci deve essere immagine di sfondo? che senso ha? BOH! infatti in Mozilla non c'è alcun bisogno mentre l'ennesima falla di Internet Explorer lo rende necessario.

**silverseraph** · 11-09-2005, 11.03.41

Prima l'ho scritto, ora lo ripeto: in passato avevo anche provato son il DIV, ma nulla da fare...ora provo questo codice. Grazie in anticipo.

**silverseraph** · 11-09-2005, 11.10.43

Ora funziona, ma c'è ancora un problema: l'immagine non si visualizza per intera, ma si visualizza solo come background del collegamento ipertestuale. Come devo fare per visualizzarla intera? Magari si potrebbe fare inserendola in una cella, e impostare una lunghezza standard?

Grazie.

**heracleum** · 11-09-2005, 17.18.03

Certo che funziona

come puoi leggere dall'ultima parte del messaggio precedente, dopo il codice, ci sono parecchie trappole (soprattutto con IE) da evitare.

Riguardo all'ultima tua perplessità:
Beh ma.. puoi facilmente immaginare che lo sfondo di un link testuale o qualsiasi altra cosa venga linkata abbia delle dimensioni proprie e variabili.. è ovvio che farle coincidere con le dimensioni dell'immagine di sfondo è un'impresa..
o meglio di solito quando si usano questi effetti l'immagine di sfondo è APPUNTO uno sfondo, continuo (seamless) cioè non si nota la ripetizione dell'immagine ma c'è un effetto di sfondo omogeneo,
appunto per non essere condizionati dalle dimensioni di link e immagine di sfondo.

Evidentemente vuoi un effetto che non ho ben presente, è possibile sapere l'indirizzo della tua pagina dove si può aver chiara l'idea che vuoi realizzare?

**Taitaonline** · 11-09-2005, 18.38.36

Se non ho capito male, lui vorrebbe che un link testuale (credo) tipo "HOME", al momento del passaggio del mouse si trasformasse, chessò, in un'immagine di una casetta che ha come misure ... 100 x 50 pixel ? ... (misure a caso) ...
Chiaramente la parola "HOME" non occupa tutto quello spazio ed è qui che sorge il problema ...
Una soluzione potrebbe essere quella di inserire i link testuali in una tabella con delle celle della stessa misura delle immagini che dovrebbero apparire al passaggio del mouse; la scritta la si può centrare sia in verticale che in orizzontale all'interno della cella e dovrebbe essere a posto ...

**silverseraph** · 12-09-2005, 08.17.18

Taitaonline hai capito quello che mi serve. Il class l'ho inserito in una cella, ma mi fa lo stesso effetto che faceva col DIV.

**heracleum** · 12-09-2005, 13.19.09

Ehh.. allora purtroppo... visto -ora- lo scopo finale, che è sempre meglio esplicitare al primo topic,

.. dicevo purtroppo abbiamo imboccato una strada che per il tuo utilizzo non va affatto bene.. soprattutto se lo si vuol far funzionare su tutti i browser..

Per farti capire perché la strada non va bene:
come dicevo nel mio post precedente questo metodo è OTTIMO per assegnare a QUALSIASI link in una pagina un effetto di "rollover", reso più gradevole dal fatto che lo sfondo che cambia è un'immagine.
Se invece a te serve creare dei rollover SOLO su link di dimensioni prestabilite, dentro celle di stesse dimensioni, si potrebbe fare, indicanzo via css che il link deve essere ESTESO a tutto lo spazio del suo contenitore ( display:block; ) e lavorando un po' con i padding sul link si può distanziare opportunamente la scritta (che andrebbe altrimenti a finire in alto a sinistra, bruttissimo)... ma a questo punto devi rispondere solo a questa domanda:

hai i testi dei link di larghezza variabile (OVVIO immagino)
e vuoi le scritte CENTRATE orizzontalmente nella cella?

Se rispondi SI meglio cambiare immediatamente strada perché è praticamente impossibile centrare una scritta all'interno di un link display:block
(SI/NO) ?

se invece scegli NO: perché ti bastano le scritte allineate a sinistra o destra (sempre con il dovuto margine dal borso, ovvio) allora si può fare senza javascript, solo css..

Dimenticavo:
se proprio non ti va di linkare da pagina sul tuo sito dove stai facendo le prove, potresti almeno linkarci l'immagine di sfondo? così un piccolo indizio può aiutare a farsi un'idea.

**silverseraph** · 12-09-2005, 15.19.42

A ME LA SCRITTA BASTA A DESTRA. IL LINK NON VE LO POSSO DARE CKE NON E' ONLINE. L'IMMAGINE E' QUESTA: http://img391.imageshack.us/img391/3176/barra3jc.gif

Edit:
sarebbe buona norma non utilizzare mai i caratteri MAIUSCOLI nei forum, grazie.

**heracleum** · 12-09-2005, 16.58.50

Ok risolto, anche con scritte centrate, cosa di solito ardua e in questo caso aiutata da un deprecato align="center" che però qui ci piace.
Testato su Mozilla, IE e Opera e funziona in maniera identica su ognuno:

Potete vedere qui come appare:
http://heracleum.altervista.org/img/tmp/bgroll.html

molto elegante, silverseraph ha gusto, non c'è dubbio.

Anche se basterebbe guardare il sorgente HTML, copio qua il codice perché non si sa mai:

Codice HTML:

<HTML> 
<HEAD> 
<STYLE TYPE="text/css" MEDIA="screen"> 
<!-- 
body { background-color:black; }

.select_menu a:link, 
.select_menu a:visited, 
.select_menu a:active { 
 width: 591px;
 line-height: 50px;
 color: #ffffff;
 font-family: Arial, Verdana, Helvetica, sans-serif;
 font-size: 22px;
 text-decoration: none;
 display:block;
 background-image: none; 
} 

.select_menu a:hover {
 background-image: url(barra3jc.gif);
}
--> 
</STYLE> 
</HEAD> 
<BODY>

<br>
<br>

<div align="center"> 

	<div class="select_menu">
		<a href="#">Prova Rollover con immagine di sfondo</a> 
	</div>
	<div class="select_menu">
		<a href="#">Prova</a> 
	</div>
	<div class="select_menu">
		<a href="#">Prova 2 Testo mooooolto ma moooolto lungo</a> 
	</div>
	<div class="select_menu">
		<a href="#">Prova 3 medio</a> 
	</div>

</div>
<br>


</BODY> 
</HTML>

**silverseraph** · 12-09-2005, 17.34.15

Non so come ringraziarti...sono commosso!!

**heracleum** · 12-09-2005, 17.50.48

Figurati... beh un modo di ricambiare ci sarebbe ...
eheheh... (risatina infame)

basta che nei prossimi topic e successivi post, quando chiedi aiuto, cerchi di superare il limite delle DUE righe di spiegazioni/richieste che pare tu ti sia imposto.. in questo modo in molti meno batti e ribatti si arriva presto alla soluzione!

ciao ciao

**silverseraph** · 12-09-2005, 17.55.16

Senzaltro seguirò il tuo consiglio!!

ciao e grazie ancora!!

Discussione: Background-image nei commegamenti ipertestuali

LinkBack

Strumenti discussione

Display

Background-image nei commegamenti ipertestuali

Regole di scrittura