kostenloser Webspace werbefrei: lima-city


Panoramabild in Website einbinden

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    friseurclaudia

    friseurclaudia hat kostenlosen Webspace.

    hi,
    habe vor ein panoramabild in meine website einzubinden. (ca. 8 mal so breit wie hoch)

    ich habe das jetzt mal mit der css-funktion "overflow-x" gelöst. das funktioniert zwar, aber die scrollleiste sieht doch alles andere als gut aus. so siehts jetzt aus: https://dl.dropboxusercontent.com/u/20627319/panorama.JPG

    ich habe im internet schon diverse sachen gefunden, bei denen man zwischen verschiedenen bildern hin und her schalten kann, aber ich habe ja nur das eine bild. es soll also quasi immer nur ein ausschnitt angezeigt werden. ist schwer zu erklären, aber ich hoffe irgendjemand verstehts und kann mir helfen.

  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. h***e


    Stelle einfach die Höhe und die breite ein.
    Es müsste klappen.

    http://www.w3schools.com/html/html_images.asp
  4. Autor dieses Themas

    friseurclaudia

    friseurclaudia hat kostenlosen Webspace.

    nein da wird das nur zusammengequetscht. das sieht 1. total scheiße aus und 2. ist es nicht das was ich will
  5. h***e

    friseurclaudia schrieb:
    nein da wird das nur zusammengequetscht. das sieht 1. total scheiße aus und 2. ist es nicht das was ich will

    Überprüfe ob du auch die richtige größe eingegeben hast.

    Hier das funktioniert ohne probleme
    <img alt="panorama" src="http://t0.gstatic.com/images?q=tbn:ANd9GcS25K7G7KPx6J2vnbpr0cRGSYnBtGBFvCs6qcTOyfiV-l73br--LqTU-sw" style="height:53px; width:200px" />
  6. Autor dieses Themas

    friseurclaudia

    friseurclaudia hat kostenlosen Webspace.

    sry aber ich glaub du verstehst mich nicht
  7. friseurclaudia schrieb:
    sry aber ich glaub du verstehst mich nicht


    Dann beschreibe nochmal was geanu du haben willst, oder posten einen Link, wenn du das schon oft im internet gesehen hast.

    Meinst du vllt. sowas hier? http://photosynth.net
  8. naturfit schrieb:
    http://krpano.com/docu/html5/

    Ich glaube, so etwas aufwendiges sucht der TE nicht.

    @friseurclaudia:
    Falls du dein Bild einfach nur als Hintergrundbild einfügen willst, geht das ganz einfach:

    CSS:
    #bild {
    background-image:url(../pics/BILD.JPG); 
    background-repeat:no-repeat; 
    background-position:top center;
    height:350px; /* Höhe des Bildes */
    padding:15px;
    }

    HTML:
    <div id="bild"></div>
  9. Autor dieses Themas

    friseurclaudia

    friseurclaudia hat kostenlosen Webspace.

    nein nicht als hintergrund.

    es sollte so ähnlich sein wie auf fb mit den pfeilen links und rechts (kommentare brauch ich nicht)
    nur soll dann eben kein anderes bild kommen sondern es soll sich je nach dem ob man nach rechts oder links klickt ein anderer ausschnitt angezeigt werden. und das ganze halt nicht als pop-up wie auf fb

    hoffe jetzt wars verständlich^^
  10. also ein weg wäre es das Bild selbst in beispielsweise 5 Bilder aufzuteilen und die einzeln abzuspeichern.
    Dann hast du 5 Bilder die du wie bei facebook "durchblättern" kannst, ggf. noch eine Vorschau vom ganzen Panorama davor.


    Wobei ich eine interaktivere Lösung vorziehen würde, also per html5, flash oder silverlight.

  11. Sowas vielleicht?

    https://github.com/nicekei/jQuery-html5-canvas-panorama-plugin

    Schau dir mal die Beispiele an.
    z.B. hier das erste http://dl.dropboxusercontent.com/u/1791448/ddpanorama/sample.minspeed.html
  12. m******e

    Nette Beispiele gibts unter http://www.elevateweb.co.uk/image-zoom/examples.

    Einfach mal mit der Mouse über die Bilder fahren (JavaScript erforderlich).
  13. friseurclaudia schrieb:
    ... ist schwer zu erklären, ...
    nööö. ich glaube du meinst so etwas.

    und das geht so:
    <?php
    
    $title = 'panoramabild-in-website-einbinden';
    
    exit(<<< EOT
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <title>$title</title>
      </head>
      <body>
    
        <header><h1>$title</h1></header>
    
        <section id="panorama1" style="height:741px;width:1000px;overflow-x:scroll;">
          <img alt="panorama" src="panorama_1.jpg">
        </section>
    
      </body>
    </html>
    EOT
    );

    also in css:
    overflow-x:scroll;
  14. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!