Tipps und Tricks




Bildershow, "Mouseover Vorschaubild zeigt Bild" in english here
Habe ein tolles Java script erhalten welches Bilder anzeigt wenn man ueber die Vorschaubilder faehrt. Der Ort der Abbildung kann im head der Datei zb als "rahmen" bezeichnet werden. Es folgt das Java script welches die Bilder ohne Beschreibungstext darunter/darueber anzeigt, es kann irgendwo innerhalb des body eingebaut werden, die Bilder muessen bild01.jpg -bild10.jpg-bild17.jpg benannt werden und sollten im selben verzeichniss wie die datei liegen.

<script language="JavaScript" type="text/javascript"><!--
function wechsel(nr) {document.images.bildxx.src = "bild"+nr+".jpg";}
--></script>

Es folgen die CSS Angaben, fuer den head der Datei, die den Ort der Abbildung, hier #rahmen genannt definieren und die Angaben fuer die Vorschaubilder, border/Umrandung, Groesse und Abstand, die Bilder werden weil im script so definiert ohne Beschreibungstext abgebildet. Weiter unten das script fuer die Abbildung mit Beschriebungstext.

  <style type="text/css">
<!--
#thumbs img {border:1px solid #888; width:90px; height:70px; margin:5px; padding:5px; }
#rahmen {border:0px; }
-->
  </style>

und so siehts aus

  ... komfortabel oder ?

Es folgt der Quelltext einer vollstaendigen Seite, einfach gehalten und die tags in eine Tabelle eingebaut, das script am ende der Seite eingebaut.

<html>
   <head>
<title>Thumbs gallery</title>
<style>
   #thumbs img {border:1px solid #888; width:90px; height:70px; margin:5px; padding:5px; }
   #rahmen {border:0px; }
</style>
    </head>
<body>
<table width="100%" border="1" cellspacing="2" cellpadding="2">
   <tbody>
     <tr>
     <td width="150" valign="top" align="center">
  <div id="thumbs"><br>
     <a href="#" onmouseover="wechsel('01');"><img src="bild01.jpg" alt=""></a><br>
     <a href="#" onmouseover="wechsel('02');"><img src="bild02.jpg" alt=""></a><br>
     <a href="#" onmouseover="wechsel('03');"><img src="bild03.jpg" alt=""></a><br>
   <br>
     </div>
   </td>
   <td align="center" valign="middle">
      <div id="rahmen"> </div>
<!-- Nummer des Bildes, das als erstes nach dem Start erscheinen soll, z.B. bild04.jpg //-->
      <div id="bild"><img id="bildxx" alt="" src="bild01.jpg"><br></div>
    </td>
   </tr>
  </tbody>
</table>
<script language="JavaScript" type="text/javascript"><!--
function wechsel(nr) {document.images.bildxx.src = "bild"+nr+".jpg";}
--></script>
</body>
</html>

Es folgt das script welches die Bilder mit Beschriebungstet definiert, die bilder werden wieder bild01.jpg bis zb bild17.jpg genannt.

<script language="JavaScript" type="text/javascript"><!--
function wechsel(nr) {document.getElementById("text").innerHTML=document.getElementById("text"+nr).innerHTML;
document.images.bildxx.src = "bild"+nr+".jpg";}
function auf(id) {document.getElementById(id).style.visibility="visible";}
function zu(id) {document.getElementById(id).style.visibility="hidden";}
--></script>

Daher muss auch im head der Datei der text /Beschreibungstext fuer die Bilder, definiert werden -folgt. Ich stell meistens alles in ein Tabelle, in einer Spalte links zb die Vorschaubilder und in der Spalte im Zentrum den rahmen <div id="rahmen">

<style type="text/css">
<!--
#rahmen    {border:0px; }
#thumbnails2 img {border:1px solid #888; width:70px; height:40px; margin:5px; }
#text          {text-align:center; font-size:16px; }
#textxx       {display:none; }
-->
  </style>

Die nette Person welche mir das script gesandt, definiert alle Bereiche absolut, ich bevorzuge Tabellen mit Prozentangaben die sich an den Bildschirm anpassen, hier eine Seite die das script mit Beschreibungstext unter den Bildern verwendet.

Thumbnails - Vorschaubilder



Home