Probleme mit Self HTML Java Buttons

sonnenpriester · #1 (**permalink**) 27.12.2009, 19:27

Hallo zusammen,

ich habe ein ziemliches Problem, was Javascript Buttons angeht und da ich mit meinem Latein langsam am ende bin, dachte ich ich frag mal hier nach ...
Folgendes: Ich wollte einfach eine Buttonleiste auf der linken Seite meiner Website erstellen und beim Mouseover die Grafik ändern ... allerdings funktioniert der Selfhtml code nicht so wie ich gehofft hatte ...

anstatt die Grafiken der einzelnen Buttons aus zu tauschen, tauscht er die Titelgrafik aus !!! Ich vermute der Fehler liegt in der Funktion, die die Bilder tauscht aber da ich von Javascript so gar keine Ahnung habe weiß ich nicht was ich verändern muss ...

Bilder:

vorher

nacher

ich hoffe ihr könnt mir helfen ... hier der Code:

HTML-Code:

<script type="text/javascript">
Normal1 = new Image();
Normal1.src = "../Bilder/Buttons/Home_Norm.png";     /* erste Standard-Grafik */
Highlight1 = new Image();
Highlight1.src = "../Bilder/Buttons/Home_Over.png"; /* erste Highlight-Grafik */

Normal2 = new Image();
Normal2.src = "../Bilder/Buttons/Video_Norm.png";     /* zweite Standard-Grafik */
Highlight2 = new Image();
Highlight2.src = "../Bilder/Buttons/Video_Over.png"; /* zweite Highlight-Grafik */

Normal3 = new Image();
Normal3.src = "../Bilder/Buttons/3D_Norm.png";     /* dritte Standard-Grafik */
Highlight3 = new Image();
Highlight3.src = "../Bilder/Buttons/3D_Over.png"; /* dritte Highlight-Grafik */

Normal4 = new Image();
Normal4.src = "../Bilder/Buttons/Flash_Norm.png";     /* vierte Standard-Grafik */
Highlight4 = new Image();
Highlight4.src = "../Bilder/Buttons/Flash_Over.png"; /* vierte Highlight-Grafik */

Normal5 = new Image();
Normal5.src = "../Bilder/Buttons/Me_Norm.png";     /* fuenfte Standard-Grafik */
Highlight5 = new Image();
Highlight5.src = "../Bilder/Buttons/Me_Over.png"; /* fuenfte Highlight-Grafik */

/* usw. fuer alle weiteren zu benutzenden Grafiken */

function Bildwechsel (Bildnr, Bildobjekt) {
  window.document.images[Bildnr].src = Bildobjekt.src;
}
</script>

HTML-Code:

<div id="Navigation">
            	
           		<table width="150" border="0" cellspacing="0" cellpadding="0">
 					<tr>
    					<td><img href="index.htm" id="Buttons"
                			onmouseover="Bildwechsel(0, Highlight1)" 
                			onmouseout="Bildwechsel(0, Normal1)"
               				src="../Bilder/Buttons/Home_Norm.png" alt="Home"/></td>
  					</tr>
  					<tr>
    					<td><img href="Video.htm" id="Buttons"
                    		onmouseover="Bildwechsel(0, Highlight2)" 
                			onmouseout="Bildwechsel(0, Normal2)"
                			src="../Bilder/Buttons/Video_Norm.png" alt="Video"/></td>
  					</tr>
  					<tr>
    					<td><img href="3D.htm" id="Buttons"
                			onmouseover="Bildwechsel(0, Highlight3)" 
                			onmouseout="Bildwechsel(0, Normal3)"
                			src="../Bilder/Buttons/3D_Norm.png" alt="3D"/></td>
  					</tr>
  					<tr>
    					<td><img href="Flash.htm" id="Buttons"
                			onmouseover="Bildwechsel(0, Highlight4)" 
                			onmouseout="Bildwechsel(0, Normal4)"
                			src="../Bilder/Buttons/Flash_Norm.png" alt="Flash"/></td>
  					</tr>
  					<tr>
    					<td><img href="Me.htm" id="Buttons"
                			onmouseover="Bildwechsel(0, Highlight5)" 
                			onmouseout="Bildwechsel(0, Normal5)"
                			src="../Bilder/Buttons/Me_Norm.png" alt="AboutMe"/></td>
  					</tr>
				</table>
                
        	</div>

uspri · #2 (**permalink**) 27.12.2009, 19:32

Sowas macht man nicht mit JS, dafür nimmt man CSS. Mach Dich mal hier schlau: :hover: Mouseover-Effekt: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

sonnenpriester · #3 (**permalink**) 27.12.2009, 19:45

Danke erstmal ...
so hatte ich es bereits ausprobiert aber anscheinend falsch ... ich dachte immer damit kann man nur Text beeinflussen ... aber gut ich werde es ausprobieren ...

edit:

Ja super jetzt hats gefunzt ... aber wie mache ich das, dass ich in das <a> Tag nichts schreiben muss ??? ich hab es jetzt mit
Buchstaben ausprobiert ... aber die machen sich vor meinen Bildern als Buttons natürlich sehr schlecht !

uspri · #4 (**permalink**) 27.12.2009, 21:23

Sogenanntes Imagereplacement wäre sehr geeignet dafür. Eine gute Methode ist z.B. die hier: Übersicht: Image-Replacement-Techniken ? Artikel von Jens Meiert ansonsten einfach mal Google fragen.

sonnenpriester · #5 (**permalink**) 28.12.2009, 16:16

sorry, aber irgendwie bringt mich das nicht weiter ... da wird nur erklärt wie man aus ner Überschrift eine Überschrift mit Bild macht so wie ich das verstanden habe ... aber ich möchte ja, so wie ich das verstehe im moment,
ein Hintergrundbild gegen ein anderes tauschen ...

was ich nicht verstehe ist, dass sich bei mir jetzt zwar das hintergrundbild vertauscht ABER das :hover hintergrund bild weiter unten ist als das andere und dadurch von den anderen Buttons abgeschnitten wird ... mit margin und padding wird man auch nix an der Stelle ... ich fang langsam an zu verzweifeln ... mit Flash würd ich das ganze in 2 Minuten fertig haben aber ich will für diese Seite kein Flash benutzen !!!

hier bilder über die aktuelle Lage:

sonnenpriester · #6 (**permalink**) 28.12.2009, 16:29

hab das Problem ENDLICH gelöst indem ich ein display:block benutzt habe !!!!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[XHTML] HTML Kompatibilitätsrichtlinen 2.0a1	gato	(X)HTML	9	18.11.2007 12:28
Layout - footer und layer[links] - Probleme - (CSS-Anfänger)	Basti_LRT	CSS	1	08.10.2007 22:03
HTML Probleme mit die()	MPDT	Serveradministration und serverseitige Scripte	10	28.08.2007 01:22
Problem mit Buttons / Hintergrund - Felder verschieben!?	Hisky	CSS	3	10.05.2005 20:42
HTML --> XHTML = Probleme	Dorsk51	(X)HTML	2	09.09.2004 16:36