Benni: onmouseover - Bilder vergrößern, ABER...

SELF-Forum

onmouseover - Bilder vergrößern, ABER...

Benni
– Informationen zu den Bewertungsregeln

Hallo erscht mal!

Ich habe einige Bilder, die relativ Groß sind, und die, wenn ich sie verkleinere, dann ist darauf wenig zu erkennen.

Deswegen hab ich die per Mouseover und mouseout eingebunden.

Klappt soweit auch ganz gut, nur wenn die Seite geladen wird oder aktualisiert wird, dann wird das Bild erstmal in voller Größer dargestellt, bis ich dann einmal mit der Maus draufgegangen bin, dann wirds groß klein, wie es sein sollte.

Kann ich das riesige Bild beim laden der Seite auch unterbinden?

MfG Und Danke

Benni

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. onmouseover - Bilder vergrößern, ABER...

    wucher wichtel
    – Informationen zu den Bewertungsregeln

    Hallo!

    Kann ich das riesige Bild beim laden der Seite auch unterbinden?

    Ja, mit CSS geht das. Gib jedem Bild eine ID. Dieser ID weißt du display:none zu. Und diesen Wert kannst du dann per JavaScript verändern.

    Dann werden die Bilder erst gar nicht angezeigt. Allerdings in manchen Browsern (z.B. Opera 8) nicht geladen. Wenn sie vorgeladen werden sollen, wäre es sinnvoll ihnen 0px bei der Höhe und Breite zuzuweisen. Den Wert kannst du ebenfalls per JavaScript dann verändern.

    ciao, ww

    --
    sh:(  fo:|  ch:~  rl:(  br:>  n4:~  ie:%  mo:)  va:)  de:]  zu:)  fl:(  ss:|  ls:~  js:)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. onmouseover - Bilder vergrößern, ABER...

      Benni
      – Informationen zu den Bewertungsregeln

      Hallo!

      Vielen Dank für Eure schnelle Hilfe.

      Die Seite ist leider noch nicht fertig, deswegen kann ich da noch nicht hinverlinken. Aber so sieht mein Code bisher aus:

      <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
      <td height="" width="" valign="center">
      <div id="x"
      OnMouseOut="document.all.x.style.zoom='50%'"
      OnMouseOver="document.all.x.style.zoom='100%'" align="center">
      <img src="URL">
      </td>
      </tr>
      </div>
      </table>

      Ja, mit CSS geht das. Gib jedem Bild eine ID. Dieser ID weißt du display:none zu. Und diesen Wert kannst du dann per JavaScript verändern.

      Entschuldige, Ich bin kein Programmierer, und habe keine Ahnung, was ich da mache. Ich such mir die Codes zusammen, und spiel damit rum, bis was einigermaßen passendes rauskommt!

      Du meinst, ich muss jetzt quasi 2 mal den Code einbauen!? Einmal mit ID x und einmal mit y (z.B.)

      Aber was dann? Einmal nur ein kleines Bild laden lassen?

      Und was meinst du mit CSS? Das ist doch das Stylesheet oder? Dort habe ich bisher keine Einträge diesbezüglich gemacht bzw machen müssen!

      Was ich noch habe: bei table width steht 100%, dann wird das Bild vergrößert, wenn ich in den Bereich der Tabelle fahre. Also auch links und rechts neben dem Bild!
      lasse ich das % Zeichen weg, dann hab ich den gewünschten Effekt.
      Geht das auch noch irgendwie anderst?

      Ich Danke Euch!

      MfG

      Benni

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. onmouseover - Bilder vergrößern, ABER...

        wucher wichtel
        – Informationen zu den Bewertungsregeln

        Hallo!

        [Quelltext]

        Du musst das <div> korrekt schließen (also vor dem </td>). Verwendest du Tabellen, um das Layout deiner Seite zu bestimmen? Außerdem ist document.all veraltet. Benütze besser getElementById().

        Ja, mit CSS geht das. Gib jedem Bild eine ID. Dieser ID weißt du display:none zu. Und diesen Wert kannst du dann per JavaScript verändern.

        Entschuldige, Ich bin kein Programmierer, und habe keine Ahnung, was ich da mache. Ich such mir die Codes zusammen, und spiel damit rum, bis was einigermaßen passendes rauskommt!

        Ich bin auch kein richtiger Programmierer. Noch jedenfalls :-)

        Du meinst, ich muss jetzt quasi 2 mal den Code einbauen!? Einmal mit ID x und einmal mit y (z.B.)
        Aber was dann? Einmal nur ein kleines Bild laden lassen?

        Ich weiß nicht, was du damit meinst.

        Und was meinst du mit CSS? Das ist doch das Stylesheet oder? Dort habe ich bisher keine Einträge diesbezüglich gemacht bzw machen müssen!

        CSS ist das Stylesheet. Kann man so sagen. Ich würde dir raten, wenigstens ein bisschen im SELFHTML-Kapitel über CSS und JavaScript zu lesen. Dann hast du gute Grundlagen und es macht mehr Spaß :-)

        Jetzt zu deinem Problem. Ich erkläre den Code ausführlich, damit du verstehst, was da passiert.

          
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<!--Achte darauf, dass du deine Seite nicht in den [link:http://de.selfhtml.org/css/formate/box_modell.htm#standardkonform@title=Quirks Modus] schickst-->  
  
<html>  
<head>  
 <title>Test</title>  
<script type="text/javascript">
~~~~~~javascript
  
function machGross(){  
 var ID = document.getElementById("bild"); // auf das Bild zugreifen  
 ID.style.width = "600px";  //per [link:http://de.selfhtml.org/javascript/objekte/style.htm@title=style-Objekt] auf CSS-Eigenschaften zugreifen und neue Größe festlegen  
 ID.style.height = "450px"; //dito  
}  
function machKlein(){  
 var ID = document.getElementById("bild");  
 ID.style.width = "300px";  
 ID.style.height = "225px";  
}  

~~~~~~html
  
</script>  
</head>  
  
<body>  
<p>  
 <a href="#" onmouseover="machGross()" onmouseout="machKlein()">Bild gro&szlig; machen</a>  
 <!--Per onmouseover und onmouseout die Funktionen aufrufen-->  
</p>  
<p>  
 <img src="test.jpg" id="bild" style="width:300px; height:225px" alt="">  
 <!--Dem Bild eine ID geben, damit darauf zugegriffen werden kann. Und die Größenangaben per style="" nicht vergessen-->  
</p>  
</body>  
</html>

        Um das Anzeigen der Bilder zu verhindern machst du folgendes:

          
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
  
<html>  
<head>  
 <title>Test</title>  
<style type="text/css">

        img#bild{  
 display:none;

        }

        </style>  
