nicht angemeldet
Javascript: dynamische grafische Buttons - Positionsproblem !!
Hallo I need Hilfe !!
Ich habe ein Problem mit der Positionierung einer bzw. mehrerer Highlight-Grafik-Buttons. Die "Mutter"-Buttons sind positioniert.
Ich habe einen Seitenkopf aus Tabellen gebaut, der aus 3 Spalten besteht. Die mittlere Spalte ist 2-zeilig, die rechte Spalte ist 5-zeilig (bzw. es steckt eine 5-zeilige Tabelle drin).
In der linken Spalte steckt eine Grafik. Die 2 Zeilen der mittleren Spalte enthalten ebenfalls je eine Grafik (Schriftzug-Bilder als Seitenkopf). In der rechten Spalte sollen nun untereinander 5 Grafik-Buttons eingebaut werden die auch dort highlightbar sind - wie mache ich das genau ??
Bisher gelingt mir zwar die Erzeugung des Scripts zum Umschalten der Buttons, jedoch wird bei "onMouseOver" die Grafik in der linken Spalte durch die Buttongrafiken ersetzt. Der Mutter-Button verändert sich nicht. Entferne ich zum Spass die Orginalgrafik der linken Spalte, dann ersetzt sich die Grafik in der Mitte oben usw. - was mache ich falsch ??
PS: Es ist dabei egal, ob die "new Image"-Instanzen im "head" oder "body" definiert werden.
Vielen Dank vorab für die Hilfe !!
Gruß Klaus Engroff
Script der Seite:
<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0" bgcolor="#f0f0f0" text="#000000" link="#363636" vlink="#363636" alink="#d5ae83">
<table border="0" cellpadding="0" cellspacing="0" background="../bilder/themes/hbv-headback.gif" width="100%" height="115">
<tr height="40">
<td rowspan="2" align="center" width="130" height="115"><a href="http://www.hbv-aktuell.de" target="_top"><img src="../bilder/themes/hbv-logo.gif" width="97" height="110" border="0" align="right"></a></td>
<td align="center" height="40"><a href="http://www.hbv-aktuell.de" target="_top"><img src="../bilder/themes/hbv_title.gif" width="444" height="20" border="0"></a></td>
<td width="20" height="40"></td>
<td rowspan="2" width="110" height="110">
<div align="center">
<table border="0" width="100%">
<tr>
<td width="110" align="center">
<p style="word-spacing: 0; line-height: 100%; margin-top: -2; margin-bottom: -3">
<script type="text/javascript">
<!--
normal1 = new Image();
normal1.src = "../bilder/themes/hbv1_b1.gif"; /* 1. Standard-Button */
highlight1 = new Image();
highlight1.src = "../bilder/themes/hbv1_b1h.gif"; /* 1. Highlight-Button */
/* usw. fuer alle weiteren zu benutzenden Grafiken */
function bildwechsel(normal1,highlight1)
{
window.document.images[normal1].src = highlight1.src;
}
//-->
</script>
<a href="index1.html"
onMouseOver="bildwechsel(0,highlight1)"
onMouseOut="bildwechsel(0,normal1)"><img src="../bilder/themes/hbv1_b1.gif" width="87" height="21" border="0"></a></td>
</tr>
<tr>
<td width="110" align="center">
<p style="word-spacing: 0; line-height: 100%; margin-top: -2; margin-bottom: -3"></td>
</tr>
<tr>
<td width="110" align="center">
<p style="word-spacing: 0; line-height: 100%; margin-top: -2; margin-bottom: -3"></td>
</tr>
<tr>
<td width="110" align="center">
<p style="word-spacing: 0; line-height: 100%; margin-top: -2; margin-bottom: -3"></td>
</tr>
<tr>
<td width="110" align="center">
<p style="word-spacing: 0; line-height: 100%; margin-top: -2; margin-bottom: -3"></td>
</tr>
</table>
</div>
</td>
</tr>
-
Moin Klaus
Ich bin mir nicht ganz sicher, aber so wie das klingt hast Du eigentlich nichts falsch gemacht; Du kommst nur mit der Nmmerierung der Bilder durcheinander.
<a href="index1.html"
onMouseOver="bildwechsel(0,highlight1)"Die Bilder sprichst Du beim Tausch per Nummer an (hier die 0);
Einfacher tust Du Dir wenn Du den Bildern im html-code Namen mittels des name-Tags zuordnest, und die Bilder dann hierüber ansprichst; dann fällt auch das ewige Abzählen weg - erst recht wenn Du nachträglich noch etwas verändern solltestHoffentlich hilft`s und war verständlich zu dieser doch schon späten Stunde
Gruss Andreas-
Hallo Andreas,
der Tipp traf's auf den Kopf, werde zukünftig mit Namen arbeiten.
Dank dir !!Gruß Klaus
------------------------------------------------------------------
Moin Klaus
Ich bin mir nicht ganz sicher, aber so wie das klingt hast Du eigentlich nichts falsch gemacht; Du kommst nur mit der Nmmerierung der Bilder durcheinander.
<a href="index1.html"
onMouseOver="bildwechsel(0,highlight1)"Die Bilder sprichst Du beim Tausch per Nummer an (hier die 0);
Einfacher tust Du Dir wenn Du den Bildern im html-code Namen mittels des name-Tags zuordnest, und die Bilder dann hierüber ansprichst; dann fällt auch das ewige Abzählen weg - erst recht wenn Du nachträglich noch etwas verändern solltestHoffentlich hilft`s und war verständlich zu dieser doch schon späten Stunde
Gruss Andreas
-
-
hi,
function bildwechsel(normal1,highlight1)
{
window.document.images[normal1].src = highlight1.src;
}
//-->
</script><a href="index1.html"
onMouseOver="bildwechsel(0,highlight1)"
onMouseOut="bildwechsel(0,normal1)"><img src="../bilder/themes/hbv1_b1.gif" width="87" height="21" border="0"></a>*bitte* reduziere Deinen Code auf das Wesentliche, hier also Funktion und Aufruf!
Du referenzierst Deine Bilder über die Indexnummern, das ist zwar schulbuchmäßig, aber ungeschickt. Fügst Du ein neues Bild ein, verschieben sich alle Nummern.
Vergib Namen für die Bilder und übergib der Funktion als ersten Parameter String Bildname anstelle der Indexnummer:
onMouseOver="bildwechsel('Dein_Name',highlight1)
hth + Gruss Joachim
-
Hallo Joachim,
Oft ist die Lösung einfacher als man denkt :)
Dein Antwort-Vorgänger machte den gleichen Vorschlag.
Hab's schon ausprobiert, funktioniert prima - Danke auch !!Gruß Klaus
--------------------------------------------------------------------hi,
function bildwechsel(normal1,highlight1)
{
window.document.images[normal1].src = highlight1.src;
}
//-->
</script><a href="index1.html"
onMouseOver="bildwechsel(0,highlight1)"
onMouseOut="bildwechsel(0,normal1)"><img src="../bilder/themes/hbv1_b1.gif" width="87" height="21" border="0"></a>*bitte* reduziere Deinen Code auf das Wesentliche, hier also Funktion und Aufruf!
Du referenzierst Deine Bilder über die Indexnummern, das ist zwar schulbuchmäßig, aber ungeschickt. Fügst Du ein neues Bild ein, verschieben sich alle Nummern.
Vergib Namen für die Bilder und übergib der Funktion als ersten Parameter String Bildname anstelle der Indexnummer:
onMouseOver="bildwechsel('Dein_Name',highlight1)
hth + Gruss Joachim
-