Riassumendo, hai codificato un Link su un' immagine con l' image mapping; in più, all'entrata del mouse nel campo generale d' immagine, e prima ancora che questi raggiunga l' area "calda" il gestore d' evento onMouseOver cambia il SRC al campo medesimo, per cui carica un file.jpg sostitutivo che sottostà alla medesima mappatura d' immagine legata al Tag IMG; e sin qui non sorgono problemi.
Il passo successivo sarebbe il click sull' area calda e parte il collegamento.html

Ora è qui che tu vorresti introdurre un ulteriore "intermezzo" con un terzo file.jpg sostitutivo che viene caricato al passaggio del mouse sull' area calda; questo in parole povere si traduce nel (tentare di) gestire l' evento onMouseOver nei Tag AREA o MAP; ma abbiamo visto, non tutti i Browser lo garantiscono e l' area rimane deputata a ricevere un classico click di tipo not-javascript-event.
Difatti un Link a mappatura d' immagine funziona anche con JavaScript disabilitata sul Browser, come un classico [img][/img] .


Una via alternativa può essere questa; che abbandona l' image mapping.
La "striscia sottostante" dell'immagine si aggiunge a parte, quella sopra resta invariata; quindi ti devi preparare due ritagli della parte aggiuntiva, uno "normale" e l'altro "evidenziato".

Qui abbiamo due Tag IMG e le immagini sono già presenti entrambe una sopra l' altra, quella iniziale ed il ritaglio da aggiungere; solo che questa è tenuta ad 1px di altezza e non la vedi.
Sostituisci '30' con l' altezza nativa in pixel dell' appendice.
codice:
<html>
<head><title>turning maps</title>

</head>
<body bgcolor="#D0D090">
<div align="center">
            



[img]base.jpg[/img]
[img]appendice1.jpg[/img]


            

</div>

</body>
</html>
Se questo ti risulta fattibile, dopo possiamo implementarlo anche per gestire più appendici, se è caso di un menù di navigazione come pare essere.