<script type="text/javascript">

        window.onload = zeigeBild(); //Wenn das Dokument geladen ist, werden die Bilder klein dargestellt  
  
function zeigeBild(){  
 var ID = document.getElementById("bild");  
 ID.style.display = "block"; // per style-Objekt Bild anzeigen  
}

        </script>  
</head>  
  
<body>  
<p>  
 <img src="test.jpg" id="bild" style="width:300px; height:225px" alt="">  
 <!--Jedem Bild eine ID geben, damit dieses per CSS ansprechbar ist-->  
</p>  
</body>  
</html>

        Ich hoffe, es hilft etwas :-)

        ciao, ww

        --
        sh:(  fo:|  ch:~  rl:(  br:>  n4:~  ie:%  mo:)  va:)  de:]  zu:)  fl:(  ss:|  ls:~  js:)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. onmouseover - Bilder vergrößern, ABER...

          Benni
          – Informationen zu den Bewertungsregeln

          Hi!

          Erst mal Dankeschön dafür.

          Ich hab das "HTML 4.0 Handbuch" von Franzis (3.Auflage/selfhtml7.0)
          Da les ich schon nach, aber wie gesagt, ich bin kein Programmierer, deswegen kann ich damit nicht allzuviel anfangen, zumal da auch von 3 verschiedenen onmouseover die rede ist! Enmal groß geschriben, dann klein, dann abwechselnd!

          HM, CSS dachte ich immer, dass wäre mein "style.css" File, was ich für die Seite brauche.
          Deswegen bin ich jetzt noch verwirrter, da in deinem Script kein Eintrag dabei ist, den ich da reinschreibe.

          Ich habe dein Script ausprobiert, und ich bekomm das nicht gebacken!

          wo muss ich denn die URL ztum Bild eintragen? Und die Größe? es soll beim Laden der Seite verkleinert dargestellt werden (etwa 50% von originalgröße), und wenn ich mit der Maus draufgehe, soll es vergrößert werden (in meinem Fall soll es dann in Originalgröße angezeigt werden!).

          So nen Button, "Bild größer machen" den brauch ich eigentlich nicht, das soll direkt mit dem Bild gehen!
          Ich hatte das ja schon fast soweit, jedoch mit der Größe hab ich noch das problem.

          Andere frage noch:

          Auf jeder der Seiten steht unten zurück home und weiter.
          Kann ich diese Zeile auf jeder Seite an derselben Position anzeigen lassen?

          Momentan steht das halt immer wenn ich ales fertig hab, kommt die Zeile. Alos steht das einmal in der Mitte, dann weiter unten und dann wieder mittig,...

          Danke Dir schonmal.
          MfG

          Benni

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. onmouseover - Bilder vergrößern, ABER...

            wucher wichtel
            – Informationen zu den Bewertungsregeln

            Hallo!

            Ich hab das "HTML 4.0 Handbuch" von Franzis (3.Auflage/selfhtml7.0)

            Du solltest dir überlegen etwas neueres zuzulegen. Das Buch ist von 1999 und ist deswegen warscheinlich ziemlich veraltet.

            Da les ich schon nach, aber wie gesagt, ich bin kein Programmierer, deswegen kann ich damit nicht allzuviel anfangen, zumal da auch von 3 verschiedenen onmouseover die rede ist! Enmal groß geschriben, dann klein, dann abwechselnd!

            Wo ist von 3 verschiedenen onmouseover die Rede? In deinem Buch?

            HM, CSS dachte ich immer, dass wäre mein "style.css" File, was ich für die Seite brauche.

            Auch. Du kannst CSS auf verschiedene Weise einbinden. Siehe: http://de.selfhtml.org/css/formate/einbinden.htm.

            Deswegen bin ich jetzt noch verwirrter, da in deinem Script kein Eintrag dabei ist, den ich da reinschreibe.

            Doch. Siehe http://de.selfhtml.org/css/formate/einbinden.htm#innerhalb_element.

            Ich habe dein Script ausprobiert, und ich bekomm das nicht gebacken!

            wo muss ich denn die URL ztum Bild eintragen? Und die Größe? es soll beim Laden der Seite verkleinert dargestellt werden (etwa 50% von originalgröße), und wenn ich mit der Maus draufgehe, soll es vergrößert werden (in meinem Fall soll es dann in Originalgröße angezeigt werden!).

            Ich erkläre es dir nochmal am Code.

              
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<!--Achte darauf, dass du deine Seite nicht in den [link:http://de.selfhtml.org/css/formate/box_modell.htm#standardkonform@title=Quirks Modus] schickst-->  
  
<html>  
<head>  
 <title>Test</title>  
<script type="text/javascript">
~~~~~~javascript
  
  
function machGross(){  
 var ID = document.getElementById("bild"); // auf das Bild zugreifen  
 ID.style.width = "600px";  //hier legst du die Breite des Bildes fest, wenn es groß dargestellt werden soll.  
 ID.style.height = "450px"; //und hier die Höhe  
}  
function machKlein(){  
 var ID = document.getElementById("bild");  
 ID.style.width = "300px";  //hier legst du die Breite des Bildes fest, wenn es klein angezeigt werden soll  
 ID.style.height = "225px"; //und hier die Höhe  
}  

~~~~~~html
  
</script>  
</head>  
  
<body>  
<p>  
 <img src="test.jpg" id="bild" style="width:300px; height:225px" alt="" onmouseover="machGross()" onmouseout="machKlein()">  
<!--  
 Dem Bild eine ID geben, damit darauf zugegriffen werden kann.  
 Und die Größenangaben per style="" nicht vergessen.  
 Dort, wo src="" steht, schreibst du die URL deines Bildes rein  
 Mit onmouseover und onmouseout rufst du die JavaScript-Funktionen auf  
-->  
</p>  
</body>  
</html>

            So nen Button, "Bild größer machen" den brauch ich eigentlich nicht, das soll direkt mit dem Bild gehen!

            Der Button war nur ein Beispiel. Wichtig war, dass du siehst, wie man die JavaScript-Funktionen per onmouseover und onmouseout aufruft. Ob das onmouse-Zeug im <img>-Tag steht oder im <p>-Tag ist egal. Wenn du das onmouse-Zeug in den <img>-Tag schreibst, dann verändert sich eben die Größe des Bildes, wenn man mit der Maus über das Bild geht.

            Ich hatte das ja schon fast soweit, jedoch mit der Größe hab ich noch das problem.

            Diese legst du in den Zeilen fest, die mit ID.style. anfangen. Siehe Kommentare im Quelltext.

            Auf jeder der Seiten steht unten zurück home und weiter.
            Kann ich diese Zeile auf jeder Seite an derselben Position anzeigen lassen?

            Ja. Zum Beispiel mit position. Allerdings wird das daran scheitern, dass deine Seiten warscheinlich unterschiedlich lang sind. Also wäre es am sinnvollsten, ganz am Ende der Seite ein <div> oder <p> einzufügen. In dieses schreibst du dann deinen Home-Link.

            Momentan steht das halt immer wenn ich ales fertig hab, kommt die Zeile. Alos steht das einmal in der Mitte, dann weiter unten und dann wieder mittig,...

            Das verstehe ich nicht so ganz. Aber probiere es mal mit den 2 Methoden, die ich vorgeschlagen habe (s.o.). Wenn es nicht klappt, dann zeige mir etwas Quelltext und erkläe es genauer.

            ciao, ww

            --
            sh:(  fo:|  ch:~  rl:(  br:>  n4:~  ie:%  mo:)  va:)  de:]  zu:)  fl:(  ss:|  ls:~  js:)
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. onmouseover - Bilder vergrößern, ABER...

              Benni
              – Informationen zu den Bewertungsregeln

              HI!!

              Vielen Dank erst mal für Deine Geduld!

              Ich hab das mit den Bildern nun hinbekommen!

              Wenn ich in dem <img...> Zeug unte style eine Größe angebe, dann wird das Bild beim laden der Seite in dieser Größe angezeigt.
              Probieren geht mit spielen!
              Allerdings funktionieren in deinem script keine %-Angaben bei den Größenangaben. ich muss also alles in px angeben. Das ist etwas blöd. Aber mann kann net alles haben!

              Du solltest dir überlegen etwas neueres zuzulegen. Das Buch ist von 1999 und ist deswegen warscheinlich ziemlich veraltet.

              Gibts da was neues!? Werd mich gleichmal danach umsehen!

              Wo ist von 3 verschiedenen onmouseover die Rede? In deinem Buch?

              Ja, genau! In dem Buch!

              Auch. Du kannst CSS auf verschiedene Weise einbinden. Siehe: http://de.selfhtml.org/css/formate/einbinden.htm.

              JETZT VERSTEH ICH GAR NIX MEHR!

              Doch. Siehe http://de.selfhtml.org/css/formate/einbinden.htm#innerhalb_element.

              GAME OVER!

              Auf jeder der Seiten steht unten zurück home und weiter.
              Kann ich diese Zeile auf jeder Seite an derselben Position anzeigen lassen?

              Ja. Zum Beispiel mit position. Allerdings wird das daran scheitern, dass deine Seiten warscheinlich unterschiedlich lang sind. Also wäre es am sinnvollsten, ganz am Ende der Seite ein <div> oder <p> einzufügen. In dieses schreibst du dann deinen Home-Link.

              Wenn ich das wieder verstehen würde...
              Ja, klar, je nach Inhalt, sind die Seiten unterschiedlich lang, Jedoch passen sie genau in ein maximal-Fenster bei ner Bildschirmgröße von 1024/768.
              D.h. ganz unten oder eine zeile vor Ende, sollte dann eben zurück und weiter stehen.

              Ich häng hier mal den Code der jetzigen Seite dran, mit deinem script integriert.
              Vielleicht findest du noch ein paar Fehler.

              <!-- design & layout by  Benni-->
              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
              <html>
              <head>
              <title>Kameraden- und Soldatenverein Lützelburg</title>
              <meta name="description"     content="Homepage des Kameraden- und Soldatenverein Lützelburg">
              <meta name="keywords"        content="">
              <meta name="author"         content="">
              <meta name="DC.Publisher"   content="">
              <meta name="DC.Date"        content="2002-09-01T012:00+01:00">
              <!-- Zeitstempel: 17.06.2004, 00:37 Uhr, +1 Std. zu Greenwich -->
              <meta name="DC.Language"    content="de"> <!-- de = deutschsprachig -->
              <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
              <link rel="stylesheet" type="text/css" href="styles.css">

              <script type="text/javascript">
              function machGross(){
               var ID = document.getElementById("bild"); // auf das Bild zugreifen
               ID.style.width = "1358px";  //hier legst du die Breite des Bildes fest, wenn es groß dargestellt werden soll.
               ID.style.height = "791px"; //und hier die Höhe
              }
              function machKlein(){
               var ID = document.getElementById("bild");
               ID.style.width = "679px";  //hier legst du die Breite des Bildes fest, wenn es klein angezeigt werden soll
               ID.style.height = "396px"; //und hier die Höhe
              }

              </script>
              </head>

              <a name="top"></a> <!--Sprungmarke top-->

              <body style="background-image:url(images/hintergrund.jpg)" text="#ffffff" link="#ffffcc" vlink="#ffffcc" alink="#ffffcc">

              <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
              <td height="80">
              <div align="center">
              <b><h3>Kameraden- und Soldatenverein Lützelburg</b></h3>
              </div>
              </tr>
              </table>

              <div align="center">
              <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
              <td height="" width="" valign="center">
              <div align="center">
              In bedrängter Lage während des Feldzuges an den Pyramiden hat Napoleon I. einem Freund anvertraut:<br>
              „Wenn ich jemals zurückkomme, will ich eine Schlacht führen auf der schwäbisch bayerischen Hochebene<br>
              und Revanche nehmen für Höchstädt“. Wir haben die historischen Orte planmäßig besucht
              </td>
              </tr>
              </table>
              <p>
              <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
              <td height="" width="" valign="center">
              <div align="center">
              <p>
               <img src="images\napoleon.jpg" id="bild" style="width:679px; height:396px" alt=""
              onmouseover="machGross()"
              onmouseout="machKlein()">
              </p>
              </div>
              </td>
              </tr>
              </table>

              <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
              <td height="20" width="25%">
              </td>
              <td height="20" width="50%">
              </td>
              <td height="20" width="25%">
              </tr>
              </table>

              <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
              <td height="" width="25%" valign="bottom">
              <div align="center">
              <a href="exkursion.htm" style="font-weight:bold">Zurück</a>
              </td>
              <td height="" width="50%" valign="bottom">
              <div align="center">
              <a href="index.htm" style="font-weight:bold">Inhaltsverzeichnis</a>
              </td>
              <td height="" width="25%" valign="bottom">
              <div align="center">
              <a href="blenheim.htm" style="font-weight:bold">Weiter</a>
              </td>
              </tr>
              </table>

              </body>
              </html>

              Vielen lieben Dank!

              MfG

              Benni

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. onmouseover - Bilder vergrößern, ABER...

                wucher wichtel
                – Informationen zu den Bewertungsregeln

                Hallo!

                Vielen Dank erst mal für Deine Geduld!

                Bitte :-)

                Allerdings funktionieren in deinem script keine %-Angaben bei den Größenangaben. ich muss also alles in px angeben. Das ist etwas blöd. Aber mann kann net alles haben!

                Doch, kann man meistens schon :-) Ich habe es ausprobiert, und es funktioniert eigentlich ganz gut mit den Prozentangaben.

                  
