Zum Inhalt springen

Bilder wie bei Ebay anzeigen...

SteffiMichi

Von SteffiMichi
in Webdesign

 Teilen

Empfohlene Beiträge

SteffiMichi

SteffiMichi

Geschrieben
Geschrieben

Hi,

ich bräuchte ein kleines Javscript, mit dem man Bilder wie bei Ebay anzeigen kann. Also in der Mitte ein Standardbild, daneben 2 oder 3 Thumbnails, die sich bei Klick in der Mitte anzeigen.

Es muss nicht die Möglichkeit haben Bilder upzuloaden, einfach vorhandene Bilder so darstellen, vielleicht von vorhandenen Bildern Thumbnails generieren können.

Wie kann ich sowas realisieren??

Vielen Dank

StMi

SteffiMichi

SteffiMichi

Geschrieben
  • Autor
Geschrieben

Das habe ich teilweise schon gemacht, aber bei Ebay sind die Seiten dermaßen lang und umfangreich, dass man kaum durchsieht. Und wenn man dann nicht so fit in JS ist, bringt man schnell einiges durcheinander und dan funzt gar nix mehr... trotzdem danke für den Tip.

Bin dankbar für weitere postings!

SteffiMichi

SteffiMichi

Geschrieben
  • Autor
Geschrieben

Also, ich habe jetzt erstmal klein angefangen (mit Hilfe eines Tutorials) und auch schon was hinbekommen.

Nun nur folgendes: Meine Bilder werden zwar als Thumbnails erkennbar, aber nicht (bei Klick) als großes Bild angezeigt. Was mache ich falsch? So und dann ist das ganze ja noch auf ein Frameset basiert, das würde ich aber gerne in nur einer Html-Seite haben, wie muss ich da rangehen? Wie kann ich das realisieren?

Hier der Code:


...

  <script type="text/javascript">

    var thumbs = new Array('beispiel.jpg', 'aerzte.jpg','asus_a7n.jpg','southpark.jpg');

    var thumbs_desc = new Array('XXX YYY ZZZ','BLINDTEXT','BLA','BLUB');

    var h = 100; //höhe des Thumbnails

    var w = 100; //breite des Thumbnails

    var spacer = 40;


    function setHighlight(tags){

      if(tags.indexOf(',')!=-1){

        var tag = tags.split(',');

        var x = document.getElementsByTagName(tag[z]);

      }else{

        var tag = tags;

        var x = document.getElementsByTagName(tag);

      }

      for(z=0;z<tag.length;z++){

        var y = x.length;

        for(i=0;i<y;i++){

          x[i].onmouseover = new Function("this.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=100)';");

          x[i].onmouseout = new Function("this.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=50)';");

        }

      }

    }


    function swap(id,desc){

     parent.galery.document.images[0].src=id;

     parent.gallery.document.getElementById('beschreibung').innerHTML=thumbs_desc[desc];

    }


  </script>


</head>

<body onload="setHighlight('img')" onselectstart="return false" ondragstart="return false" oncontextmenu="return false">

  <table cellpadding="0" cellspacing="0">

    <tr>

    <script type="text/javascript">

    <!--

      for(var x=0; x<thumbs.length; x++){

        document.write('<td><img src="'+thumbs[x]+'" id="'+thumbs[x]+'" width="'+w+'" height="'+h+'" onclick="swap(this.id,'+x+')" /></td>');

        document.write('<td><img src="spacer.gif" width="'+spacer+'" height="1" /></td>');

      }

...

Erstelle ein Benutzerkonto oder melde Dich an, um zu kommentieren

Du musst ein Benutzerkonto haben, um einen Kommentar verfassen zu können

Benutzerkonto erstellen

Neues Benutzerkonto für unsere Community erstellen. Es ist einfach!

Neues Benutzerkonto erstellen

Anmelden

Du hast bereits ein Benutzerkonto? Melde Dich hier an.

Jetzt anmelden
 Teilen
Zur Themenübersicht

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Links

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...