Reihenfolge der Anordnung der Ebenen in einer TabellenZelle

Status
Nicht offen für weitere Antworten.
C

CodeBreaker

Grünschnabel
Hallo :-)

Folgendes versuche ich zu realisieren: in einer Tabellenzelle wird als Hintergrundbild eine Europa-Kontinentalansicht angezeigt. Darüber werden an bestimmten x-/y- Positionen kleine Fahnen gezeichnet. Über die Fahnen kommt ein transparentes Bild in der Größe des Hintergrundbildes, in Form einer ImageMap in der einzelne Bereiche sensibel 'anklickbar' sind.
Das Ganze soll dann so funktionieren, das der Benutzer die Fahne sieht, und sie anklicken kann, da der sensible bereich sich mit der Fahne deckt.
Allerdings habe ich ein Problem mit der Anordnung dh. der Ebenenanordnung was zur Folge hat, das die Fahnen AUF dem transparenten Bild gesetzt werden und somit die sensiblen Bereiche abdecken und somit nicht mehr anklickbar sind.
Frage also: wie kann ich es schaffen, das erst die Fahnen und dann die ImageMap (darüber) angeordnet wird?

ich habe es schon mir 'z-index' probiert, doch keien Wirkung. Vielleicht mache ich auch was falsch... mir fehlt mit CSS die Erfahrung.


hier noch der Code:

Code: 
<table>
    <tr>
        <td style="background: rgb(11, 10, 50) url(Europa/Bilder/klein/Europa.gif) no-repeat scroll 0%";>
             <div style="position: relative; top: 0px; left: 0px; height: 100%;">
                <div style="position:absolute; visibility: visible;  background-color:transparent; top:377px; left:213px; "><img src="../Fahne.gif" width="28" height="35" alt=""></div>
             </div>

            <img src="Europa/Bilder/klein/Europa_0.gif" width="897" height="748" border="0" alt="Europa" usemap="#Europa">
                <map name="Europa">
                    <area shape="poly" coords="345,155, 349,126, 347,123, 348,121, 351,121, 352,123, 352,125, 370,131, 368,134, 363,135, 355,136, 351,136, 347,154" href="index.php">
                </map>
            </img>
        </td>
    </tr>
</table>
 
Gegenfrage: kann ich die Fähnchen selber anklickbar machen UND frei in der Tabellen zelle Positionieren? wenn ja wie ? Dann würd ich mal wieder den Wald vor lauter Bäumen nicht sehen...

[EDIT]
habe eben das Bild in einen Link eingebaut:

Code: 
                     <div style="position: relative; top: 0px; left: 0px; height: 100%;">
                        <div style="position:absolute; visibility: visible;  background-color:transparent; top:400px; left:400px; "><a href="index.html"><img src="../Fahne.gif" width="28" height="35" alt=""></a></div>
                     </div>

und mir ist wieder eingefallen warum ich das so nicht machen wollte. Mit der Link-Variante wäre das ganze Bild anwählbar. ich möchte aber das wirklich nur die Grafik als Link funktioniert.
 
Zuletzt bearbeitet:
dann positioniere doch jede Fahne einzeln. Also hast du dann kleine 10x10 Bildchen die über dem Hintergrundbild positioniert sind und das is mit css möglich wenn ich die thematik etwas durchschaue. könnte nur aufgrund vieler Fahnen ne leblose Tipparbeit werden, aber du kommst zu deinem Ergebnis.
 
ich positioniere die fahnen schon einzeln ... dazu lese ich angegebene Koordinaten aus und berechne dann wo das bild dargestellt werden soll. Das passiert alles über PHP (habe den Quellcode oben vereinfacht, da sonst kaum einer durchgeschaut hätte). Und wie ich die Bilder mit CSS positioiere weiß ich auch, es geht allein darum das ich das Transparente Bild mit den anklickbaren bereichen ganz oben drauf zu liegen habe. Und da es transparent ist... würde man die Fahnen eh sehen...
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück