nicht angemeldet
Links dynamisch ändern
<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>
-
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>-
Lieber Ralf,
welch ein irres Code-Sammelsurium! Das ist ja waaaahnsinnig superumständlich! Ausserdem sollst Du wissen: Aller Javascript-Code mit Variablen-/Funktionsnamen, die mit "MM_" beginnen (und ähnliche), sind aus diesem Dreamweaver-Editor oder aus ähnlichen Programmen, somit also unnötig aufgebläht und für Deine Zwecke nicht sinnvoll umzuarbeiten.
Programmiere alles neu und lerne dabei was dazu!
Mein Denkansatz wäre, dass Du Deine Tabellenzellen aus der Tabelle "ausschneidest", um sie in anderer Reihenfolge wieder in Dein Dokument "einzufügen". Damit kommt dann sowohl das Bild, als auch sein Link drumherum an eine neue Position.
Wie das zu machen wäre, ist etwas aufwändiger, aber immer noch weniger Code-lastig, als Deine zusammengesuchten aufgeblähten Scripte!
Alternativ könntest Du statt Deiner Tabelle auch ein leeres <div id="Bildertabelle"></div> in den HTML-Teil setzen, das Du dann per Javascript mit dem Quellcode für Deine Tabelle füllst, die Du natürlich dynamisch aus fertigen Bausteinen (in String-Variablen gespeicherter HTML-Code) zusammensetzt. Wäre vielleicht sogar noch simpler zu realisieren.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
-