dynamische grafische buttons
Andrea
- javascript
Die Bilder tauschen sich beliebig aus. Ich weiß nicht wo mein Fehler liegt, viell. hängt es mit dem : funstion Bildwechsel (Bildnr, Bildobjekt) zusammen?
Wenn jemand meinen Fehler findet wäre ich echt dankbar, ich such ihn schon seid 4 stunden :(
http://de.geocities.com/deg4603
So siehts bei mir aus :
_____________________________________________________________________
<div align="center">
<center>
<table border="0" width="400">
<tr>
<td height="197">
<p> <script type="text/javascript">
<!--
Normal1 = new Image();
Normal1.src = "profile-kyo1.jpg"; /* erste Standard-Grafik */
Highlight1 = new Image();
Highlight1.src = "profile-kyo1h.jpg"; /* erste Highlight-Grafik */
function Bildwechsel(Bildnr.,Bildobjekt) {
window.document.images[Bildnr].src = Bildobjekt.src;
}
//-->
</script>
<table border="0" cellpadding="0" cellspacing="0" height="0">
<tr>
<p> </p><td height="400"> <a href="http://de.geocities.com/deg4603/profile-kyo.htm"
onMouseOver="Bildwechsel(0,Highlight1)"
onMouseOut="Bildwechsel(0,Normal1)"> </a><br>
</td>
</tr>
</table>
<a href="http://de.geocities.com/deg4603/profile-kyo.htm"
onMouseOver="Bildwechsel(0,Highlight1)"
onMouseOut="Bildwechsel(0,Normal1)"><img src="http://de.geocities.com/deg4603/profile-kyo1.jpg"
width="211" height="209" border="0" alt="Kyo-Profile"></a><a href="http://de.geocities.com/deg4603/profile-kyo.htm"
onMouseOver="Bildwechsel(0,Highlight1)"
onMouseOut="Bildwechsel(0,Normal1)"> </a> <img border="0" src="http://de.geocities.com/deg4603/profile-kyo2.jpg" width="348" height="210">
</td>
</tr> <tr>
<td>
___________________________________________________________________
edit:
Ich denke das problem ist dass ich die dynamische buttons jeweils an anderen orten benötige, nicht untereinander dh. kann ich den text nicht untereinander schreiben. und spalte den text auf
Hallo Andrea,
ohne weiter auf den Quelltext eingehen zu wollen, sollte der Scriptbereich
besser im <head> der Seite oder in einer separaten Datei angeordnet werden.
function Bildwechsel(Bildnr.,Bildobjekt) {
^
Den Punkt soltest du weglassen.
Was sagt Bildnr?
Die Nummer des Bildes, welches du wechseln willst, also das erste Bild im
Seitenquelltext = 0, das zweite = 1, ...
... <a href="http://de.geocities.com/deg4603/profile-kyo.htm"
onMouseOver="Bildwechsel(0,Highlight1)"
onMouseOut="Bildwechsel(0,Normal1)"> </a><br>
^
Du willst also das erste Bild (Nr. 0) wechseln?
<a href="http://de.geocities.com/deg4603/profile-kyo.htm"
onMouseOver="Bildwechsel(0,Highlight1)"
onMouseOut="Bildwechsel(0,Normal1)">
^
Hier willst du also auch das erste Bild wechseln.
<a href="http://de.geocities.com/deg4603/profile-kyo.htm"
onMouseOver="Bildwechsel(0,Highlight1)"
onMouseOut="Bildwechsel(0,Normal1)"> </a>
^
und hier nochmal?
Auf Wiederlesen
Detlef
Hi! hab deine antwort übersehen *tschuldigung*
eigentlich sollte es so aussehen:
__________________________________________________________________
<html>
<head>
<script type="text/javascript">
<!--
Normal1 = new Image();
Normal1.src = "button1.gif"; /* erste Standard-Grafik */
Highlight1 = new Image();
Highlight1.src = "button1h.gif"; /* erste Highlight-Grafik */
/* usw. fuer alle weiteren zu benutzenden Grafiken */
function Bildwechsel(Bildnr,Bildobjekt) {
window.document.images[Bildnr].src = Bildobjekt.src;
}
//-->
</script>
</head>
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td valign="top">
<a href="../../../index.htm"
onMouseOver="Bildwechsel(0,Highlight1)"
onMouseOut="Bildwechsel(0,Normal1)"><img src="button1.gif"
width="130" height="30" border="0" alt="Home"></a><br>
</td>
</tr>
</table>
_____________________________________________________________________
und wenn ich genau diesen text eingebe (nur mit meinen beschriftungen) werden die bilder unwillkürlich ausgetauscht.
z.b.:
beim überfahren vom zweiten button wechselt sich das bild das beim zweiten button erscheinen sollte auf einmal beim ersten auf.
wiederlesen :)
p.s: ich hoffe ich habe mich halbwegs verständlich ausgedrückt, vielleicht merkt man am ehesten was mein problem ist wenn man es auf der hp sieht http://de.geocities.com/deg4603
Hallo Andrea,
das Letzte zuerst:
p.s: ich hoffe ich habe mich halbwegs verständlich ausgedrückt, vielleicht merkt man am ehesten was mein problem ist wenn man es auf der hp sieht http://de.geocities.com/deg4603
Ich bewundere meinen Browser, dass er überhaupt etwas anzeigt.
Beschäftige dich bitte mit dem Grundgerüst einer HTML-Datei!
beim überfahren vom zweiten button wechselt sich das bild das beim zweiten button erscheinen sollte auf einmal beim ersten auf.
Nocheinmal:
Ist <img src="button1.gif"...> wirklich die erste Grafik, das erste <img> in
der Seite?
Oder ist nicht eher
<img ... src="http://de.geocities.com/deg4603/hintergrundbild.jpg" ...> das
erste?
"onMouseOver="Bildwechsel(0,Highlight1)" wechselt das erste <img> im
Quelltext, "Bildwechsel(2,Highlight2)" das zweite. Das zweite <img> ist
button1.gif beim ersten Link.
Warum ist hintergrundbild.jpg als absolut positioniertes img eingebunden,
wenn es ein Hintergrund sein soll?
PS: Dieser Hovereffekt kann auch ohne Javascript, nur mit CSS erreicht
werden.
Auf Wiederlesen
Detlef
Hi Detlef,
Grundgerüst einer HTML-Datei habe ich mich beschäftigt. Um es zu verstehen müsste ich mir mehr Zeit nehmen, die ich aber leider nicht habe :(
ich habe das bild nur hintergrundbild benannt damit ich mich auskenne, hat aber nichts mit dem hintergrund zu tun.
Quelltext, "Bildwechsel(2,Highlight2)" das zweite. Das zweite <img> ist
button1.gif beim ersten Link.
also richtet sich der "code" auf die ersten bilder die im quelltext erscheinen?
im quelltext ist glaube ich das hintergrundbild.jpg an erster stelle .. und dann kommen die buttons.
also muss ich die bilder im quelltext anders reihen damit sie dann richtig ausgetauscht werden?
nur mit CSS erreicht
werden.
wäre es mit CSS nicht leichter? ich habe diesen effekt bis jetzt nur als Java Script (befehl) gefunden
freundliche grüße
Andrea
Hallo Andrea
Grundgerüst einer HTML-Datei habe ich mich beschäftigt. Um es zu verstehen müsste ich mir mehr Zeit nehmen, die ich aber leider nicht habe :(
Wirklich?
Nicht genug Zeit, diese paar Zeilen zu verstehen?
also richtet sich der "code" auf die ersten bilder die im quelltext erscheinen?
Natürlich, was sollte BildNr auch sonst besagen?
also muss ich die bilder im quelltext anders reihen damit sie dann richtig ausgetauscht werden?
Oder in die Funktionsaufrufe die richtige Bildnummer eintragen.
wäre es mit CSS nicht leichter? ich habe diesen effekt bis jetzt nur als Java Script (befehl) gefunden
Wenn man die Grundlagen von CSS verstanden hat, ja.
Das wird dann zwar von Uraltbrowsern nicht unterstützt, kommt dafür aber
ohne Javascript aus.
Auf Wiederlesen
Detlef
hi,
vielleicht merkt man am ehesten was mein problem ist wenn man es auf der hp sieht http://de.geocities.com/deg4603
Ich bewundere meinen Browser, dass er überhaupt etwas anzeigt.
echt? ich nehme das meinem eher übel.
gruß,
wahsaga
fakt ist das etwas angezeigt wird und mehr wollte ich auch nicht erreichen :/
gruß
Andrea
Hallo Andrea
fakt ist das etwas angezeigt wird und mehr wollte ich auch nicht erreichen :/
Du wolltest nur, dass irgendetwas angezeigt wird?
Oder wolltest du, dass etwas Bestimmtes angezeigt wird?
Dass das, was angezeigt wird, dem entspricht, was du willst, ist bei diesem
Quelltext aber Zufall.
Wenn du nur willst, dass irgendetwas angezeigt wird, warum fragst du denn,
wennn etwas nicht so funktioniert, wie du es dir vorstellst?
Auf Wiederlesen
Detlef
Noch mal hallo Detlef :)
Kannst du mir vielleicht zeigen wie, oder besser gesagt wo ich die Zahlen(Beschriftungen) austauschen muss?
_ _ __ _ _ _ _ _ _ _ _ _ _ _ _ _ _ __ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Ich hätte schon sehr gerne dass es so aussieht wie ich es gerne hätte.
Verstehen tu ich nicht ganz was du meinst mit ein paar zeilen verstehen, kannst du mir die paar zeilen zeigen? ich hab mich durch den ganzen "kurs" auf selfHTML durchgelesen und verstehe nicht wirklich etwas, oder wie man merkt gar nichts. Damit ich es verstehe muss ich mich mit der Materia auseinandersetzten und das mache ich ja in dem ich an hp bastle, ich hoffe so dazuzulernen und nicht durch strenges durchlesen (was mir anscheinend nicht liegt)
Wenn sich aber jemand die Zeiten nimmt um mir die Grundregeln aufschreibt,wäre ich dankbar :)
danke für deine hilfe
p.s: früher hatte ich eine homepage bei beepworld (ich glaube ich muss nicht sagen wie browser verträglich diese seite war). Ich arbeite erst seid 2 Monaten ca. mit eigenem HTML bei geocities.
Hallo Andrea
Kannst du mir vielleicht zeigen wie, oder besser gesagt wo ich die Zahlen(Beschriftungen) austauschen muss?
Schreibe doch einfach in den Aufruf der Funktion Bildwechsel als Bildnr den
richtigen Index des Bildes, welches du wechseln willst.
Bildwechsel(0,Highlight1)
^
Hiermit wechselst du das erste Image im Quelltext.
Wenn du das zweite wechseln willst, muss hier eine 1 stehen.
Verstehen tu ich nicht ganz was du meinst mit ein paar zeilen verstehen, kannst du mir die paar zeilen zeigen?
Ich meinte genau das, was ich dir verlinkt habe: Grundgerüst einer HTML-Datei.
Dort stehen nur ein paar Zeilen und ein Beispiel, wie das Grundgerüst einer
HTML-Seite aussieht.
Dort fügst du zwischen <head> und </head> auch den Javascriptbereich ein.
Alle sichtbaren Inhalte, alle Texte, Bilder, Links usw. gehören dann
zwischen <body> und </body>.
ich hab mich durch den ganzen "kurs" auf selfHTML durchgelesen und verstehe nicht wirklich etwas, oder wie man merkt gar nichts. Damit ich es verstehe muss ich mich mit der Materia auseinandersetzten und das mache ich ja in dem ich an hp bastle, ich hoffe so dazuzulernen und nicht durch strenges durchlesen (was mir anscheinend nicht liegt)
Wenn sich aber jemand die Zeiten nimmt um mir die Grundregeln aufschreibt,wäre ich dankbar :)
Das hat Stefan doch mit Selfhtml getan.
Wenn du auf deiner Seite ein Element verwenden möchtest, dann rufst du
einfach die Seite HTML-Elementreferenz auf, klickst auf das betreffende
Element oder suchst es selbst in der Tabelle heraus. Dort kannst du dann
nachlesen, in welchen Elementen es vorkommen darf und welche anderen
Elemente es enthalten darf.
Genauso kannst du auf der Seite HTML-Attributreferenz nachlesen, welche
Attribute das Element enthalten darf, und welche Bedeutung diese haben.
Auf Wiederlesen
Detlef
»»Schreibe doch einfach in den Aufruf der Funktion Bildwechsel als Bildnr den
richtigen Index des Bildes, welches du wechseln willst.
Bildwechsel(0,Highlight1)
^
Hiermit wechselst du das erste Image im Quelltext.
Wenn du das zweite wechseln willst, muss hier eine 1 stehen.
Ich weiß jetzt wo das Problem ist... im original Text wir das da
Normal1 = new Image();
Normal1.src = "button1.gif"; /* erste Standard-Grafik */
Highlight1 = new Image();
Highlight1.src = "button1h.gif"; /* erste Highlight-Grafik */
als erste Grafik gehandhabt ...
deswegen steht da eine null ..
<a href="../../../index.htm"
onMouseOver="Bildwechsel(0,Highlight1)"
onMouseOut="Bildwechsel(0,Normal1)">
aber bei mir zählt er diese angabe nicht als bild, er überspringt es, deshalb geht er davon aus das <img .... hintergrundbild.jpg> 0 ist. ich versuch einmal wenn ich das obrige als <img> hinschreibe ob es dann funkt. das wäre halt nicht die lösung weil dann sieht man das bild auf der homepage :/
lg
andrea
Ich hab den Fehler :)
Es funktioniert ... endlich!
danke für deine Hilfe!
p.s.: ich hoffe dass der quelltext jetzt richtig ist ? :)
lg
Andrea
Ich versteh jetzt wie es funktioniert dass die richtigen Bilder ausgetauscht werden.
Ich verstehe aber nicht warum
Normal1 = new Image();
Normal1.src = "button1.gif"; /* erste Standard-Grafik */
Highlight1 = new Image();
Highlight1.src = "button1h.gif"; /* erste Highlight-Grafik */
nicht als bild im quelltext mitgelesen wird :/
so sieht es dezeit aus http://de.geocities.com/deg4603
hintergrundbild.jpg hab ich absichtlich weg gelassen
(habe den quelltext ein wenig geordnet :) )
hi,
Ich versteh jetzt wie es funktioniert dass die richtigen Bilder ausgetauscht werden.
Ich verstehe aber nicht warumNormal1 = new Image();
Normal1.src = "button1.gif"; /* erste Standard-Grafik */
Highlight1 = new Image();
Highlight1.src = "button1h.gif"; /* erste Highlight-Grafik */
weil du damit nur javascript-bildobjekte erzeugst, weshalb aber natürlich noch lange nicht entsprechende image-objekte im dokumentbaum der seite existieren.
gruß,
wahsaga