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 :
<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 :
#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)
<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 ( ) 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:
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);
}
non e' cross-browser :S, non so con le nuove versioni di IE ma precedentemente IE non supportava :hover sui div