Tobi: Wie Bilder schräg positionieren und verlinken

Guten Abend zusammen,

Ich plane eine neue Internetseite auf der ich Bilder schräg positioneiren und verlinken möchte. Wie ich mir das vorstelle läßt sich hier http://freenet-homepage.de/dreissigtobias/index.jpg sehen.

Ich weiss dass ich das Bild jetzt stückeln und in ein Tabellenlayout knallen und schön mit einem mouseovereffekt versehen kann, aber ich würde mich freuen wenn ihr mir eine elegantere Methode vorschlagen würdet ;)

Horizontale Positionierung der einzelnen Bilder mit "Hintergrund" per CSS div und verlinkung per JS geht auch aber ist sicher auchnicht der Weissheit letzter Schluss...

LG, Tobi

  1. Hi,

    Ich plane eine neue Internetseite auf der ich Bilder schräg positioneiren und verlinken möchte. Wie ich mir das vorstelle läßt sich hier http://freenet-homepage.de/dreissigtobias/index.jpg sehen.

    Zitat:
    "Die von Ihnen aufgerufene Seite wurde nicht gefunden ...
    Sie wurde entweder entfernt, umbenannt, oder sie ist vorübergehend nicht erreichbar. Versuchen Sie folgendes: [...]"

    Versuch du mal folgendes: Gebe uns einen korrekten Link zu einer nicht nur temporaer erreichbaren Adresse, ja?

    Ich weiss dass ich das Bild jetzt stückeln und in ein Tabellenlayout knallen und schön mit einem mouseovereffekt versehen kann, aber ich würde mich freuen wenn ihr mir eine elegantere Methode vorschlagen würdet ;)

    Horizontale Positionierung der einzelnen Bilder mit "Hintergrund" per CSS div und verlinkung per JS geht auch aber ist sicher auchnicht der Weissheit letzter Schluss...

    Genaueres kann man wohl erst sagen, wenn du mit einer anschaulichen Beschreibung rueberkommst.

    Bilder "schraeg" darstellen geht (derzeit noch) nicht.
    Du wirst das Bild also schon im Grafikprogramm drehen muessen.

    Wenn dann nur der eigentliche Bildbereich klickbar sein soll, bietet sich statt Zerstueckelung wohl eher eine ImageMap an.

    MfG ChrisB

    --
    "The Internet: Technological marvel of marvels - but if you don't know *what* you're lookin' for on the Internet, it is nothing but a time-sucking vortex from hell."
    1. Hi,

      Zitat:
      "Die von Ihnen aufgerufene Seite wurde nicht gefunden ...
      Sie wurde entweder entfernt, umbenannt, oder sie ist vorübergehend nicht erreichbar. Versuchen Sie folgendes: [...]"

      Versuch du mal folgendes: Gebe uns einen korrekten Link zu einer nicht nur temporaer erreichbaren Adresse, ja?

      Sch... Server. Muss dringend zu netcup wechseln...

      Die Adresse stimmt...der Bild liegt noch auf dem Server...einige Male reloaden hilft...sorry für die Probleme :(

      LG, Tobi

      1. Hi,

        Die Adresse stimmt...der Bild liegt noch auf dem Server...einige Male reloaden hilft...

        Bei mir nicht, sorry.
        Auch die eigentliche Homepage (also die Indexseite des Userverzeichnisses statt des speziellen Bildes) erreiche ich nicht.

        MfG ChrisB

        --
        "The Internet: Technological marvel of marvels - but if you don't know *what* you're lookin' for on the Internet, it is nothing but a time-sucking vortex from hell."
        1. hi,

          Die Adresse stimmt...der Bild liegt noch auf dem Server...einige Male reloaden hilft...
          Bei mir nicht, sorry.

          Ich hoffe mal, das ich keine Urheberrechte verletze- Bild.

          Auch die eigentliche Homepage (also die Indexseite des Userverzeichnisses statt des speziellen Bildes) erreiche ich nicht.

          Hast du vielleicht metaredirects deaktiviert? Jedenfalls wird man bei Aufruf der Seite auf diese Seite weitergeleitet.

          mfg

          1. Guten Morgen,

            Hast du vielleicht metaredirects deaktiviert?

            Nein aber gestern hatte der Server irgendwie ne Macke...jezt gehts wieder.  Muss trotzdem dringend wechseln...gibt es einen genormten Befehl um Suchmaschienn den Serverwechsel einer Seite ähnlich 404 klar zu machen?

            Jedenfalls wird man bei Aufruf der Seite auf diese Seite weitergeleitet.

            Das ist meine aktuelle Internetseite ;)

            Die geplante neue Seite auf die sich meine Frage zur schrägen Positionierung von Bildern bezieht existiert bisher lediglich als jpg Bild: http://freenet-homepage.de/dreissigtobias/index.jpg

            Gruß Tobi

            1. hi,

              Hast du vielleicht metaredirects deaktiviert?
              Nein aber gestern hatte der Server irgendwie ne Macke...jezt gehts wieder.

              Ich hatte es 2 oder dreimal probiert und kam jedesmal drauf.

              gibt es einen genormten Befehl um Suchmaschienn den Serverwechsel einer Seite ähnlich 404 klar zu machen?

              Ja, in der .htaccess

              Redirect Gone /DeinDateiname.html     <- Das gilt dann für die eine Datei

              Redirect Gone /DeinVerzeichnis/       <- Müsste alle Dateien im Verzeichnis betreffen, weiss ich aber nicht genau

              Die geplante neue Seite auf die sich meine Frage zur schrägen Positionierung von Bildern bezieht existiert bisher lediglich als jpg Bild: http://freenet-homepage.de/dreissigtobias/index.jpg

              Hatte ich schon hochgeladen  :)

              Und ja, ich schliesse mich meinen vorpostern an, Image Map.

              mfg

              1. Hi,

                Ja, in der .htaccess

                Redirect Gone /DeinDateiname.html     <- Das gilt dann für die eine Datei

                Redirect Gone /DeinVerzeichnis/       <- Müsste alle Dateien im Verzeichnis betreffen, weiss ich aber nicht genau

                Die htaccess funktioniert dann wie eine Weiterleitung oder aber ich möchte lieber ein metatag etc verwenden und per meta bzw jacascript weiterleiten. Bei Freenet habe ich bisher keine htaccess...

                Hatte ich schon hochgeladen  :)

                Danke :)

                Image Map.

                Bei ImageMap kann man aber kein Mouseover machen dass alle Bilder bis auf das ausgewählte verblassen lässt ;)

                Scheint aber trotzdem die einfachste Lösung zu sein...

                Danke, Tobi

                1. Bei ImageMap kann man aber kein Mouseover machen dass alle Bilder bis auf das ausgewählte verblassen lässt ;)

                  Ich arbeite nicht mit ImageMap, aber da das ja auch eigene area-Tags sind, müsste eigentlich genauso ein onMouseOver und ein onMouseOut funktionieren.

                  Du müsstest noch jeder area eine eigene ID geben, und beim MouseOver die src des <img> ändern in ein blasses Bild, und an der Stelle der area mit genau dieser ID ein "nicht-blasses" drüberlegen

                  Ist sicher nicht so einfach...

                  mfg kawinga

                  1. Hi,

                    Du müsstest noch jeder area eine eigene ID geben, und beim MouseOver die src des <img> ändern in ein blasses Bild, und an der Stelle der area mit genau dieser ID ein "nicht-blasses" drüberlegen

                    Jo das würde prinzipiell gehen wenn ich das Bild zerteile. Wenn ich mit grossen Bildern arbeite wird die Ladezeit zu gross...

                    Ist sicher nicht so einfach...

                    Nein es ist eine Herausforderung ;)

                    Gruß Tobi

                    1. hi,

                      Ist sicher nicht so einfach...
                      Nein es ist eine Herausforderung ;)

                      Inspiration ist alles, einfach machen ;)

                      mfg

                      1. Hi,

                        Inspiration ist

                        Geiles Beispiel!!! Bei Map #2 sieht man die Arbeit mit transparenten GIFs wie
                        Harlequin vorgeschlagen hat :)

                        Danke, Tobi

  2. Guten Abend zusammen,

    Ich plane eine neue Internetseite auf der ich Bilder schräg positioneiren und verlinken möchte.

    Du möchtest sie nicht schräg positionieren, sondern drehen.

    Wie ich mir das vorstelle läßt sich hier http://freenet-homepage.de/dreissigtobias/index.jpg sehen.

    Dazu erstmal eine Anmerkung: bitte trenne die Bereiche "Technik (alles mit Motorrädern)", "Länder" und "Seitenspezifisch (Impressum)" optisch voneinander. Den Besucher verwirrt dies sonst.

    Ich weiss dass ich das Bild jetzt stückeln und in ein Tabellenlayout knallen und schön mit einem mouseovereffekt versehen kann, aber ich würde mich freuen wenn ihr mir eine elegantere Methode vorschlagen würdet ;)

    Ja, ein Imagemap, wie es schon vorgeschlagen wurde, ist hier vermutlich die beste Lösung.
    Nimm ein Grafikprogramm deiner Wahl, dass mit Ebenen umgehen kann (z.B. GIMP oder Paint.NET) und erstelle für den Hintergrund und für jedes Bild eine eigene Ebene.
    Du kannst das Bild dann z.B. als JPG ohne Ebenen speichern und per Hand oder mithilfe eines Programms eine Imagemap erstellen. Wie das geht findest du im SELFHTML Tutorial.
    Du solltest das Bild aber auf jedenfall mit Ebenen speichern, damit du später (wenn du z.B. einen neuen Bereich einfügen willst oder den Hintergrund ändern willst) nicht das ganze Bild neu erstellen musst.

    1. Hi,

      Du möchtest sie nicht schräg positionieren, sondern drehen.

      Jo wenn das einen Unterschied macht ;)

      Dazu erstmal eine Anmerkung: bitte trenne die Bereiche "Technik (alles mit Motorrädern)", "Länder" und "Seitenspezifisch (Impressum)" optisch voneinander. Den Besucher verwirrt dies sonst.

      Danke für den Tip. Wie schlägst du die Trennung vor?

      Ja, ein Imagemap, wie es schon vorgeschlagen wurde, ist hier vermutlich die beste Lösung.

      Jo aber dann müsste ich auf meine geliebten Mouseovereffekte verzichten ;)

      Du solltest das Bild aber auf jedenfall mit Ebenen speichern, damit du später (wenn du z.B. einen neuen Bereich einfügen willst oder den Hintergrund ändern willst) nicht das ganze Bild neu erstellen musst.

      Danke für den Hinweis. So werde ich das machen.

      LG, Tobi

      1. Yerf!

        Ja, ein Imagemap, wie es schon vorgeschlagen wurde, ist hier vermutlich die beste Lösung.

        Jo aber dann müsste ich auf meine geliebten Mouseovereffekte verzichten ;)

        Eine Variante wären noch transparente PNGs innerhalb derer sich das gedrehte Bild befindet. Allerdings bleibt noch die Frage, wie man mit Überlappungen umgeht. Evtl. für jedes Bild eine eigene Imagemap, die nur ddas tatsächliche Bild umfasst um Konflikte bei den anklickbaren Flächen zu vermeiden.

        Ein Problem könnte auch noch der IE6 werden, wenn die Bilder mehr als 256 Farben haben sollen... (AlphaImageLoader oder so als Workaround)

        Gruß,

        Harlequin

        --
        <!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->
        1. Servus,

          Eine Variante wären noch transparente PNGs

          Was spricht gegen Compuserve GIFs und die positionierung per CSS?

          innerhalb derer sich das gedrehte Bild befindet. Allerdings bleibt noch die Frage, wie man mit Überlappungen umgeht.

          Überlappen geht mit CSS.

          Evtl. für jedes Bild eine eigene Imagemap, die nur ddas tatsächliche Bild umfasst um Konflikte bei den anklickbaren Flächen zu vermeiden.

          Gute Idee

          Ein Problem könnte auch noch der IE6 werden, wenn die Bilder mehr als 256 Farben haben sollen...

          Der IE6 kann nicht mehr als 256 Farben oder kann der nur keine PNGs?

          Danke, Tobi

          1. Yerf!

            Eine Variante wären noch transparente PNGs
            Was spricht gegen Compuserve GIFs und die positionierung per CSS?

            Dass diese nur 256 Farben haben können. Aber wenn das reicht ist es natürlich ok.

            innerhalb derer sich das gedrehte Bild befindet. Allerdings bleibt noch die Frage, wie man mit Überlappungen umgeht.

            Überlappen geht mit CSS.

            Es ging mir dabei vor allem um das Verhalten beim Anklicken, das ohne Einsatz einer Imagemap für den Benutzer "komisch" sein könnte.

            Ein Problem könnte auch noch der IE6 werden, wenn die Bilder mehr als 256 Farben haben sollen...

            Der IE6 kann nicht mehr als 256 Farben oder kann der nur keine PNGs?

            Der IE6 kann keine transparenten PNGs mit mehr als 256 Farben. Ohne Transparenz gehts auch mit mehr Farben und mit 8Bit geht Transparenz wie beim GIF.

            Gruß,

            Harlequin

            --
            <!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->
            1. Hi,

              Der IE6 kann keine transparenten PNGs mit mehr als 256 Farben. Ohne Transparenz gehts auch mit mehr Farben und mit 8Bit geht Transparenz wie beim GIF.

              Wieder was gelernt :)

              LG, Tobi

              1. Yerf!

                Wieder was gelernt :)

                Der Vollständigkeit halber erwähn ich noch den "AlphaImageLoader", eine IE eigene CSS-Filter-Eigenschaft, mit der man unter manchen Umständen den IE trotzdem soweit bekommt alle transparenten PNGs darzustellen.

                Der IE7 kanns soweit ich weis ja sowieso (endlich...)

                Gruß,

                Harlequin

                --
                <!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->