Grafik soll aktiv bleiben (:active)

[Fieterich]

Hallo,

ich erstelle gerade eine Dokumentation, die mit einem Übersichtsbild beginnt. Auf dieser Übersicht befinden sich etliche Schaltflächen, welche durch

    <img class="bild" src="bild.png" width="1610" height="569" alt="bild" usemap="#bild">
    <map name="bild">
    <area shape="rect" coords="1310,49,1337,76" href="#beispiel" alt="beispiel" title="beispiel">
    </map>

sozusagen interaktiv anklickbar sind und auf die entsprechenden Bereiche verweisen.

Das funktioniert auch wie es soll. Leider ist das Bild ziemlich breit, daher wird das Bild zunächst verkleinert dargestellt:

CSS-Teil: (derzeit noch im HTML-Code)

<style>
.bild {
-webkit-transform:scale(0.5);
transform:scale(0.5);
}

.bild:active {
-webkit-transform:scale(1.0);
transform:scale(1.0);
}
.bild {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
</style>

Nun zu meinem Problem, was nicht neu sein dürfte. Wie erzwinge ich, dass das Bild mit :active nicht wieder verkleinert wird, sobald ich die Maustaste loslasse (mir ist klar, dass genau das mit :active bezweckt werden soll)? Das Bild musste also vergrößert bleiben (bis zum nächsten Klick ins Bild) und darüber hinaus müssen die "Schaltflächen" und "Icons" weiterhin anklickbar bleiben?

Ich habe das Ganze schon mit :hover probiert, aber sobald ich mit dem Mauszeiger über ein Icon fahre, wird es wieder verkleinert.

Mir fällt keine Lösung ein. Vielleicht finde ich ja hier im Forum Hilfe. HTML/CSS bevorzugt, aber wenn es nicht anders geht zur Not auch mit Javascript.

Gruß

Fieterich