Premesso che i frame sono una struttura obsoleta e che alcuni browser potrebbero non interpretarli, stai facendo un po' di confusione tra JS e CSS.
Se chiedi una cosa da realizzare con i CSS, devi lasciare da parte JS.
E comunque gli eventi vanno applicati ai link, non alle immagini in essi contenuti, altrimenti ci sono problemi di compatibilita` con alcuni browser.
Inoltre una serie di 5 pulsanti e` una lista, e come tale va realizzata. I pulsanti vanno quindi racchiusi in un <ul> e ciascuno in un suo[*]
Il tuo pulsante va quindi modificato cosi`:
codice:
<ul id="menu">[*]<a href="iframes/iframe_home.html" target="iframe" title="Entra nella Home del sito">
[img]images/home.png[/img]
</a>[*] ...
...[/list]
con CSS:
#menu {
list-style-type: none;
margin: 0;
padding: 0;
}
#menu li {
list-style-type: none;
margin: 0 5px; /* un po' di spazio tra un bottone e l'altro */
padding: 0;
float: left;
}
#menu a {
... formattazione standard ...
}
#menu a:hover {
... formattazione hover ...
}
#menu a.attivo, #menu a.attivo:hover {
... formattazione attivo ...
}
Poi per poter realizzare la formattazione della parte attiva, devi assegnare una classe particolare (io l'ho chiamata "attivo" al link premuto. Questo si realizza tramite JS, e va implementato tramite l'evento onclick da applicare al link:
onclick="attivare(this)"dove la funzione attivare() dovra` essere del tipo:
codice:
attivare (ogg) {
var men = document.getElementById('menu');
var lista = menu.getElementsByTagname('a');
foreach (elem) in (lista) {
elem.className = "";
}
ogg.className = "attivo";
return (true);
}
Nota che la sintassi JS e` scritta in modo approssimativo: devi verificarla e/o chiedere nel forum JS, una volta che il codice CSS funziona.