nicht angemeldet
Dynamische Buttons werden in einer Tabelle falsch angezeigt.
Hallo!
Ich habe ein für mich ziemlich aussichtsloses Problem.
Ich hätte in mein Projekt gerne dynamische Buttons mit eingebracht nur werden die an einer ganz anderen Stelle angezeigt, als ich es eigentlich will.
Hier der Code, ich hoffe, ihr könnt mir helfen. Hab den uninteressanten Teil ausgeblendet und mit "[...]" gekennzeichnet.
<HTML> <!-- START OF HEAD-DEFINITIONS --> <HEAD> <title>Page</title>
<script type="text/javascript"> Normal1 = new Image(); Normal1.src = "bilder/button_news.jpg"; /* erste Standard-Grafik / Highlight1 = new Image(); Highlight1.src = "bilder/button_news1.jpg"; / erste Highlight-Grafik */
Normal2 = new Image(); Normal2.src = "button2.gif"; /* zweite Standard-Grafik / Highlight2 = new Image(); Highlight2.src = "button2h.gif"; / zweite Highlight-Grafik */
Normal3 = new Image(); Normal3.src = "button3.gif"; /* dritte Standard-Grafik / Highlight3 = new Image(); Highlight3.src = "button3h.gif"; / dritte Highlight-Grafik */
/* usw. fuer alle weiteren zu benutzenden Grafiken */
function Bildwechsel (Bildnr, Bildobjekt) { window.document.images[Bildnr].src = Bildobjekt.src; } </script>
<style type="text/css"> body { background-image: url(bilder/page_back1.jpg); margin: 0px; } td { font-family: arial; font-size: 10pt; color: #FFFFFF; } .tableborder { background-color:#000000; } .tableinnav { background-color: #202020; } .maintable { background-color: #FFFFFF; } .navtable { background-image: url(bilder/page_back1.jpg); } a, a:link, a:visited, a:active { font-family: arial; font-size: 10pt; text-decoration: none; font-style: normal; color: red; } a:hover { font-size: 10pt; color: green; text-decoration: underline; } .title { color: orange; font-size: 24pt; font-weight: bold; } .nav { color: orange; font-size: 12pt; font-weight: bold; } </style> </HEAD> <!-- START OF BODY --> <BODY> <div align="left"> <!-- MAIN TABLE --> <table cellPadding="0" cellSpacing="0" border="0" width="1000px" align="center"> <tr> <td class="tableborder"> <table cellPadding="0" cellSpacing="0" border="0" width="100%" style="margin-left:0; margin-right:0"> <!-- HEADER --> <tr class="navtable"> <td colSpan="3" align="center" vAlign="middle"> <img src="bilder/bannerhp_v1.jpg" alt="" border="0"> </td> </tr> <tr> <!-- LEFT NAVIGATION --> <td style="background-image:url(bilder/navi_left_mitte.jpg)" align="left" vAlign="top" width="190px" class="navtable" nowrap>
<div style="margin-top:0px;"><img src="bilder/navi_left_oben.jpg" alt="" border="0"></div> <div align="center" style="margin-top:20px;"><img src="bilder/button_login.jpg" alt="" border="0"></div> <div align="center" style="margin-top:15px;"> <table cellpadding="0" cellspacing="0" border="0" align="center"> <tr> <td>
<table cellpadding="0" cellspacing="0" border="0" class="text" style="font-size:11pt; font-family:Times New Roman"> <form action="/cshp/vwar/extra/login.php?action=login" method="post" target="_self"> <input type="hidden" name="from" value="/cshp/vwar/news.php?"> <tr> <td>Name: </td> </tr> <td><input type="text" size="14" maxLength="50" name="loginname"></td> </tr> <tr> <td>Password: </td> </tr> <td><input type="password" size="14" maxLength="50" name="loginpassword"></td> </tr> <tr align="center" valign="bottom"> <td colspan="2" height="30"><input type="submit" name="action" value="login"></td> </tr> </form> </table> </td> </tr> </table> </div> <div align="center" style="margin-top:15px;"><img src="bilder/button_main.jpg" alt="" border="0"></div> <div align="center" style="margin-top:0px;"><a href="http://www.schweinerudel.de/news.php" onMouseOver="Bildwechsel(0, Highlight1)" onMouseOut="Bildwechsel(0, Normal1)"><img src="bilder/button_news.jpg" alt="" border="0"></a></div> <div align="center" style="margin-top:0px;"><a href="http://www.schweinerudel.de/gb.php"><img src="bilder/button_guestbook.jpg" alt="" border="0"></div> <div align="center" style="margin-top:0px;"><a href="http://www.schweinerudel.de/member.php"><img src="bilder/button_member.jpg" alt="" border="0"></div> <div align="center" style="margin-top:0px;"><a href="http://www.schweinerudel.de/joinus.php"><img src="bilder/button_joinus.jpg" alt="" border="0"></div> <div align="center" style="margin-top:0px;"><a href="http://www.schweinerudel.de/rules.php"><img src="bilder/button_rules.jpg" alt="" border="0"></div> <div align="center" style="margin-top:0px;"><img src="bilder/button_rudel.jpg" alt="" border="0"></div> <div align="center" style="margin-top:0px;"><a href="http://www.schweinerudel.de/kA.php"><img src="bilder/button_squads.jpg" alt="" border="0"></div> <div align="center" style="margin-top:0px;"><a href="http://www.schweinerudel.de/war.php"><img src="bilder/button_wars.jpg" alt="" border="0"></div> <div align="center" style="margin-top:0px;"><a href="http://www.schweinerudel.de/fightus.php"><img src="bilder/button_fightus.jpg" alt="" border="0"></div> <div align="center" style="margin-top:0px;"><a href="http://www.schweinerudel.de/stats.php"><img src="bilder/button_stats.jpg" alt="" border="0"></div> <div align="center" style="margin-top:0px;"><a href="http://www.schweinerudel.de/warpics.php"><img src="bilder/button_warpics.jpg" alt="" border="0"></div> <div align="center" style="margin-top:0px;"><img src="bilder/button_media.jpg" alt="" border="0"></div> <div align="center" style="margin-top:0px;"><a href="http://www.schweinerudel.de/news.php"><img src="bilder/button_downloads.jpg" alt="" border="0"></div> <div align="center" style="margin-top:0px;"><a href="http://www.schweinerudel.de/gb.php"><img src="bilder/button_gallery.jpg" alt="" border="0"></div> <div align="center" style="margin-top:0px;"><a href="http://www.schweinerudel.de/member.php"><img src="bilder/button_links.jpg" alt="" border="0"></div> <div align="center" style="margin-top:0px;"><a href="http://www.schweinerudel.de/joinus.php"><img src="bilder/button_linkus.jpg" alt="" border="0"></div>
</td> <!-- MAIN CONTENT --> <td align="center" vAlign="top" width="62%" class="maintable" nowrap> <!-- START OF VWAR --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
[...]
<!-- END OF VWAR --> </td> <!-- RIGHT NAVIGATION --> <td style="background-image:url(bilder/navi_right_mitte.jpg)" align="right" vAlign="top" width="190px" class="navtable" nowrap> <div style="margin-top:0px;"><img src="bilder/navi_right_oben.jpg" alt="" border="0"></div>
<!-- FOOTER --> <tr class="navtable"> <td align="center" colSpan="3">Copyright</td> </tr> </table> </td> </tr> </table> </div> </BODY> </HTML>
-
Hallo,
wenn Du mit window.document.images[Bildnr] arbeitest, musst Du ab dem ersten Bild im Dokument _überhaupt_ rechnen. Klar insofern, dass Dein Bildwechselskript aufs "falsche" Bild zugreift. Zu empfehlen ist der Einfachkeit halber, den Bildern name-Attribute zu geben und sie darüber anzusteuern. Id-Attribute gehen natürlich auch.
Grüße,
Utz--
Mitglied im Ring Deutscher Mäkler-
Danke für die Antwort!
Kannst du mir das auch noch etwas genauer erklären?
Mit JavaScript kenne ich mich nämlich eigentlich gar nicht aus^^-
Hallo,
das id-Attribut vergibst Du in HTML, z.B. so:
<img src="bilder/button_news.jpg" alt="" border="0" id="Newsbutton">
Dann übergibst Du im Bildwechselskript eben nicht die "Nummer" des Bildes, sondern den Attributwert der id, z.B. so:
function Bildwechsel (Bildid, Bildobjekt) {
document.getElementById(Bildid).src = Bildobjekt.src;
}(Achtung, ist ungetestet!)
Grüße,
Utz--
Mitglied im Ring Deutscher Mäkler-
Okay, das habe ich jetz verstanden, denke ich.
Jetzt bleibt mir noch die Frage, wie ich den jeweiligen Objekten den Attributwert zuweisen kann.
Also zB. hier beim ersten:
Normal1 = new Image();
Normal1.src = "bilder/button_news.jpg"; /* erste Standard-Grafik */
Highlight1 = new Image();
Highlight1.src = "bilder/button_news1.jpg"; /* erste Highlight-Grafik */Wo und wie vergebe ich die id?
-
Hallo,
Jetzt bleibt mir noch die Frage, wie ich den jeweiligen Objekten den Attributwert zuweisen kann.
Also zB. hier beim ersten:
Normal1 = new Image();
Normal1.src = "bilder/button_news.jpg";
Highlight1 = new Image();
Highlight1.src = "bilder/button_news1.jpg";Nirgendwo, das brauchst Du nicht. Da definierst Du "nur" Bildobjekte und weist denen eine URL zu. Mit dem ersten Parameter Deines Funktionsaufrufes übergibst Du die ID eines Bildes, das durch das im zweiten Paramater referenzierte ersetzt wird:
function Bildwechsel (Bildid, Bildobjekt) {
document.getElementById(Bildid).src = Bildobjekt.src;
}(...)
<a href="http://www.schweinerudel.de/news.php" onMouseOver="Bildwechsel('Newsbutton', Highlight1)" onMouseOut="Bildwechsel('Newsbutton', Normal1)"><img src="bilder/button_news.jpg" alt="" border="0" id="Newsbutton"></a>
Der erste Parameter des Funktionsaufrufs Bildwechsel('Newsbutton', Highlight1); zeigt an, *welches* Bild ersetzt werden soll (genauer: auf welches Element die Funktion angewendet werden soll). Der zweite Parameter übergibt eines der oben definierten Bildobjekte. Die Funktion liest aus diesem Bildobjekt die Eigenschaft .src (die Du auch schon definiert hast) und übergibt die der Eigenschaft .src des Elements, das seiner Id nach gefunden wird. Die Id selber ändert sich dabei nicht, nur der Wert der Eigenschaft src. Das "ausgetauschte" Bild sprichst Du also wieder mit der selben Id des Ursprungsbildes an.
Grüße,
Utz--
Mitglied im Ring Deutscher Mäkler-
Okay jetzt versteh ich das, ist ja logisch^^
Hab das einbebunden aber anscheinend funktioniert das nicht.
In der Statuszeile wird ein Fehler angezeigt und es tut sich leider nichts.Siehst du einen Fehler?
Danke schonmal für die ganze Hilfe ;)
-
Hallo,
Siehst du einen Fehler?
Ja *grummel* - Du hast nicht sauber abgetippt. So muss es heißen:
onMouseOver="Bildwechsel('Newsbutton', Highlight1)" onMouseOut="Bildwechsel('Newsbutton', Normal1)"
Lässt Du die Hochkommata weg, übergibst Du eine Variable, die es gar nicht gibt und insofern leer ist. Er findet kein Element mit leerer Id, und davon schon gleich gar kein src-Attribut -> *Bumm*
Grüße,
Utz--
Mitglied im Ring Deutscher Mäkler-
Oh ja blöder Fehler, muss ich zugeben :D
Aber jetzt mal ein großes Dankeschön für deine Hilfe!
Ist echt super von dir ;)
-
-
-
-
-
-
-