immagine diversa su hover!

***#Funeral_Fog#*** · 24-02-2006, 18:17

Salve!..
..allora guardate l'immagine..!
Vorrei ke passando sul bottone grande,questo diventi piu scuro(l'immagine è gia pronta,ma non so come usarla!),e porti alla home page..stessa cosa per quello piccolo,(ke ovviamente non porterà alla home,vedrò in seguito ke metterci!)
stò davvero impazZendo!
Ecco il codice: (non so se ce ne sarà bisogno ma lo posto ugualmente)
HTML:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
     <head>
				<title>.:Strumenti Musicali</title>
				<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
				<link rel="stylesheet" type="text/css" href="style.css"/>
     </head>
 	<body>
		<div id="main">
			<div id="head">
					<div id="headlogo">
					</div>
			</div>
		</div>
			<div id="menuright">
				<div id="menuleft">
					<div id="menu">
				  </div>
				</div>
			</div>		  
	</body>
</html>

CSS:

codice:

body 
{
background:#ffffff;
margin:auto;
padding:0;
font-family:'trebuchet ms',arial,verdana,sans-serif;
}

#head 
{
height: 135px;
background:url(img/headbackground.png) repeat-x;
}

#headlogo 
{
height: 135px;
background:url(img/headlogo.png) left no-repeat;
}

#menuleft 
{
height: 66px;
background:url(img/menuleft.png) left no-repeat;
}

#menuright 
{
height: 66px;
width: 55%;
margin: -38px auto;
background:url(img/menuright.png) right no-repeat;
}

#menu 
{
height: 66px;
background:url(img/menuback.png) repeat-x;
margin-left: 10%;
margin-right: 10%;
}

Ke mi dite?

***#Funeral_Fog#*** · 25-02-2006, 21:20

up!

**Vincent.Zeno** · 25-02-2006, 21:29

Puoi specificare come identifichi "quel" bottone?

Nel codice, come si chiama?

***#Funeral_Fog#*** · 25-02-2006, 21:34

#headlogo
{
height: 135px;
background:url(img/headlogo.png) left no-repeat;
}

eccolo!
ho fatto una prova,assegnando la pseudoclasse hover a #headlogo e "dicendoli" di caricare l'immagine del borrone illuminato,ma nn va bene xke i ovorrei k diventasse scuro solo quando passo sl pulsante..e nn anke nelle vicinanze!

**Vincent.Zeno** · 25-02-2006, 21:42

Credo di aver capito il problema....

La prima parte l'hai capita: hover dovevi specificarlo, e l'hai fatto... mi pare.

Per il fatto delle "vicinanze"...

le immagini da sole sono sempre rettangolari: dunque devi mappare l'immagine per creare il link e sostituirla (hover) con un'altra che abbia la parte trasparente che ti interessa....

Ho spiegato?

***#Funeral_Fog#*** · 25-02-2006, 21:58

Sssssì ho capito..
allora,ho provato anke un'altra soluzione..

[img]img/headlogo.png[/img]

questa!
così creo il link..
(l'immagine data via css almeno x quanto ne so io,nn puo essere usata come link,quindi la soluzione precedente direi di accantonarla!)..
e và benissimo,ho dimensionato l'immagine nel modo adatto ecc,ora "diventa" link solo dove occorre!
Xò come faccio a specificare via css,di cambiare immagine(con quella "illuminata" passandoci sopra?
L' :hover nn penso mi torni utile,dato ke non devo cambiare un'immagine di background,ma un'imamgine inserita con l'html e usata come link..
mi sn espresSo in modo abbastanza contorto,ma spero k si capisca!!

(ps: lavoro in xhtml 1.0 strict)

Grazie x le risposte comunque!

**Vincent.Zeno** · 25-02-2006, 22:12

scrivo senza fare prove, falle tu:

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

fai sapere

***#Funeral_Fog#*** · 25-02-2006, 22:19

..Non và!
l'immagine definita con l'htm resta,mentre quella data via css x l'hover,viene visualizzata poko più giù,ma nn interamente,solo una linea di poki pixel!

**Vincent.Zeno** · 25-02-2006, 22:43

... è strano quello che dici.

comunque tenterei un'altra cosa:

visto che hai una classe per il logo, prova mettere tutti gli attributi che ti servono dentro quella classe, dando riferimenti non equivoci con altri "a" (link).

Forse ti semplichi il lavoro.

***#Funeral_Fog#*** · 26-02-2006, 01:51

Risolto..non sò se asia il modo giusto ma ho fatto così:

<div id="headlink">

</div>

poi a "prova" ho assegnato un pò di padding fino ad arrivare alla fine del bottone..

Esistono altri metodi?Questo mi sà di soluzione Fai da te!

Discussione: immagine diversa su hover!

Strumenti discussione

Ricerca discussione

Visualizza

immagine diversa su hover!

Permessi di invio