Bisogna farle raggiungere il 100% per incrementi; il che avviene nel tempo, e quindi entrano in gioco i Timer, che in JavaScript sono setTimeout() e setInterval()
Ma partiamo da questo, tu hai un Tag IMG con l' opacità al 50% di default nello STYLE
opacity: 0.5;   viene riconosciuto da tutti dei Browser se non "antichi", tranne che da IExplorer, che richiede:
filter: alpha(opacity=50);
Per questo, avremo una doppia indicazione sia nello STYLE/HTML che nel JavaScript.
codice:
<html>
<head>
<title>To full opacity</title>
<script type="text/javascript">
function make(){
document.images["pic"].style.opacity=1;
document.images["pic"].style.filter ="alpha(opacity=100)";
}
</script>
</head>
<body>
[img][/img]
</body>
</html>
Nello stesso Tag IMG, il gestore d' evento onmouseover reagisce al mouse che passa sopra a quell' Elemento img e la sua reazione sarà chiamare/attivare una funzione make() che potevamo anche chiamare ciccio()
Questa da' esecuzione alle istruzioni JS in essa contenute.
Per prima cosa, JS deve trovare l' Elemento, nel Documento HTML, su cui intervenire. Ha bisogno di un' indicazione, un percorso; un po' come per le Path, gli URL quando si indirizza il Browser ad aprire un file.
document.images individua tutte le img presenti nel Document
document.images["pic"] ne individua una specifica, cui abbiamo assegnato name="pic"
Il primo passo verso l' automazione, sarà disporre del valore in gioco per l' opacità, in forma di variabile.
var livello = un numero; (dichiariamolo ad inizio script)
e
livello al posto del numero nelle istruzioni d' esecuzione, fa' il trucco; e per ora mi fermo qua, sperando che qualche esperimento ce lo fai davvero e non stai solo a guardarlo, il Codice.