Vorschaubild in anderes Bild einsetzen

Einklappen
X
Einklappen
 
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige template Weiter
  • #1

    Vorschaubild in anderes Bild einsetzen

    Hallo,

    Anliegen: habe eine html seite mit hauptbild und mehreren vorschaubildern erstellt

    Problem: ich möchte beim klick auf ein vorschaubild der grösse 96x72 das dieses immer jeweils in dem hauptbild auf 640x480 erscheint der gleichen html seite erscheint.

    Frage: wer kennt oder hat hierfür eine idee oder einen javascript

    Beispielseite: bei einigen ebay seiten, wo mehrere bilder eingestellt werden, diese aber erst beim klick darauf im hauptbild erscheinen (keine extern gelinkten bilder)
    Stichworte: -
  • #2
    schu dir mal die behandlung von document.images[].src bei selfHTML an:
    http://selfhtml.teamone.de/javascrip...images.htm#src
    Kissolino.com

    Kommentar

    • #3
      document.images[].src nützt hierfür nichts, die Vorschaugrafik ist in einer anderen größe

      in der doku steht: Speichert die Angabe, welche Grafikdatei angezeigt wird, wie sie mit der Angabe src= im <img>-Tag möglich ist. Diese Eigenschaft lässt sich ändern. Dadurch können Sie Grafiken dynamisch durch andere ersetzen. Beachten Sie jedoch, dass Breite und Höhe ursprünglich in HTML notierten Grafik für alle dynamisch folgenden Grafiken übernommen werden. Um verzerrungsfreie Effekte zu erzielen, sollten also alle Grafiken, die einander dynamisch ersetzen, die gleiche Höhe und Breite haben

      zur besseren vorstellung mein html:

      <head>
      </head>

      <table cellSpacing="0" cellPadding="2" border="0">
      <tr>
      <B><SPAN style="FONT-SIZE: 24pt">
      <FONT face="Arial Black" size=2>
      <td vAlign="top" align="right" rowSpan="2"><B><SPAN style="FONT-SIZE: 24pt"><FONT face="Arial Black" size=2><IMG height=300
      src="http://mitglied.lycos.de/meine/bild/hauptpic.jpg"
      width=400 style="border-style: solid; border-color: #AED7FF"></FONT></SPAN>
      </B></td>
      <td width="20" rowSpan="2"></td>
      <td><b><font face="Arial" color="#AED7FF" size="2">Klicken Sie
      auf ein Bild<BR> um es zu vergrößern</font></b></td>
      </FONT></SPAN>
      </B>
      </tr>
      <tr>
      <B><SPAN style="FONT-SIZE: 24pt">
      <FONT face="Arial Black" size=2>
      <td vAlign="top">
      <p align="center" style="margin-top: 6">
      <img src="http://mitglied.lycos.de/meine/bild/vorschaupic_1.jpg" border="1" color="#CCCCCC" width="96" height="72"><br>
      <img src="http://mitglied.lycos.de/meine/bild/vorschaupic_2.jpg" border="1" color="#CCCCCC" width="96" height="72"><br>
      <img src="http://mitglied.lycos.de/meine/bild/vorschaupic_3.jpg" border="1" color="#CCCCCC" width="96" height="72"></FONT></SPAN>
      </B></p>
      </td>
      </FONT></SPAN>
      </B>
      </tr>
      </table>

      Kommentar

      • #4
        Original geschrieben von kmon
        document.images[].src nützt hierfür nichts, die Vorschaugrafik ist in einer anderen größe
        na und?

        du hast zb 3 bilder ... ergo brauchst du 6 => 3x vorschau, 3x originalgrösse,
        onmouseover() wechselst du du nun per javascript ein bischen rum ... und zwar mit zuweisungen über document.images[].src
        Kissolino.com

        Kommentar

        • #5
          hmm,

          du willst nicht etwa den thumb auf 640x480 strecken? halte ich für ... komisch. bei mir gibts verschiedene quellen für thumb und 'haupt-bild' ... und da sollte dir .src= ... helfen ...
          Die Zeit hat ihre Kinder längst gefressen

          Kommentar

          • #6
            irgendwie brauche ich einen ansatzpunkt, wie lege ich das hauptbild als solches fest?

            <script type="text/javascript">
            <!--
            var b = new Array();
            b[0] = new Image(); b[0].src = "hauptbild.jpg";
            b[1] = new Image(); b[1].src = "vorschaubild_1.jpg";
            b[2] = new Image(); b[2].src = "vorschaubild_2.jpg";
            b[3] = new Image(); b[3].src = "vorschaubild_3.jpg";
            var i = 0;
            function wechsel_1()
            {
            if(i = 1) i = 1;
            document.images[0].src = b[1].src;
            function wechsel_2()
            {
            if(i = 2) i = 2;
            document.images[0].src = b[2].src;
            function wechsel_3()
            {
            if(i = 3) i = 3;
            document.images[0].src = b[3].src;
            //-->
            </script>
            </body></html>

            Kommentar

            • #7
              Original geschrieben von kmon
              irgendwie brauche ich einen ansatzpunkt, wie lege ich das hauptbild als solches fest?
              indem du mal liest und testest, wie es bei selfhtml im demo ist.

              es kann doch nicht sein, dass wir dir deinen code schreiben. oder?
              INFO: Erst suchen, dann posten![color=red] | [/color]MANUAL(s): PHP | MySQL | HTML/JS/CSS[color=red] | [/color]NICE: GNOME Do | TESTS: Gästebuch[color=red] | [/color]IM: Jabber.org |


              Kommentar

              Vorherige template Weiter
              Lädt...
              X