HTML / CSS - script bottone che cambia!

28/05/10 22:52

ciao avrei bisogno per favore :hail:

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="; 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 28/05/10 23:25

aaa

29/05/10 10:33

Xaratroom

Postato originariamente da fantarcola:

ciao avrei bisogno per favore :hail:

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="; 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?

Usa i CSS che risolvi prima, con meno codice e con maggiore compatibilità:
w3.org/TR/CSS2/…

aaa

29/05/10 12:35

cassin.simone

...e per ottimizzare il tutto utilizza gli sprites...

aaa

29/05/10 12:49

fantarcola

...e per ottimizzare il tutto utilizza gli sprites...

cosa sono?
html:

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

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

w3facile.com/css-e-webdesign/…
<.< non funziona penso per colpa dello sfondo...help!

Ultima modifica effettuata da fantarcola 29/05/10 13:59

aaa

29/05/10 19:05

cassin.simone

Li hai usati senza saperlo...quell'immagine che funge per due è proprio uno sprite

Ultima modifica effettuata da cassin.simone 29/05/10 19:06

aaa

30/05/10 9:16

fantarcola

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 30/05/10 9:18

aaa

30/05/10 10:41

cassin.simone

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?

aaa

30/05/10 15:40

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

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

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

aaa