<html>  
<head>  
 <title>Test</title>  
<script type="text/javascript">function machGross(){  
 var ID = document.getElementById("bild"); // auf das Bild zugreifen  
 ID.style.width = "200%";  //per style-Objekt auf CSS-Eigenschaften zugreifen und neue Größe festlegen  
 ID.style.height = "200%"; //dito  
}  
function machKlein(){  
 var ID = document.getElementById("bild");  
 ID.style.width = "50%";  
 ID.style.height = "50%";  
}  
</script>  
</head>  
  
<body>  
<p>  
 <a href="#" onmouseover="machGross()" onmouseout="machKlein()">Bild gro&szlig; machen</a>  
 <!--Per onmouseover und onmouseout die Funktionen aufrufen-->  
</p>  
<p>  
 <img src="head21.png" id="bild" style="width:50%; height:50%" alt="">  
 <!--Dem Bild eine ID geben, damit darauf zugegriffen werden kann. Und die Größenangaben per style="" nicht vergessen-->  
</p>  
</body>  
</html>

                Du solltest dir überlegen etwas neueres zuzulegen. Das Buch ist von 1999 und ist deswegen warscheinlich ziemlich veraltet.

                Gibts da was neues!? Werd mich gleichmal danach umsehen!

                SELFHTML bietet doch super Möglichkeiten HTML und CSS zu lernen!?

                Wo ist von 3 verschiedenen onmouseover die Rede? In deinem Buch?

                Ja, genau! In dem Buch!

                Kannst du vielleicht sagen, was in deinem Buch steht? Dann könnte ich es dir erklären.

                Den Rest beantworte ich heute Mittag. Hab jetzt keine Zeit mehr.

                ciao, ww

                --
                sh:(  fo:|  ch:~  rl:(  br:>  n4:~  ie:%  mo:)  va:)  de:]  zu:)  fl:(  ss:|  ls:~  js:)
                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

                1. onmouseover - Bilder vergrößern, ABER...

                  wucher wichtel
                  – Informationen zu den Bewertungsregeln

                  Hallo!

                  Auch. Du kannst CSS auf verschiedene Weise einbinden. Siehe: http://de.selfhtml.org/css/formate/einbinden.htm.

                  JETZT VERSTEH ICH GAR NIX MEHR!

                  Was verstehst du daran nicht? Diese Seite zeigt, wie man CSS in HTML-Seiten einbinden kann. Sie ist IMHO sehr verständlich erklärt. Lese es dir durch und wenn es dann Rückfragen gibt, dann frage gezielt nach.

                  Wenn ich das wieder verstehen würde...
                  Ja, klar, je nach Inhalt, sind die Seiten unterschiedlich lang, Jedoch passen sie genau in ein maximal-Fenster bei ner Bildschirmgröße von 1024/768.
                  D.h. ganz unten oder eine zeile vor Ende, sollte dann eben zurück und weiter stehen.

                  Füge eben am unteren Ende eine Zeile ein, in die du deine Links schreibst. Folgender Artikel ist für dich auch interessant: http://aktuell.de.selfhtml.org/artikel/css/footer/

                  Ich häng hier mal den Code der jetzigen Seite dran, mit deinem script integriert.
                  Vielleicht findest du noch ein paar Fehler.

                  Dafür bin ich nicht da. Auf http://validator.w3.org/ hast du die Möglichkeit, dein Dokument zu validieren.

                  Du solltest die Grundlagen lernen, bevor du dich daran machst, Seiten zu machen. Du solltest zumindest gute Grundlagen in HTML und CSS haben. Der Rest kommt dann per learning-by-doing.

                  ciao, ww

                  --
                  sh:(  fo:|  ch:~  rl:(  br:>  n4:~  ie:%  mo:)  va:)  de:]  zu:)  fl:(  ss:|  ls:~  js:)
                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln

                  1. onmouseover - Bilder vergrößern, ABER...

                    Benni
                    – Informationen zu den Bewertungsregeln

                    Hi!

                    Also bei mir geht das mit den Prozentangaben nicht!
                    Dann wird gar kein Bild angezeigt!

                    Naja, macht ja erst mal nix.

                    Werd mir Deine genannten Seiten zur Brust nehmen.

                    Vielen lieben Dank nochmal

                    MfG

                    Benni

                    Beitrag melden
                    –
                    Informationen zu den Bewertungsregeln

  2. onmouseover - Bilder vergrößern, ABER...

    Felix Riesterer Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Lieber Benni,

    Du arbeitest hier nicht mit reinem (X)HTML, sondern mit Javascript. Ich habe den Themenbereich Deines Postings daher in meiner Antwort entsprechend geändert.

    Ich habe einige Bilder, die relativ Groß sind, und die, wenn ich sie verkleinere, dann ist darauf wenig zu erkennen.

    Du erklärst nicht genau, _wie_ Du deine Bilder "verkleinerst"... ein entsprechender (HTML-/Javascript-)Code-Ausschnitt wäre hier extrem hilfreich, oder aber ein Link zum Anschauen!

    Deswegen hab ich die per Mouseover und mouseout eingebunden.

    Das sind Javascript-Eventhandler, die eine Funktion aufrufen. Ohne diese von Dir verwendete Funktion zu kennen, ist Dir kaum zu helfen, da man ab hier raten muss. Gib bitte ein Code-Beispiel! Oder einen Link zu der Seite, damit man sich das anschauen kann.

    Kann ich das riesige Bild beim laden der Seite auch unterbinden?

    Kannst Du das Bild als Thumbnail in einer verkleinerten Version speichern, damit ein Besucher beim Laden der Seite nicht diese Unmenge an Bilddaten laden muss? Es ist besser, wenn Du dem Besucher überlässt, ob er Dein Riesenbild überhaupt in voller Größe sehen möchte!

    Ich löse das mit meinem jsPopup, aber es gibt da auch die Lightbox, bzw. Lightbox2.

    Liebe Grüße aus Ellwangen,

    Felix Riesterer.

    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln