fantarcola (Normal User)
Rookie
 
Messaggi: 26
Iscritto: 04/02/2010
|
ciao avrei bisogno per favore   di uno script che permetta questa situazione:
a- bottone normale (immagine1)
b- quando si passa il maus sopra si attiva immagine 2 che puo essere del tipo più luminosa (immagine2)
c- quando si clicca il pulsante va in giù (immagine 3)
ora come ribadisco ho bisogno solo del codice ^^ penso che ci vorra un misto di java e html e forse css per posizionare i pulsanti... help ples!
edit:
<Script type="text/javascript">
<!--
button1up = new Image; button1up.src = "bottone-a.png";
button1down = new Image; button1down.src = "bottone-b.png";
function MouseOverRoutine(ButtonName)
{
if (ButtonName=="button1") {document.button1.src = button1down.src;}
}
function MouseOutRoutine(ButtonName)
{
if (ButtonName=="button1") {document.button1.src = button1up.src;}
}
//-->
</script>
<p align="center">
<a href="http://www.#.it" onmouseOver="MouseOverRoutine('button1')" onmouseOut="MouseOutRoutine('button1')">
<Img border="0" Src="bottone-a.png" name="button1" ></a></p>
questo è quello che ho provato ad usare pultroppo pero non usa 3 immagini!
<head>
<script language="javascript1.2">
img1=new Image()
img1.src="up.png"
img2=new Image()
img2.src="down.png"
</script>
</head>
<body>
<center>
<a href="#" onMousedown="document.images['example'].src=img2.src" onMouseup="document.images['example'].src=img1.src"> <img src="up.up" name="example" border=0></a>
</center>
</body>
questo a quanto mi hanno detto dovrebbe fare tutti i 3 passaggi ma a me non funziona! come mai?
Ultima modifica effettuata da fantarcola il 29/05/2010 alle 1:25 |
|
|
Xaratroom (Ex-Member)
Expert
Messaggi: 526
Iscritto: 03/04/2008
|
Postato originariamente da fantarcola:
ciao avrei bisogno per favore di uno script che permetta questa situazione:
a- bottone normale (immagine1)
b- quando si passa il maus sopra si attiva immagine 2 che puo essere del tipo più luminosa (immagine2)
c- quando si clicca il pulsante va in giù (immagine 3)
ora come ribadisco ho bisogno solo del codice ^^ penso che ci vorra un misto di java e html e forse css per posizionare i pulsanti... help ples!
edit:
<Script type="text/javascript">
<!--
button1up = new Image; button1up.src = "bottone-a.png";
button1down = new Image; button1down.src = "bottone-b.png";
function MouseOverRoutine(ButtonName)
{
if (ButtonName=="button1") {document.button1.src = button1down.src;}
}
function MouseOutRoutine(ButtonName)
{
if (ButtonName=="button1") {document.button1.src = button1up.src;}
}
//-->
</script>
<p align="center">
<a href="http://www.#.it" onmouseOver="MouseOverRoutine('button1')" onmouseOut="MouseOutRoutine('button1')">
<Img border="0" Src="bottone-a.png" name="button1" ></a></p>
questo è quello che ho provato ad usare pultroppo pero non usa 3 immagini!
<head>
<script language="javascript1.2">
img1=new Image()
img1.src="up.png"
img2=new Image()
img2.src="down.png"
</script>
</head>
<body>
<center>
<a href="#" onMousedown="document.images['example'].src=img2.src" onMouseup="document.images['example'].src=img1.src"> <img src="up.up" name="example" border=0></a>
</center>
</body>
questo a quanto mi hanno detto dovrebbe fare tutti i 3 passaggi ma a me non funziona! come mai? |
|
|
|
cassin.simone (Member)
Guru
Messaggi: 1051
Iscritto: 03/06/2009
|
...e per ottimizzare il tutto utilizza gli sprites...
|
|
|
fantarcola (Normal User)
Rookie
Messaggi: 26
Iscritto: 04/02/2010
|
Codice sorgente - presumibilmente Plain Text |
...e per ottimizzare il tutto utilizza gli sprites...
|
cosa sono?
html:
Codice sorgente - presumibilmente HTML / CSS |
<head>
<title>#</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#000000">
<DIV STYLE="position:absolute; top:1px; left:1px">
<IMG SRC="combatarms1,2.png" border=0>
</DIV>
<div class="button_ex"><a href="#"></a></div>
</body>
</html>
|
css:
Codice sorgente - presumibilmente Plain Text |
.button_ex {
width: 150px;
height: 155px;
}
.button_ex a {
display: block;
width: 150px;
height: 155px;
background: url(images/sphere.jpg) no-repeat top left;
}
.button_ex a:hover {
background-position: top right;
}
|
Ultima modifica effettuata da fantarcola il 29/05/2010 alle 15:59 |
|
|
cassin.simone (Member)
Guru
Messaggi: 1051
Iscritto: 03/06/2009
|
Li hai usati senza saperlo...quell'immagine che funge per due è proprio uno sprite
Ultima modifica effettuata da cassin.simone il 29/05/2010 alle 21:06 |
|
|
fantarcola (Normal User)
Rookie
Messaggi: 26
Iscritto: 04/02/2010
|
 a capito grazie, pero io non riesco a vedere i pulsanti perchè penso che l'immagine messa cosi di sfondo,in css nel html in valore assoluto si sovrapponga ai bottoni...
