nicht angemeldet
Ich würde an deiner Stelle das mal mit einer anderen methode Versuchen und zwar so:
<SCRIPT LANGUAGE="javascript"> var intPics = 30; //Number of pics var SLOTS = 4; //Number of slots for thumbnails var THUMBNAIL_EXT = '.jpg'; //Fileextension for thumbnails var THUMBNAIL_FOLDER = 'images/thumbs/'; //Folder for thumbnails (rel) var THUMBNAIL_BASENAME = 'pic_'; //Basename for thumbnails var PREVIEW_EXT = '.jpg'; //Fileextension for preview images var PREVIEW_FOLDER = 'images/preview/'; //Folder for preview images (rel) var PREVIEW_BASENAME = 'pic_'; //Basename for thumbnails
//Initiate Global Pointer var intIndex = 0;
var arrPics = new Array(intPics);
//Define multidimension array for(i=0;i<arrPics.length;i++) { arrPics[i] = new Array(); }
//Define thumbnail sources and preload images for(i=0;i<arrPics.length;i++) { arrPics[i]["thumbnail"] = new Image(); arrPics[i]["thumbnail"].src = THUMBNAIL_FOLDER + THUMBNAIL_BASENAME + i + THUMBNAIL_EXT }
//Define preview sources and preload images for(i=0;i<arrPics.length;i++) { arrPics[i]["preview"] = new Image(); arrPics[i]["preview"].src = PREVIEW_FOLDER + PREVIEW_BASENAME + i + PREVIEW_EXT }
//Functions function moveBar(strDirection,strStep) { if(strDirection == 'right') { if(strStep == 'image') { intIndex++; if(intIndex >= arrPics.length) intIndex = 0; } else if(strStep == 'page') { intIndex += SLOTS; if(intIndex >= arrPics.length) intIndex -= arrPics.length } else { void(0); } } else if (strDirection = 'left') { if(strStep == 'image') { intIndex--; if(intIndex < 0) intIndex = arrPics.length - 1; } else if(strStep == 'page') { intIndex -= SLOTS; if(intIndex < 0) intIndex += arrPics.length } else { void(0); } } else { void(0); } updateBar(); }
function updateBar() { for(i=0;i<SLOTS;i++) { if(i + intIndex < arrPics.length) { document.images["slot" + i].src = arrPics[i + intIndex]["thumbnail"].src } else { document.images["slot" + i].src = arrPics[(i + intIndex) - arrPics.length]["thumbnail"].src } } }
function showPreview(intSlot) { if((intSlot + intIndex) < arrPics.length) { document.images["preview"].src = arrPics[intSlot + intIndex]["preview"].src } else { document.images["preview"].src = arrPics[(intSlot + intIndex) - arrPics.length]["preview"].src } } </SCRIPT> </HEAD>
<BODY ONLOAD="updateBar();">
<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" WIDTH="100%" HEIGHT="100%"> <TR> <TD ALIGN="center" VALIGN="top"> <TABLE CELLPADDING="4" CELLSPACING="4" BORDER="0"> <TR> <TD COLSPAN="6" ALIGN="center"> <TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" WIDTH="1"> <TR> <TD><IMG SRC="images/start.gif" ID="preview" NAME="preview"></TD> <TD VALIGN="top" BACKGROUND="images/shadow_right.gif"><IMG SRC="images/dc.gif" WIDTH="5" HEIGHT="1"></TD> </TR> <TR> <TD BACKGROUND="images/shadow_bottom.gif"><IMG SRC="images/dc.gif" WIDTH="1" HEIGHT="5"></TD> <TD><IMG SRC="images/shadow_corner.gif" WIDTH="5" HEIGHT="5"></TD> </TR> </TABLE> </TD> </TR> <TR> <TD> <A HREF="javascript:void(0);" ONCLICK="moveBar('left','image');">< Image</A><BR> <BR> <A HREF="javascript:void(0);" ONCLICK="moveBar('left','page');">< Page</A> </TD> <TD> <TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" WIDTH="1"> <TR> <TD><A HREF="javascript:void(0);" ONCLICK="showPreview(0);"><IMG SRC="images/dc.gif" ID="slot0" NAME="slot0" BORDER="0" xWIDTH="109" xHEIGHT="82"></A></TD> <TD VALIGN="top" BACKGROUND="images/shadow_right.gif"><IMG SRC="images/dc.gif" WIDTH="5" HEIGHT="1"></TD> </TR> <TR> <TD BACKGROUND="images/shadow_bottom.gif"><IMG SRC="images/dc.gif" WIDTH="1" HEIGHT="5"></TD> <TD><IMG SRC="images/shadow_corner.gif" WIDTH="5" HEIGHT="5"></TD> </TR> </TABLE> </TD> <TD> <TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" WIDTH="1"> <TR> <TD><A HREF="javascript:void(0);" ONCLICK="showPreview(1);"><IMG SRC="images/dc.gif" ID="slot1" NAME="slot1" BORDER="0" xWIDTH="109" xHEIGHT="82"></A></TD> <TD VALIGN="top" BACKGROUND="images/shadow_right.gif"><IMG SRC="images/dc.gif" WIDTH="5" HEIGHT="1"></TD> </TR> <TR> <TD BACKGROUND="images/shadow_bottom.gif"><IMG SRC="images/dc.gif" WIDTH="1" HEIGHT="5"></TD> <TD><IMG SRC="images/shadow_corner.gif" WIDTH="5" HEIGHT="5"></TD> </TR> </TABLE> </TD> <TD> <TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" WIDTH="1"> <TR> <TD><A HREF="javascript:void(0);" ONCLICK="showPreview(2);"><IMG SRC="images/dc.gif" ID="slot2" NAME="slot2" BORDER="0" xWIDTH="109" xHEIGHT="82"></A></TD> <TD VALIGN="top" BACKGROUND="images/shadow_right.gif"><IMG SRC="images/dc.gif" WIDTH="5" HEIGHT="1"></TD> </TR> <TR> <TD BACKGROUND="images/shadow_bottom.gif"><IMG SRC="images/dc.gif" WIDTH="1" HEIGHT="5"></TD> <TD><IMG SRC="images/shadow_corner.gif" WIDTH="5" HEIGHT="5"></TD> </TR> </TABLE> </TD> <TD> <TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" WIDTH="1"> <TR> <TD><A HREF="javascript:void(0);" ONCLICK="showPreview(3);"><IMG SRC="images/dc.gif" ID="slot3" NAME="slot3" BORDER="0" xWIDTH="109" xHEIGHT="82"></A></TD> <TD VALIGN="top" BACKGROUND="images/shadow_right.gif"><IMG SRC="images/dc.gif" WIDTH="5" HEIGHT="1"></TD> </TR> <TR> <TD BACKGROUND="images/shadow_bottom.gif"><IMG SRC="images/dc.gif" WIDTH="1" HEIGHT="5"></TD> <TD><IMG SRC="images/shadow_corner.gif" WIDTH="5" HEIGHT="5"></TD> </TR> </TABLE> </TD> <TD> <A HREF="javascript:void(0);" ONCLICK="moveBar('right','image');">Image ></A><BR> <BR> <A HREF="javascript:void(0);" ONCLICK="moveBar('right','page');">Page ></A> </TD> </TR> </TABLE> </TD> </TR> </TABLE>
</BODY> </HTML>
Das ist jetzt ein Beispiel, welches ich für eine Fotogalerie erstellt habe, aber diese Methode kannst du nutzen, um dein Bild auf eine andere Stelle zu bringen. Du nimmst einfach eine Tabelle, die du aufteilst und lässt die Bilder einfach in die Verschiedenen Spalten anzeigen. Sieht schlimm aus, aber wenn du den Code in einen Vernünftigen Editor packst dürfstes du da schon hinterkommen.