HTML+Javascript: Mouseover in Imagemaps

Ich sitze hier gerade an einer kniffligen Aufgabe: Für eine Bäcker-Website möchte ich in die Sidebar gerne ein Brot als Hintergrund nehmen und darauf Buttons für Produkte, Öffnungszeiten, Impressum und Co anbringen. Wenn man auf einen dieser Buttons klickt, wird man dann über eine Imagemap auf die entsprechende Seite weitergeleitet. Das stelle ich mir auch nicht allzu schwer vor. Ich löse den Rest der Homepage über die unbeliebten Frames, was mir aber sch*egal ist, Hauptsache, die Website sieht später einigermaßen gut aus und kompatibel sind Frames ja. Das Problem der Lösung über eine Imagemap ist aber, dass ich noch keine Lösung gefunden habe, das ganze dann mit einem Mouseover-Effekt zu versehen. Normalerweise geht das ja ganz leicht.

Nun frage ich mich, ob einer hier vielleicht einen Lösungsansatz oder Lösungsvorschlag hat. Oder könnte ich das ganze vielleicht darüber lösen, dass sich je nach angeklicktem Button einfach das ganze Bild (die Sidebar) verändert und ich so einfach je Button ein Bild der ganzen Sidebar erstellen muss?

Üblicher weise sind das Hintergrundbild und die Buttons einzelne Bilder. Es wird dann einfach ein Block-Element erstellt, wo das "Brot" als Hintergrund festgelegt wird. In das Element kommen dann die einzelnen Buttons.

Möchte man jedoch bei einem Bild an bestimmten Positionen eine Aktion ausführen, wenn die Maus drüber fährt, so kann man dies einfach Lösen indem man mit JavaScript die Mausposition abfragt.