[HTML] Imagemap + Einfärbung

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [HTML] Imagemap + Einfärbung

    Hi!
    Ich habe folgendes Problem und weiß nicht wie ich es genau verwirklichen soll:
    Ich habe ein Bild einer Karte, und möchte, dass bestimmte Bereiche der Karte bei gewissen Umständen (, die per PHP geprüft werden) eingefärbt wird.
    Ich will aber NICHT, dass die einzelnen Bereiche einzelne Bilder sind, die es auch in der eingefärbten Version gibt.

    Wie wäre das so mit (X)HTML am sinnvollsten zu verwirklichen? Divs, die mit relativer Position entsprechend darüber verschoben werden, oder gibt es andere Möglichkeiten?

    Danke,
    Click
    Du kannst jeden Tag wie deinen letzten leben, du musst nur jeden Tag das Gleiche tun.

    Denk' mal drüber nach!

  • #2
    bei image-maps. imho keine chance. habe allerdings seit ewigen zeiten nicht mehr damit gearbeitet.

    gruß
    peter
    Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
    Meine Seite

    Kommentar


    • #3
      hm...
      Die beste Möglichkeit wird wohl sein verschiedene skalierte, halbtransparente Bilder mit absoluter Positionierung über die Grundkarte zu legen, oder?
      Hat noch irgendwer andere Ideen?
      Du kannst jeden Tag wie deinen letzten leben, du musst nur jeden Tag das Gleiche tun.

      Denk' mal drüber nach!

      Kommentar


      • #4
        wird bei einer karte problematisch, da du etliche überlappungen hast. vorrausgesetzt, du willst das z.b. mit ländern machen.

        gruß
        peter
        Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
        Meine Seite

        Kommentar


        • #5
          Re: [HTML] Imagemap + Einfärbung

          Original geschrieben von Click
          Ich habe ein Bild einer Karte, und möchte, dass bestimmte Bereiche der Karte bei gewissen Umständen (, die per PHP geprüft werden) eingefärbt wird.
          definiere:
          - bestimmte bereiche (freiform, quadratisch, rund?)
          - gewisse umstände
          Kissolino.com

          Kommentar


          • #6
            Bereiche = rect = rechteckig, meistens auch quadratisch;
            gewisse Umstände = durch Javascript ausgewählt / Name des Bereiches definiert


            =) So gesehen ist es mit Bildern relativ einfach, sofern alle Elemente (Image & Bilder für die Einfärbung) eine absolute positionierung haben. Problematisch würde esa dann aber werden wenn man sowtwas in ein Design implementiert.
            Du kannst jeden Tag wie deinen letzten leben, du musst nur jeden Tag das Gleiche tun.

            Denk' mal drüber nach!

            Kommentar


            • #7
              Original geschrieben von Click
              So gesehen ist es mit Bildern relativ einfach, sofern alle Elemente (Image & Bilder für die Einfärbung) eine absolute positionierung haben. Problematisch würde esa dann aber werden wenn man sowtwas in ein Design implementiert.
              Sollte auch unproblematisch sein, wenn man absolute Positionierung sinnvoll einsetzt - sprich, insb. sich im klaren darüber ist, worauf sie sich bezieht.
              I don't believe in rebirth. Actually, I never did in my whole lives.

              Kommentar


              • #8
                Wäre da nicht ein dynamisches erstellen z.B mittels php (imagecopymerge o.ä) sinnvoll?
                gruss Chris

                [color=blue]Derjenige, der sagt: "Es geht nicht", soll den nicht stoeren, der's gerade tut."[/color]

                Kommentar


                • #9
                  Mhm.. die Karte ist 900pxx540px groß.
                  Ich weiß nicht ganz ob die in den Speicher passt um die "neu" zu machen :S
                  Ist es überhaupt von der Rechenzeit her sinnvoll so eine große Karte immer neu onthefly zu erstellen?

                  mit position:absolut kann man doch nur den Abstand zum Browserrand angeben, oder nicht?
                  Naja.. im Design könnte man ja vielleicht position:relative verwenden, oder?


                  Danke erstma für eure Tipps/Denkanstöße
                  Du kannst jeden Tag wie deinen letzten leben, du musst nur jeden Tag das Gleiche tun.

                  Denk' mal drüber nach!

                  Kommentar


                  • #10
                    position:absolut kann man doch nur den Abstand zum Browserrand angeben
                    nein, auch den abstand zum übergeordneten element, sobald dies ebenfalls positioniert ist.

                    gruß
                    peter
                    Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                    Meine Seite

                    Kommentar


                    • #11
                      Ich muss den Thread leider nochmal ausbuddeln. Ich habe meine Idee soweit umgesetzt, aber jetzt gibt es ein Problem:
                      Wenn ein Feld ausgewählt ist wird ein Bild über das Feld geschoben.
                      Problematisch ist nur, dass das Bild nun die Map überdeckt und somit alle benötigten Attribute der Areas (title, onmouseover) nicht mehr brauchbar sind, da man sich ja sogesehen nicht mehr über dem Area Bereich befindet, sondern über dem Bild.

                      Irgendwelche Ideen was ich hier tun könnte?
                      Du kannst jeden Tag wie deinen letzten leben, du musst nur jeden Tag das Gleiche tun.

                      Denk' mal drüber nach!

                      Kommentar


                      • #12
                        Die Map semitransparent machen und das Bild nicht drüber sondern drunter schieben.
                        Oder per Javascript die Attribute der Map auf das Bild übertragen.
                        Oder per Javascript den Clickevent vom Bild auf die Map übertragen.

                        Kommentar


                        • #13
                          ok, danke für die tipps
                          Du kannst jeden Tag wie deinen letzten leben, du musst nur jeden Tag das Gleiche tun.

                          Denk' mal drüber nach!

                          Kommentar

                          Lädt...
                          X