Hallo,
zuerst einmal sorry für den "schlechten Einstieg (siehe oben) ich wollte noch etwas in das Nachrichtenfeld schreiben, bestätigte dann aber mit Enter ohne das Feld vorher angeklickt zu haben, dadurch wurde die Nachricht leider schon abgeschickt. Entschuldigung :(
Nun zu meinem Problem:
Ich habe eine Javascript-Funktion gefunden und zu meinen Zwecken umgebaut. Sie sitcht die einzelnen Bilder nach rechts oder links je nachdem welchen Pfeil man anklickt:
http://test.etoons.de/ecards/pics.html
mein Problem ist nun aber, dass sich die Links auch ändern sollen, sprich wenn ich den Bär erst 2 felder nach rechts verschiebe, dann soll sich der Link für den Bär auch dorthin verschieben.
Leider bin ich in Javascript nicht besonders fit und bräuchte einen Denkanstoß. Wäre das sehr aufwendig zu programmieren mit diesen vorhandenen Bausätzen?
Hier mal der Quelltext sowie die Javascript Funktionen
Vielen Dank schonmal im voraus
Ralf Heumann
functions.js:
var lastDiv = 0;
var firstDiv = 0;
function MM_findObj(n, d) { //v3.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function PD_swapAlt() { //v3.0
var i,j=0,x,a=PD_swapAlt.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; x.alt=a[i+2];}
}
function getObj(name) {
if (document.getElementById) {
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
}
else if (document.all) {
this.obj = document.all[name];
this.style = document.all[name].style;
}
else if (document.layers) {
this.obj = document.layers[name];
this.style = document.layers[name];
}
}
function switchDiv(newDiv) {
divName = "image_"+lastDiv;
hideDiv = new getObj(divName);
hideDiv.style.visibility = "hidden";
thisDiv = newDiv + firstDiv;
if(thisDiv >= maxDiv) {
thisDiv = thisDiv - maxDiv;
}
divName = "image_"+thisDiv;
showDiv = new getObj(divName);
showDiv.style.visibility = "visible";
lastDiv = thisDiv;
}
function moveThumb(move) {
firstDiv = firstDiv + move;
if(firstDiv == maxDiv) {
firstDiv = 0;
}
if(firstDiv < 0) {
firstDiv = maxDiv - 1;
}
for(i = 3; i >= 0; i--) {
id = firstDiv + i;
if(id >= maxDiv) {
id = id - maxDiv;
}
img = "thumb_" + i;
thumb = "images/ecards/"+divArray[id]+"_tb.gif";
MM_swapImage(img,'',thumb,1);
PD_swapAlt(img,'',altArray[id],1);
}
}
HTML Seite:
<table width="393" height="125" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="34"><a href="javascript:moveThumb(-1)"><img src="images/prev.gif" alt="Zurück" width="34" height="125" border="0"></a></td>
<td width="325" align="center" valign="middle" background="images/picstream.gif">
<table cellspacing="0" cellpadding="3" border="0">
<tr>
<td width="75" height="83" align="center" valign="middle"><a href="javascript:switchImage(0)"><img name="thumb_0" src="images/ecards/1_tb.gif" border="0" alt="Bär"></a></td>
<td width="75" height="83" align="center" valign="middle"><a href="javascript:switchImage(1)"><img name="thumb_1" src="images/ecards/2_tb.gif" border="0" alt="Brief"></a></td>
<td width="75" height="83" align="center" valign="middle"><a href="javascript:switchImage(2)"><img name="thumb_2" src="images/ecards/3_tb.gif" border="0" alt="Slip"></a></td>
<td width="75" height="83" align="center" valign="middle"><a href="javascript:switchImage(3)"><img name="thumb_3" src="images/ecards/4_tb.gif" border="0" alt="Windel"></a></td>
</tr>
</table>
</td>
<td width="34"><a href="javascript:moveThumb(1)"><img src="images/next.gif" alt="Vor" width="34" height="125" border="0"></a></td>
</tr>
</table>
<script language="JavaScript" type="text/javascript">
<!--
var maxDiv=4;
var divArray = new Array(1,2,3,4);
var imagesArray = new Array('images/ecards/1.gif','images/ecards/2.gif','images/ecards/3.gif','images/ecards/4.gif');
var altArray = new Array('Bär','Brief','Slip','Windel');
//-->
</script>