Bilder in IMG-Tags größe ändern

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

  • Bilder in IMG-Tags größe ändern

    Hallo Leute,

    Also ich habe ein guestbook gemacht, in dem auch html-tags erlaubt sind.
    nun gibs da ein problem, wenn einer ein externes bild mit dem IMG-tag einfügt das aber sehr groß ist (widthxheight) dann verschiebt es das ganze design.

    gibts da irgend eine möglichkeit um die bilder auf eine maximale größe zu definieren?

    danke

    mfg tom

  • #2
    mhmm...eine Idee wäre:

    1. regulären Ausdruck auf den Eintrag anwenden, der den gesamten <img>...</img> Bereich ausliest und die url speichert
    2. größe des Bildes ermitteln
    3. neues <img> mit css größen-/ höhenangabe mit altem ersetzen.
    fertig

    ob das auch einfacher geht kann ich dir zu dieser späten stunde leider nicht sagen...

    Kommentar


    • #3
      eine weitere idee: scrollable div.

      Kommentar


      • #4
        @penzillin

        Ja stimmt schon, wäre auch eine Idee.

        Aber lieber hätt ich doch, dass das bild sich in der größe ändert, ohne scrollbaren zu haben.

        mfg tom

        Kommentar


        • #5
          ok, habs jetzt mit javascript hinbekommen, aber nochmal danke für die hilfe.

          Kommentar


          • #6
            Original geschrieben von tomtitom
            ok, habs jetzt mit javascript hinbekommen, aber nochmal danke für die hilfe.
            dann poste bitte deine lösung. falls jemand ein ähnliches problem hat.

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

            Kommentar


            • #7
              ok

              Also fangen wir mal an.

              Ihr legt einen div container an, in den sich die img-tags befinden.
              Diesem Container müsst ihr natürlich eine id zuweisen, damit wir ihn später dann via javascript ansprechen können.

              Code:
              <div id="resize_imgs">
                  <img src="bild1.jpg">
                  <img src="bild2.jpg">
                  <img......
              </div>
              Wichtig ist, dass euer Body-Tag wie folgt aussieht:
              Code:
              <body onload=";ImageResize(breite auf die die bilder geändert werden sollen)">
              </body>
              Nun kommen wir zum wichtigsten teil, nämlich der sache mit javascript:
              Code:
              var imgcodeResizeMsg = 'Bild wird verkleinert dargestellt. Klicken für Originalgröße!';
              var imgcodeClassName = 'vbimgcodelimit';
              
              function ImageResize(getw) {
              var imgcodeWidthMax = getw;
              var imgcodeWidthSizeTo = getw;
              if (document.getElementById("resize_imgs").getElementsByTagName("img").length) {
              var docImg = document.getElementById("resize_imgs").getElementsByTagName("img");
                 for ( var i = 0 ; i < docImg.length ; i++ )
                    if (docImg[i].width > imgcodeWidthMax) {
                       docImg[i].width = imgcodeWidthSizeTo;
                       docImg[i].title = imgcodeResizeMsg;
                       docImg[i].className = imgcodeClassName;
                       docImg[i].onclick = ImagecodeWinOpen;
                    }
                 }
              }
              
              function ImagecodeWinOpen(e) {
              	if( window.event )
              	   window.open(window.event.srcElement.src,'IMG','menubar=no, toolbar=no, location=no, directories=no, fullscreen=no, titlebar=yes, hotkeys=no, status=no, scrollbars=yes, resizable=yes');
              	else
              	   window.open(e.target.src,'IMG','menubar=no, toolbar=no, location=no, directories=no, fullscreen=no, titlebar=yes, hotkeys=no, status=no, scrollbars=yes, resizable=yes');
              }
              so das wars, viel spaß damit.

              mfg tommy

              Kommentar


              • #8
                Code:
                function ImagecodeWinOpen(e) {
                	if( window.event )
                	   window.open(window.event.srcElement.src,'IMG','...');
                	else
                	   window.open(e.target.src,'IMG','...');
                }
                Die Fallunterscheidung hier kannst du dir schenken, ebenso die Verwendung von Eigenschaften des event-Objektes - über this hast du Zugriff auf das Bildobjekt, auf welches geklickt wurde.
                I don't believe in rebirth. Actually, I never did in my whole lives.

                Kommentar

                Lädt...
                X