[CSS] Problema su Hover di immagini

Ajanty · 24-04-2008, 04:20

Salve Forum,

ho il seguente codice in html :

<div id="q1">
<a href="#"><img src="1.jpg" /></a>

e nel css per ora ho dichiarato solo q1 :

#q1 {
width: 320px;
height: 450px;
margin-left: 10%;
}

Come dichiaro il .a img in modo che passando con il mouse 1.jpg prenda 2.jpg ?
Grazie

Mauro

arthurgp · 24-04-2008, 13:02

per fare cio devi lavorare sul background di un blocco nel css
non puoi farlo mettendo direttamente un collegamento ad un immagine

<a href="#"><div id="immagine"></div></a>

CSS:

#immagine{
background-image:url(1.jpg);

}
#immagine:hover{
background-image:url(2.jpg);

}

fai attenzione alle dimensioni ...
fai delle prove , ma dovrebbe funzionare

Ajanty · 24-04-2008, 21:22

Cercavo un altro metodo piu' elegante ... cmq va benissimo questo , pero' facendo cosi mettendo due :

<a href="#"><div id="immagine"></div></a>
<a href="#"><div id="immagine2"></div></a>

La seconda immagine mi viene messa a capo ... why ?

arthurgp · 24-04-2008, 23:15

perchè crei 2 blocchi con due immagini all'interno e entrambi li inserisci nella pagina dovresti trovare un modo di visualizzare una volta una e una volta l'altra.

Ciò è fattibile sempre lavorando sulla visibilità dei blocchi nel file css, ma è molto piu complicato...

Non conosco un modo piu semplice per fare ciò..

Saluti

m.distrutti · 25-04-2008, 02:48

Quote:

Originariamente inviato da Ajanty

Salve Forum,

ho il seguente codice in html :

<div id="q1">
<a href="#"><img src="1.jpg" /></a>

e nel css per ora ho dichiarato solo q1 :

#q1 {
width: 320px;
height: 450px;
margin-left: 10%;
}

Come dichiaro il .a img in modo che passando con il mouse 1.jpg prenda 2.jpg ?
Grazie

Mauro

se vuoi fare un rollover di immagini su una img un codice di esempio potrebbe essere :

Codice:

<img src="roll_normale.gif" id="roll"
     onmouseover="document.getElementById('roll').src='roll_on.gif'"
     onmouseout="document.getElementById('roll').src='roll_normale.gif'">

usando javascript però perche ti servi di una proprietà del tag(che e' la soluzione più consigliata da parte mia se non devi scrivere del testo ma hai solo una immagine che fa da link)

se vuoi invece usare i CSS lavori appunto sul back-ground del link pero(questo perche con i CSS non accedi alle proprietà dei TAG che in questo caso e' img con la relativa proprietà src) con il testo dentro, oppure no

e un esempio potrebbe essere :

Codice:

#q1 a{
background: url(normale.gif);
}

#q1 a:hover{
background: url(mouse_on.gif);
}

ma il background del link non ne determina la dimensione per vedere l'immagine
quella dipende esclusivamente dal contenuto(la scritta di lancio in pratica, quindi se dovessi voler adattare la dimensione del link con il background potresti inserire un padding come accorgimento, ovviamente le misure dei o del padding dipendono dalla dimensione dell'immagine)

Codice:

<html>

<head>
<style>

a{
   background: url(http://www.imontanari.it/cssmenu/menu2b.jpg) no-repeat;
   padding-left : 100px;
   padding-right: 79px;
   padding-bottom : 15px;
}

a:hover{
   background: url(http://www.imontanari.it/cssmenu/menu2a.jpg) no-repeat;
}

</style>
</head>


<body>
<a href = "#"></a>
</body>

</html>

inserisci queste righe che ho fatto in un file .html e nota come cambia l'immagine(senza esserci testo dentro il link)

cmq nel caso appunto il link non debba contenere del testo la soluzione più intelligente e' quella di usare javascript

EDIT: niente scusami sono abituato a lavorare con firefox ihih, ho appena guardato con IE ma non supporta questo accorgimento poichè supporta il padding in questo caso solo se c'e' del testo dentro perciò se inserisci uno spazio bianco (&nbsp) nel link e la proprietà css text-decoration:none; non ti darà problemi con IE :P, a questo punto direi di usare la prima soluzione senza rancori ihih

PS:

Quote:

per fare cio devi lavorare sul background di un blocco nel css
non puoi farlo mettendo direttamente un collegamento ad un immagine

Codice:

<a href="#"><div id="immagine"></div></a>


CSS:

#immagine{
   background-image:url(1.jpg);
}
#immagine:hover{
   background-image:url(2.jpg);
}

non e' cross-browser :S, non so con le nuove versioni di IE ma precedentemente IE non supportava :hover sui div

kk3z · 25-04-2008, 10:40

Codice:

<img src="roll_normale.gif" 
     onmouseover="this.src='roll_on.gif'"
     onmouseout="this.src='roll_normale.gif'">

Ajanty · 25-04-2008, 15:07

Grazie a tutti, penso che la soluzione in jscript e' quella migliore per quello che devo fare ... speravo di fare tutto in css ma il padding che dovrei usare con iexplorer non e' gradito :P

Ajanty · 25-04-2008, 17:53

Scusate se rompo nuovamente ma :

#img1 {
width: 320px;
height: 450px;
margin-left: 10%;
}
#img2 {
width: 320px;
height: 450px;
margin-left: 440px;
}

