evidenziare una scritta al passaggio del mouse

12-08-2007, 11.54.40

Buongiorno a tutti, ecco cosa vorrei sapere:
come faccio a far evidenziare una scritta con un collegamento ipertestuale quando ci passo sopra con il mouse. Non so se mi sono spiegato troppo bene, in parole più semplice vorrei far cambiare colore a una scritta quando ci passo sopra con il mouse senza però cliccarci. Grazie in anticipo per la risposta.

**miki92** · 12-08-2007, 12.11.12

E un semplice codice css:

Codice:

a:link{
    color:#00FF00;  
    font-family:Comic Sans MS;  
    font-size:10pt; 
}
a:visited{
    color:#00FF00;  
    font-family:Comic Sans MS;  
    font-size:10pt; 
}
a:active{
    color:#00FF00;  
    font-family:Comic Sans MS;  
    font-size:10pt; 
}
a:hover{
    color:#FF0000;  
    font-family:Comic Sans MS;  
    font-size:10pt; 
}

Devi personalizzarti i vari link qui sopra elencati in particolare l'ultimo e quello al passaggio del mouse, cioè quello che ti serve a te.

**dreadnaut** · 12-08-2007, 12.11.50

una in particolare, tutti i collegamenti ? Per cabiare il colore a tutti i link devi aggiungere nua cosa simile nel tuo tag <head>

Codice HTML:

<style type="text/css">
 A {  color: red; }
 A:hover { color: orange; }
</style>

che rende tutti i link rossi, e arancioni quando ci passi sopra con il mouse (hover). Se invece il link è uno in particolare, devi prima dargli una classe, in modo da poterl individuare, e poi colorarlo in un modo simile a sopra

Codice HTML:

<style type="text/css">
 A.miolink {  color: red; }
 A.miolink:hover { color: orange; }
</style>

...  più avanti nella pagina ...

<p>... potete cliccare su <a class="miolink" href="pagina.html">questo link</a> .... </p>

@miki: nel css più regole possono essere applicate allo steso elemento, per cui il tuo codice è un po' ridondante. Un terzo delle righe ti permette di raggiungere lo stesso risultato:

Codice:

a {
    color: #00FF00;  
    font-family:Comic Sans MS;  
    font-size:10pt; 
}
a:hover {
    color: #FF0000;  
}

12-08-2007, 12.14.37

Grazie, proprio quelo che volevo, e se invece vorrei cambiare l'immagine dietro il link? Cioè, per esempio un pulsante, ci passi sopra e si illumina. Come si fa?

**dreadnaut** · 12-08-2007, 12.18.10

Intanto, per completezza ti do un link ad una spiegazione dei colori in css, perché magari rosso e arancione non ti vanno.

Per quanto riguarda le immagini, è un discorso simile ma diverso. Dipende molto da che immagine hai dietro al link. Dimensione fissa? Include la scritta? è solo uno sfondo?

**miki92** · 12-08-2007, 12.18.36

Si può fare sia con flash sia con un semplice script js e due differenti immagini, se vuoi chiedi che posto.

**dreadnaut** · 12-08-2007, 12.21.53

Miki92, entrambi i modi che hai citato sono un po' antichi e sicuramente non accessibili. Lo stesso risultato può essere ottenuto solo con html e css. Leggi magari un articolo a riguardo.

@midiclorian: come puoi scrivere su un sito cose di una erroneità suprema? tipo:

sulla Terra utilizziamo il silicio per costruire le CPU (o unità centrali di calcolo) dei microchip dei computers, per via della sua alta conduttività

Decisamente no, il silicio viene utilizzato proprio perché non è altamente conduttivo (quelli sono i metalli...) ma perché è semi-conduttivo

12-08-2007, 12.24.16

guardate questo è il mio sito: midiclorian.altervista.org nel menù a sinistra vorrei ad esempio che quando passi sopra la sezione enciclopedia l'immagine dietro il link, cioè il rettangolino blu, o diventasse più scuro e si rovesciasse, insomma che l'immagine cambi.

@dreadnaut mi fa piacere che te ne intendi al riguardo, quelle sono cose che trovo in giro, io non sono molto bravo in materia.

12-08-2007, 12.29.16

da quel che ho capito vuoi che c'è un img e quando ci si passa col mouse cambia?Allora devi usare il roolover..credo che si chiami così ;)
quello più semplice lo puoi trovare qui;)
http://forum.it.altervista.org/basi-...avascript.html
Ciao!! :D

**dreadnaut** · 12-08-2007, 12.34.08

in realtà basterebbe

Codice HTML:

 A:hover {  background-image:  url(nuovaimmagine.jpg); }

senza tanti rigiri, solo che il sito di midiclorian è fatto con Office-qualcosa, quindi è assurdamente complesso riuscire a metterci mano. Midi', se te lo fa fare il programma che usi bene, altrimenti guarda nella guida dello stesso. Io in quel sorgente non ci voglio metter mano

12-08-2007, 12.35.57

si ma dipende...se lo mette nel menù dovrebbe avere una cosa del genere ;)

Codice:

A.menuhover {  background-image:  url(nuovaimmagine.jpg); color: #colore; }

ciao ;)

**miki92** · 12-08-2007, 12.42.24

Ah quindi questa funziona è valida anche per le immagini oltre ai link?

12-08-2007, 12.43.23

certo! ma è un background...invece per fare cambiare l'img si deve fare come ho detto io al post 10 ;)
http://forum.it.altervista.org/530657-post10.html

**dreadnaut** · 12-08-2007, 12.48.10

A.menuhover:hover { background-image: url(nuovaimmagine.jpg); color: #colore; }

non dimentichiamo l'hover, senza quello non funziona

12-08-2007, 12.49.40

ops..errore di battitura :D..cmq è così non come hai fatto tu :P ;)