Ultima modifica effettuata da fantarcola il 30/05/2010 alle 11:18 |
|
|
cassin.simone (Member)
Guru
Messaggi: 1051
Iscritto: 03/06/2009
|
In che senso non riesci a visualizzare i pulsanti? Ho provato io stesso e funziona alla grande. Il source è il tuo stesso. Ho solo eliminato la riga 8 del codice html.
Sei sicuro che l'immagine sia collocata nella cartella images?
Potresti mostrare un paio di screenshot?
|
|
|
fantarcola (Normal User)
Rookie
Messaggi: 26
Iscritto: 04/02/2010
|
in parte ho risolto era come ho detto io l'immagine di sfondo in valore assoluta non lasciava vedere altro ho cambiato il codice ora è:
Codice sorgente - presumibilmente HTML / CSS |
<head>
<title>#</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#000000">
<div class="button_ex"><a href="#"></a></div>
</body>
</html>
|
Codice sorgente - presumibilmente Plain Text |
body {
background-image: url(combatarms1,2.png);
background-repeat: no-repeat;
background-position: 1px 1px;
}
.button_ex {
width: 150px;
height: 155px;
}
.button_ex a {
display: block;
width: 150px;
height: 155px;
background: url(up.png) no-repeat top left;
}
.button_ex a:hover {
background-position: top right;
}
|
adesso i bottoni si vedono per succede una cosa strana il pimo bottone ok pero quando passo il maus si vede sempre lo stesso bottone spostato a destra  |
|
|
cassin.simone (Member)
Guru
Messaggi: 1051
Iscritto: 03/06/2009
|
Postato originariamente da fantarcola:
in parte ho risolto era come ho detto io l'immagine di sfondo in valore assoluta non lasciava vedere altro ho cambiato il codice ora è:
Codice sorgente - presumibilmente HTML / CSS |
<head>
<title>#</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#000000">
<div class="button_ex"><a href="#"></a></div>
</body>
</html>
|
Codice sorgente - presumibilmente Plain Text |
body {
background-image: url(combatarms1,2.png);
background-repeat: no-repeat;
background-position: 1px 1px;
}
.button_ex {
width: 150px;
height: 155px;
}
.button_ex a {
display: block;
width: 150px;
height: 155px;
background: url(up.png) no-repeat top left;
}
.button_ex a:hover {
background-position: top right;
}
|
adesso i bottoni si vedono per succede una cosa strana il pimo bottone ok pero quando passo il maus si vede sempre lo stesso bottone spostato a destra |
Che immagine hai usato? |
|
|
| 