e

<div id="img1">
<img src="1.jpg" onmouseover="this.src='1a.jpg'" onmouseout="this.src='1.jpg'">
</div>
<div id="img2">
<img src="2.jpg" onmouseover="this.src='2a.jpg'" onmouseout="this.src='2.jpg'">
</div>

mi mette le immagini sempre una a capo dell' altra e non sulla stessa riga ... dove cavolo sto sbagliando ??

arthurgp · 25-04-2008, 18:49

utilizza <span> invece di div
span invece di div è in-line block quindi non dovrebbe andare a capo.

Ajanty · 25-04-2008, 18:55

Già provato ... niente da fare ... ma ricordo che c'era la possibilita tramite css di ovviare, e' che sono un po arrugginito :P

m.distrutti · 25-04-2008, 21:16

cerca di capirmi ma ti sto postando soluzioni senza conoscere il tuo template
cmq prova cosi:

i div si autodimensionano con i contenuti se non gli dai tu una dimensione fissa, perciò se le immaigni di rollover hanno dimensioni uguali puoi anche non specificare la dim sul div, poi non so se oltre alle immaigni nei div devi mettere altri contenuti cmq prova ad adattare nei tuoi contenuti questo codice

(li immagini sono una affianco all'altra)

Codice:

<html>
<style>
   #img1 {
      margin-left: 10%;
      padding:0px;
      margin:0px;
      float:left;
   }

   #img2 {
      margin-left: 440px;
      padding : 0px;
      margin:0px;
   }
</style>
</head>
<body>
   <div id="img1">
      <img src="http://html.it/articoli/esempi/articoli_pro/447/bknormal.jpg"
         onmouseover="this.src='http://html.it/articoli/esempi/articoli_pro/447/bkactive.jpg'"
         onmouseout="this.src='http://html.it/articoli/esempi/articoli_pro/447/bknormal.jpg'" />
   </div>

   <div id="img2">
      <img src="http://html.it/articoli/esempi/articoli_pro/447/sfondonormale.jpg"
         onmouseover="this.src='http://html.it/articoli/esempi/articoli_pro/447/sfondohover.jpg'"
         onmouseout="this.src='http://html.it/articoli/esempi/articoli_pro/447/sfondonormale.jpg'">
   </div>
</body>
</html>

inserisci float : left;

Ajanty · 26-04-2008, 00:44

Il float mi risolve il problema per le semplici immagini ... quando vado a farle diventare link con <a href> tornano a capo :P

m.distrutti · 26-04-2008, 14:42

tornano a capo perchè probabilmente racchiudi il div nel link e a quel punto il float dovresti darlo al link...non so che dirti O_O
(EDIT: pensandoci un attimo non dovrebbe darti problemi lo stesso :S)
cosi a me non da problemi e infatti non dovrebbe darli assolutamente

le immagini sino linkate adesso bho, posta il codice che fai te cosi lo vediamo un attimo, per il resto non so che dire... mi sembra una cosa abbastanza semplice quella che vuoi fare :S

Codice:

<html>
<style>
   #img1 {
      margin-left: 10%;
      padding:0px;
      margin:0px;
      float:left;
   }

   #img2 {
      margin-left: 440px;
      padding : 0px;
      margin:0px;
   }

   a img {
      border: none;
   }
</style>
</head>
<body>
   <div id="img1">
     <a href="#"> <img src="http://html.it/articoli/esempi/articoli_pro/447/bknormal.jpg"
         onmouseover="this.src='http://html.it/articoli/esempi/articoli_pro/447/bkactive.jpg'"
         onmouseout="this.src='http://html.it/articoli/esempi/articoli_pro/447/bknormal.jpg'" />
     </a>
   </div>

   <div id="img2">
     <a href="#">
      <img src="http://html.it/articoli/esempi/articoli_pro/447/sfondonormale.jpg"
         onmouseover="this.src='http://html.it/articoli/esempi/articoli_pro/447/sfondohover.jpg'"
         onmouseout="this.src='http://html.it/articoli/esempi/articoli_pro/447/sfondonormale.jpg'" />
     </a>
   </div>
</body>
</html>