Codice:

A.menu:hover { background-image: url(nuovaimmagine.jpg); color: #colore; }

;)..ciao D:

**zulukwebsite** · 12-08-2007, 23.30.48

potresti fare così ad esempio
css:

Codice HTML:

#menu {
	height: 50px;
	width: 200px;
}
#menu li {
	float: left;
}
#menu a {
	background-color: #00CCFF;
	display: block;
	height: 20px;
	width: 50px;
	text-align: center;
	vertical-align: middle;
	color: #FF0000;
	margin-right: 12px;
	margin-top: 5px;
}
#menu ul {
	list-style-type: none;
	margin: 0px;
}
#menu a:hover {
	background-color: #0000FF;
	display: block;
	height: 20px;
	width: 50px;
	text-align: center;
	vertical-align: middle;
}

body:

Codice HTML:

<div id="menu">
  <ul>
    <li><a href="#">link1</a></li>
    <li><a href="#">link2</a></li>
    <li><a href="#">link3</a></li>
  </ul>
  </div>

13-08-2007, 13.27.34

Non ho capito una cosa, questi codici in che punto li devo inserire?

**miki92** · 13-08-2007, 13.34.50

puoi metterli sia in un file .css che poi lo richiami tramite link nel tag head

Codice HTML:

<link href="nome.css" rel="stylesheet" type="text/css" />

Sia nel campo head cosi:

Codice HTML:

<style type="text/css">codice_qui</style>

Io a parer mio ti consiglio la prima opzione quella del file .css cosi invece di scrivere più righe nelle tue pagina web, con una richiami lo stesso codice. Poi fai come vuoi.

13-08-2007, 13.56.21

Non mi funziona! Potete perfavore scrivermi il codice per intero, sapendo che la prima immagine si chiama image303 e si trova nella cartella index_file e la seconda si chiama image472, sempre nella stessa cartella.

**dreadnaut** · 13-08-2007, 14.00.45

come ti ho detto prima, non c'è un modo semplice di modificare il tuo codice come è adesso. Tutte le persone che hanno scritto in questo messaggio (me compreso in fondo) hanno suggerito metodi alternativi, per cui devi riscrivere il sito da capo. Se non riesci a farlo con il programma che usi, mettere mano in quel codice è troppo complesso.

13-08-2007, 14.04.55

Io ho usato publisher, che mi consigliate di usare?
Comunque sia il codice da inserire sarebbe questo?: A:hover { background-image="index_file/image303.gif" url("index_file/image472.gif"); }

**dreadnaut** · 13-08-2007, 14.38.16

il codice da inserire "sarebbe" (sempre nel tag <style> come quello per il colore dei link)

Codice:

A { background-image: url(index_file/image303.gif); }
A:hover { background-image: url(index_file/image472.gif); }

(il link normale ha uno sfondo, quello con il mouse sopra uno sfondo diverso)

13-08-2007, 14.48.15

se scrivo: <style type="text/css">A { background-image: url(index_file/image303.gif); }
A:hover { background-image: url(index_file/image472.gif); }</style>
funziona ma non esattamente come volevo io, insomma vedi tu stesso: http://midiclorian.altervista.org/index.htm

**dreadnaut** · 13-08-2007, 14.55.09

Ho usato il condizionale prima, non l'indicativo, proprio perché non funziona come vuoi tu

In informatica le code non funzionano come uno vuole, ma come uno le ha programmate - tu le hai fatte programmare a Publisher, quindi funzionano come esso vuole.

13-08-2007, 14.58.29

cioè io che doveri fare per farle funzionare come voglio, devo riscrivere tutto da capo?
Toglimi una curiosità: <style type="text/css"> significa che quel cambiamento si applica a tutti i file text con collegementi ipertestuali?

13-08-2007, 15.01.06

Dovresti usare un editor serio e dedicato, tipo dreamweaver, Nvu, ecc. (non Frontpage e tutta la famiglia office).

Ciaoo!

**dreadnaut** · 13-08-2007, 15.12.05

Originalmente inviato da midiclorian

Toglimi una curiosità: <style type="text/css"> significa che quel cambiamento si applica a tutti i file text con collegementi ipertestuali?

uhm, no

<style> ... </style> è il tag che si usa per le informazioni sullo "stile" (l'aspetto e il layout) di una pagina. L'attributo type="text/css" specifica che il contenuto del tag è sotto forma di testo (vs binario, o immagini etc) e in particolare in css - il formato di quelle regole che ti ho scritto prima

13-08-2007, 15.46.11

capito, e se i volessi che il contenuto del tag fosse sotto forma di immagine doveri mettere type="image/css"?

13-08-2007, 15.55.14

Originalmente inviato da midiclorian

capito, e se i vorrei che il contenuto del tag fosse sotto forma di immagine doveri mettere type="image/css"?

"volessi"!

Che intendi dire con "il contenuto del tag fosse sotto forma di immagine"??
Quel tag è riferito al css, quindi per applicare gli stili css devi usare quel tag, punto.
Non esistono altri formati per i css (sia quelli esterni sia quelli interni, scritti direttamente nella pagina html).

Ciaoo!!

13-08-2007, 16.00.36

Vebbè, questa parte la lascio perdere, mi accontentrò di usare quello che avevo chiesto all'inizio cioè di colorare solo i link, vi ringrazio per essere sempre così disponibili, anche con i proncipianti come me. Ciao!!!

Discussione: evidenziare una scritta al passaggio del mouse

LinkBack

Strumenti discussione

Display

evidenziare una scritta al passaggio del mouse

Regole di scrittura