horitamus: anklickbare Bereiche in einem Bild

Hallo liebes Forum,
zu allererst muss ich einmal ein großes Lob für diese Seite aussprechen. Hier wird einem der Einstieg in HTML auf eine anschauliche Weise erklärt. Im Rahmen meiner Masterarbeit in Physik programmiere ich gerade eine grafische Bedienoberfläche in HTML. Ich komme auch relativ gut voran, habe jedoch momentan ein Problem. Auf der Startseite sieht man ein großes Bild des Versuchsaufbaus. Ich habe es schon hinbekommen, einen Rahmen um die einzelnen Bauteile zu legen (einfach ein Kasten mit transparenten Hintergrund). Jetzt möchte ich, dass man in den Rahmen hineinklicken kann und sich dann ein passendes POP-UP zu dem jeweiligen Bauteil öffnet. Hier komme ich jedoch nicht weiter. Ich hatte überlegt, einen durchsichtigen grafischen Button zu erstellen und diesen dann in den Rahmen hineinzulegen. Jedoch weiß ich nicht genau, wie ich einen solchen Button erstellen soll. Alternativ hatte ich überlegt, einen Screenshot von dem Bauteil zu machen und dann dieses Bild passend in den jeweiligen Kasten zu schieben, aber das muss doch auch einfacher gehen. Ich habe es bereits gesehen, dass man z.B. auf Gruppenbildern die einzelnen Personen anklicken kann und dann nähere Informationen erhält. Wäre super, wenn ihr einen Tipp für mich hättet.

Beste Grüße

  1. servus horitamus,

    Ich habe es bereits gesehen, dass man z.B. auf Gruppenbildern die einzelnen Personen anklicken kann und dann nähere Informationen erhält. Wäre super, wenn ihr einen Tipp für mich hättet.

    Du suchst <http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm@title=verweis-sensitive Grafiken>.

    Beste Grüße

    der wurzelbert

    --
    Ist es ein Vogel?
    Ist es ein Flugzeug?
    Nein, es ist Reis, Baby!
    1. Ja!!
      Genau das ist es! Vielen Dank für die superschnelle Hilfe.

  2. Hallo noch einmal,
    ich bin jetzt so weit, dass man die Bereiche, die ich wollte, im Bild anklicken kann. Jetzt habe ich jedoch ein weiteres Problem. Der Benutzer soll sehen, welche Bereiche "klickbar" sind. Daher möchte ich, dass die sensitiven Bereiche umrahmt werden. Wenn ich einen Kasten einfüge, wie z.B auf dieser Seite beschrieben

    http://de.selfhtml.org/css/eigenschaften/positionierung.htm

    legt sich dieser aber anscheinend über den sensitiven Bereich und dieser ist nicht mehr anklickbar. Ich hab schon versucht, dem Kasten bzw. dem sensitiven Bereich einen anderen z-Index zuzuweisen, aber das klappt irgendwie nicht. Kennt jemand eine Lösung, wie ich den sensitiven Bereich einrahmen kann?

    Beste Grüße

    1. servus horitamus,

      legt sich dieser aber anscheinend über den sensitiven Bereich und dieser ist nicht mehr anklickbar. Ich hab schon versucht, dem Kasten bzw. dem sensitiven Bereich einen anderen z-Index zuzuweisen, aber das klappt irgendwie nicht. Kennt jemand eine Lösung, wie ich den sensitiven Bereich einrahmen kann?

      Lass die Sensitivität(?) weg und positioniere stattdessen die Links direkt. Keine divs, keine spans, a positionieren. Sind zwar eigentlich inline-Elemente (wegen Höhe und Breite), aber das lässt sich ja alles per CSS anpassen.

      Beste Grüße

      der wurzelbert

      --
      Ist es ein Vogel?
      Ist es ein Flugzeug?
      Nein, es ist Reis, Baby!