Immagine rollover

09-09-2007, 20.40.51

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?

09-09-2007, 20.45.14

o usare css o usare javascript

09-09-2007, 20.57.27

Questo lo sapevo, io vorrei il codice!!!

10-09-2007, 00.25.07

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):

Codice:

<div id="img1" onmouseover="hideimg1();">
<img src="immagine1" />
</div>
<div id="img2" onmouseout="hideimg2();">
<img src="immagine2" />
</div>

Questo va inserito nella pagine dove vedi le immagini (all'interno delle tag <head></head>):

Codice:

<link rel="stylesheet" href="stile.css" type="text/css" />
<script type="text/javascript" src="function.js"></script>

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:

#img1 {
display: block;
}

#img2 {
display: none;
}

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:

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";
}

Poteva essere fatto più semplice ma non avevo voglia di pensarci e ho riutilizzato un mio vecchissimo script XD

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)

10-09-2007, 10.14.17

Esiste anche questo.
Ed esiste anche il regolamento da rispettare.

Ciao!

**zulukwebsite** · 10-09-2007, 10.26.46

clicca qui o qui

Ospite · 10-09-2007, 15.27.46

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();">

**zulukwebsite** · 10-09-2007, 21.07.11

senza usare js potresti fare anche così :

css:

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;
}

tra i tag body:

Codice 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>

così quando vai sopra il div si illumina la cella e quando vai sopra il link si illumina anke il link

Ospite · 10-09-2007, 21.13.36

@Zuluk: Mi sa che non hai capito molto la richiesta di midiclorian: leggi meglio il suo post.

senza usare js potresti fare anche così

questo:

Codice HTML:

onmouseover="this.style.background='#C4DCFB';" 
onmouseout="this.style.background= '#cccccc' ;"

è JavaScript

**zulukwebsite** · 10-09-2007, 21.24.38

Originalmente inviato da probid

@Zuluk: Mi sa che non hai capito molto la richiesta di midiclorian: leggi meglio il suo post.

questo:

Codice HTML:

onmouseover="this.style.background='#C4DCFB';" 
onmouseout="this.style.background= '#cccccc' ;"

è JavaScript

ho postato quello sbajato ...ne ho un altro fatto interamente col css ...però questo rffetto è più figo

Originalmente inviato da probid

@Zuluk: Mi sa che non hai capito molto la richiesta di midiclorian: leggi meglio il suo post.

vuoi dire ke ho messo i colori al posto delle immagini in fasse di rollover??

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>

Discussione: Immagine rollover

LinkBack

Strumenti discussione

Display

Immagine rollover

Regole di scrittura