Ciao a tutti!
Ho avuto una richiesta abbastanza particolare, la creazione di un bottone con due gif (stato normale e premuto) da creare però con l'html.
In flash c'è questa funzione, ma purtroppo la richiesta è stata ben precisa.
Dite che è una cosa fattibile? Qualcuno ci ha già provato?
MapoDesign
Comunicazione Vitaminica
www.mapodesign.com
Non puoi usare i CSS? :master:
Sì è possibile, si chiamano BOTTONI con ROLLOVER
prova a guardare qui:
http://css.html.it/articoli/leggi/22...-con-rollover/
(è possibile crearli anche avvalendosi del javascript)
Si, quell'articolo l'avevo già visto. Purtroppo non cerco i pulsanti a rollover, ma un pulsante che sia attivi solo al click, come quelli di flash, ma senza usare il flash.
Ci sono quasi arrivata con i css. L'immagine si vede al click, ma ora non si vede quella di base.
Vi mostro come ho fatto...
Ho fatto tre immagini.
Una con il bottone iniziale, una con il bottone al click e un'altra trasparente, perchè mi sembra di aver capito che con i css non si possa inserire un immagine ma solo uno sfondo, però mi serve qualcosa di quella dimensione a cui dare il link.
lo potete vedere su:
http://workelisaresmini.altervista.org/bottone.html
Funziona ma non si vede l'immagine iniziale e quella al click è spostata in giù.
il codice che ho utilizzato è:
[img]imm_trasparente.gif[/img]
mentre il css è:
a:active {
background-image: url(active.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
}
a:link {
background-image: url(link.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
}
cmq l'utilizzo del css è una bella idea a cui non avevo pensato.
Manca tanto così perchè funzioni... mannaggia!!
Grazie mille!!
MapoDesign
Comunicazione Vitaminica
www.mapodesign.com
L' immagine iniziale si vede, ma solo la prima volta; poi, una volta cliccato, quel link diventa visited-link.Originariamente inviato da MapoDesign
Funziona ma non si vede l'immagine iniziale e quella al click è spostata in giù.
Rimane però il fatto che se uno clicca, tiene cliccato e allontana il mouse, l' area mantiene il focus e mantiene active.jpg (non torna link.jpg sinché non si clicca altrove).codice:a:link { background-image: url(link.jpg); background-repeat: no-repeat; background-position: 0px 0px; } a:visited { background-image: url(link.jpg); background-repeat: no-repeat; background-position: 0px 0px; } a:active { background-image: url(active.jpg); background-repeat: no-repeat; background-position: 0px 0px; }
Ma una volta che al posto del # in href ci sarà l' URL di destinazione, questo potrà non essere più considerato un inconveniente apprezzabile.
Quoto quello che ha detto enzaccio, ti consiglio solamente una forma di codice meno ridondante:Originariamente inviato da Enzaccio
L' immagine iniziale si vede, ma solo la prima volta; poi, una volta cliccato, quel link diventa visited-link.
Rimane però il fatto che se uno clicca, tiene cliccato e allontana il mouse, l' area mantiene il focus e mantiene active.jpg (non torna link.jpg sinché non si clicca altrove).
Ma una volta che al posto del # in href ci sarà l' URL di destinazione, questo potrà non essere più considerato un inconveniente apprezzabile.
codice:a:link, a:visited { background: url(link.jpg) transparent 0 0 no-repeat; } a:active { background: url(active.jpg) transparent 0 0 no-repeat; }
Tu hai mai usato ImageReady è un programma della Adobe di solito si trovava nello stesso pacchetto di phtoshop (anche se temo l'abbiamo tolto dall'ultima versione)
è un programma per creare gif animate,
e c'era la possibilità di creare anche bottoni con rollover vari
cioè immagini che cambiano al passaggio del mouse, al click e mi pare (scusa ma è passato molto tempo dall'ultima volta che l'ho usato) anche dopo che il link è stato visitato.
beh in pratica tu creavi le immagini e il programma salvava in html con lo script in <head> già fatto
Sono riuscita a recuperare una pagina fatta con ImageReady CS:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
Senza_titolo_1_Livello_1_down = newImage("immagini/Senza-titolo-1_Livello-1-do.gif");
preloadFlag = true;
}
}
// -->
</script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="preloadImages();">
<a href="#"
onmouseout="changeImages('Senza_titolo_1_Livello_1 ', 'immagini/Senza-titolo-1_Livello-1.gif'); return true;"
onmousedown="changeImages('Senza_titolo_1_Livello_ 1', 'immagini/Senza-titolo-1_Livello-1-do.gif'); return true;"
onmouseup="changeImages('Senza_titolo_1_Livello_1' , 'immagini/Senza-titolo-1_Livello-1.gif'); return true;">
[img]immagini/Senza-titolo-1_Livello-1.gif[/img]</a>
</body>
</html>
Spero ti possa essere utile
Se non hai ancora risolto
questa è la soluzione
Ciao! Sono riuscita a trovare la soluzione...
[img]link.jpg[/img]
la metto per chiunque ne avesse bisogno.
Non sono ancora riuscita a provare anche le altre soluzioni che mi avete dato prometto che le provo tutte!!!
Grazie mille a tutti!!
MapoDesign
Comunicazione Vitaminica
www.mapodesign.com
Permessi di invio
Rispondi quotando