Qualcuno conosce un codice semplice per applicare un effetto rollover del tipo: ho un immagine e quando ci passo sopra col mouse ne compare un'altra?
Printable View
Qualcuno conosce un codice semplice per applicare un effetto rollover del tipo: ho un immagine e quando ci passo sopra col mouse ne compare un'altra?
o usare css o usare javascript
Questo lo sapevo, io vorrei il codice!!!
Esiste google XD
Cmq..
Questo è il codice da mettere nella pagine in cui si vedono le img (ora come ora la pirma immagine riappare quando il mouse viene spostato dalla seconda, ma puoi spostare il onmouseout="hideimg2();" dove vuoi ;P):
Questo va inserito nella pagine dove vedi le immagini (all'interno delle tag <head></head>):Codice:<div id="img1" onmouseover="hideimg1();">
<img src="immagine1" />
</div>
<div id="img2" onmouseout="hideimg2();">
<img src="immagine2" />
</div>
Mentre questo è il codice di un file chiamato stile.css (puio chiamarlo come vuoi, ma il .css deve esserci XD! attento che se cambi il noem del file devi anche cambiare nel <link rel="stylesheet" href="stile.css" type="text/css" />:Codice:<link rel="stylesheet" href="stile.css" type="text/css" />
<script type="text/javascript" src="function.js"></script>
E infine crei un file chiamato function.js (puoi cambiarlo ma il .js deve rimanere! come prima se lo cambi devi cambiare qui <script type="text/javascript" src="function.js"></script>):Codice:#img1 {
display: block;
}
#img2 {
display: none;
}
Poteva essere fatto più semplice ma non avevo voglia di pensarci e ho riutilizzato un mio vecchissimo script XDCodice:function hideimg1() {
tipimg1 = document.getElementById('img1');
tipimg1.style.display="none";
tipimg2 = document.getElementById('img2');
tipimg2.style.display="block";
}
function hideimg2() {
tipimg1 = document.getElementById('img1');
tipimg1.style.display="block";
tipimg2 = document.getElementById('img2');
tipimg2.style.display="none";
}
Cmq, fatto così se passi con il mouse sopra alla prima immagine si visualizza la seconda al suo posto, e se passi col mouse fuori dalla seconda ti ricompare la prima. Quindi funge se le due immagini sono della grandezza uguale (funzionerebbe cmq ma sarebbe un po' bruttino XD)
Esiste anche questo.
Ed esiste anche il regolamento da rispettare.
Ciao!
clicca qui o qui :wink:
Prova così:
Codice HTML:<script type="text/javascript">
function successiva(){
var arr = new Array ("immagine1.gif","immagine2.png","immagine3.jpg"); // metti l'url dell' immagine in ogni elemento dell'array
for (img in arr){
document.getElementById('imgbase').src=arr[img];
}
}</script>
<img id="imgbase" src="immagine_base.gif" onmouseover="successiva();">
senza usare js potresti fare anche così :
css:
tra i tag body:Codice HTML:#link {
height: 20px;
width: 60px;
text-align: center;
vertical-align: middle;
}
#onmouseover #link a {
color: #FF0000;
text-decoration: none;
}
#onmouseover {
height: 20px;
width: 60px;
}
#onmouseover #link a:hover {
color: #FFFF00;
text-decoration: none;
}
così quando vai sopra il div si illumina la cella e quando vai sopra il link si illumina anke il linkCodice HTML:<div id="onmouseover">
<div onmouseover="this.style.background='#C4DCFB';"
onmouseout="this.style.background= '#cccccc' ;" style="background:#CCCCCC">
<div id="link">
<a href="#">link</a>
</div>
</div>
</div>
@Zuluk: Mi sa che non hai capito molto la richiesta di midiclorian: leggi meglio il suo post.
questo:Citazione:
senza usare js potresti fare anche così
è JavaScript :wink:Codice HTML:onmouseover="this.style.background='#C4DCFB';"
onmouseout="this.style.background= '#cccccc' ;"
ho postato quello sbajato ...ne ho un altro fatto interamente col css ...però questo rffetto è più figoCitazione:
Originalmente inviato da probid
vuoi dire ke ho messo i colori al posto delle immagini in fasse di rollover??Citazione:
Originalmente inviato da probid
basta sostituire i colori con le imm. così:
Codice HTML:<div class="onmouseover">
<div onmouseover="this.style.background= 'url(image2.jpg)'"
onmouseout="this.style.background= 'url(image1.jpg)';" style="background: url(image1.jpg)">
<div class="link">
<a href="#">link1</a>
</div>
</div>
</div>