24-04-2008, 04:20	#1
Ajanty Member Iscritto dal: Feb 2001 Città: Genova Messaggi: 49	[CSS] Problema su Hover di immagini Salve Forum, ho il seguente codice in html : <div id="q1"> <a href="#"><img src="1.jpg" /></a> e nel css per ora ho dichiarato solo q1 : #q1 { width: 320px; height: 450px; margin-left: 10%; } Come dichiaro il .a img in modo che passando con il mouse 1.jpg prenda 2.jpg ? Grazie Mauro

24-04-2008, 13:02	#2
arthurgp Member Iscritto dal: Dec 2007 Messaggi: 60	lavora sugli sfondi del css per fare cio devi lavorare sul background di un blocco nel css non puoi farlo mettendo direttamente un collegamento ad un immagine <a href="#"><div id="immagine"></div></a> CSS: #immagine{ background-image:url(1.jpg); } #immagine:hover{ background-image:url(2.jpg); } fai attenzione alle dimensioni ... fai delle prove , ma dovrebbe funzionare __________________ "Commputer programming is tremendous fun. Like music, it is a skill that derives from an unknown blend of innate talent and constant practice." Larry O’Brien & Bruce Eckel

24-04-2008, 23:15	#4
arthurgp Member Iscritto dal: Dec 2007 Messaggi: 60	perchè crei 2 blocchi con due immagini all'interno e entrambi li inserisci nella pagina dovresti trovare un modo di visualizzare una volta una e una volta l'altra. Ciò è fattibile sempre lavorando sulla visibilità dei blocchi nel file css, ma è molto piu complicato... Non conosco un modo piu semplice per fare ciò.. Saluti __________________ "Commputer programming is tremendous fun. Like music, it is a skill that derives from an unknown blend of innate talent and constant practice." Larry O’Brien & Bruce Eckel

25-04-2008, 10:40	#6
kk3z Senior Member Iscritto dal: Nov 2003 Messaggi: 980	Codice: <img src="roll_normale.gif" onmouseover="this.src='roll_on.gif'" onmouseout="this.src='roll_normale.gif'">

25-04-2008, 17:53	#8
Ajanty Member Iscritto dal: Feb 2001 Città: Genova Messaggi: 49	Scusate se rompo nuovamente ma : #img1 { width: 320px; height: 450px; margin-left: 10%; } #img2 { width: 320px; height: 450px; margin-left: 440px; } e <div id="img1"> <img src="1.jpg" onmouseover="this.src='1a.jpg'" onmouseout="this.src='1.jpg'"> </div> <div id="img2"> <img src="2.jpg" onmouseover="this.src='2a.jpg'" onmouseout="this.src='2.jpg'"> </div> mi mette le immagini sempre una a capo dell' altra e non sulla stessa riga ... dove cavolo sto sbagliando ?? __________________ Quando la volontà c'è, e la volonta c'è ... il modo si trova, si trova sempre ...

24-04-2008, 21:22	#3
Ajanty Member Iscritto dal: Feb 2001 Città: Genova Messaggi: 49	Cercavo un altro metodo piu' elegante ... cmq va benissimo questo , pero' facendo cosi mettendo due : <a href="#"><div id="immagine"></div></a> <a href="#"><div id="immagine2"></div></a> La seconda immagine mi viene messa a capo ... why ?

25-04-2008, 15:07	#7
Ajanty Member Iscritto dal: Feb 2001 Città: Genova Messaggi: 49	Grazie a tutti, penso che la soluzione in jscript e' quella migliore per quello che devo fare ... speravo di fare tutto in css ma il padding che dovrei usare con iexplorer non e' gradito :P

25-04-2008, 18:49	#9
arthurgp Member Iscritto dal: Dec 2007 Messaggi: 60	utilizza <span> invece di div span invece di div è in-line block quindi non dovrebbe andare a capo. __________________ "Commputer programming is tremendous fun. Like music, it is a skill that derives from an unknown blend of innate talent and constant practice." Larry O’Brien & Bruce Eckel

25-04-2008, 18:55	#10
Ajanty Member Iscritto dal: Feb 2001 Città: Genova Messaggi: 49	Già provato ... niente da fare ... ma ricordo che c'era la possibilita tramite css di ovviare, e' che sono un po arrugginito :P __________________ Quando la volontà c'è, e la volonta c'è ... il modo si trova, si trova sempre ...

26-04-2008, 00:44	#12
Ajanty Member Iscritto dal: Feb 2001 Città: Genova Messaggi: 49	Il float mi risolve il problema per le semplici immagini ... quando vado a farle diventare link con <a href> tornano a capo :P __________________ Quando la volontà c'è, e la volonta c'è ... il modo si trova, si trova sempre ...

Strumenti
Mostra una versione stampabile Invia questa pagina per email