[JS] MouseOver

gamefreak · 11 Februar 2007

HalliHallo
also ich bin gerade dabei einen simplen Mouseover in eine Seite einzubauen, jedoch klappt das nicht so richtig. Orientieren tue ich mich an den Vorgaben von selfhtml, da ich JS nicht behersche.
https://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=mouseover

Vielleicht kann mir einer helfen meinen Fehler zu finden, auf jedenfall wird kein Mouseover erzeugt,
folgenden Code habe ich im Header eingebunden

Code:

<script type="text/javascript">
    Normal1 = new Image();
	Normal1.src = "img/b_startseite.gif";
	Highlight1 = new Image();
	Hightligh1.src = "img/b2_startseite.gif";

	Normal2 = new Image();
	Normal2.src = "img/b_zertifikationen.gif";
	Highlight2 = new Image();
	Highlight2.src ="img/b2_zertifikationen.gif";

	Normal3 = new Image();
	Normal3.src = "img/b_referenzen.gif";
	Hightlight3 = new Image();
	Hightlight3.src ="img/b2_referenzen.gif";

	Normal4 = new Image();
	Normal4.src = "img/b_meinungen.gif";
	Highlight4 new Image();
	Highlight4.src = "img/b2_meinungen.gif";

	Normal5 = new Image();
	Normal5.src = "img/b_kontakt.gif";
	Hightlight5 = new Image();
	Highlight5.src = "img/b2_kontakt.gif";

	Normal6 = new Image();
	Normal6.src = "img/b_impressum";
	Highlight6 = new Image();
	Highlight6.src = "img/b2_impressum.gif";

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

für das Menü habe ich dann angefangen zu testen ob es so überhaupt klappt, dafür habe ich folgenden Code in der Navigation

Code:

 <!-- Navigation //-->
    <br>
	<a href="index.php" target=""
    onmouseover="Bildwechsel(0, Highlight1)"
    onmouseout="Bildwechsel(0, Normal1)"
	<img src="img/b_startseite.gif"	border="0" alt="Startseite">
	</a><br>

Ich wäre euch dankbar wenn mir hierbei jemand helfen könnte.
Mfg Gamefreak

theHacker · 11 Februar 2007

Die Funktion ist nicht abgeschlossen. Die Klammer fehlt.

Abgesehen davon: Sicher, dass du dich dafür auf JS verlassen willst ? :roll:

Mit CSS geht das einfacher und - solange du es nur für Links machst - funktioniert es auch im IE ohne Probleme.

gamefreak · 11 Februar 2007

Hab das nun geändert jedoch klappt es immer noch nicht.. :-?

Wollte es mit JS machen weil ich ja mehrere Bilder der Buttons habe.

scriper · 11 Februar 2007

gamefreak schrieb:
Hab das nun geändert jedoch klappt es immer noch nicht..
Wollte es mit JS machen weil ich ja mehrere Bilder der Buttons habe.

Auch dann spricht nix gegen CSS.

Und man kanns auch im IE nutzen @ th, mit nem kleinen trick.

theHacker · 11 Februar 2007

scriper schrieb:
@ th, mit nem kleinen trick.

Was fürn Trick ? :hö:

Wenn ich

Code:

div:hover { font-weight: bold; }

mache, sch***t mir der IE was :-?

finswimmer · 11 Februar 2007

theHacker schrieb:
Was fürn Trick ?

Du musst dafür sorgen, dass das was gehovert wird ein a-Tag hat.

Also z.B.
<a href="#" class="bild"></a>

und dann kannst du a.bild:hover formatieren.

Tschau

tobias

PS: Oder du verzichtest darauf, das IE<7 es richtig anzeigen kann und bist somit zukunftsorientiert :ugly:

gamefreak · 11 Februar 2007

hättet ihr für mich ein Beispiel wie ich das dann mit css machen kann? google zwar schon eine Weile aber so richitg steige ich nicht durch.
Habe Beispiele gefunden wo Mouseover für alle Links erzeugt werden, aber das möchte ich ja nicht, sondern nur für meine Menüleiste und dies mit Hilfe von 2 Bildern.

scriper · 11 Februar 2007

theHacker schrieb:
Was fürn Trick ?

Wenn ich

Code:

div:hover { font-weight: bold; }

mache, sch***t mir der IE was

mom ich suchs grad raus...

Edit:

HTML:

HTML:

<div id="button"><a href="link.html">Link</a></div>

CSS:

HTML:

div#button a{
    width: 161px;
    height: 27px;
    background-color: red;
    text-align: center;
    line-height: 27px;
    font-size: 16px;
    font-family: Arial black, Helvetica, sans-serif;
    text-decoration: none;
    display: block;
}

div#button a:hover{
    width: 161px;
    height: 27px;
    background-color: green;
    text-align: center;
    line-height: 27px;
    font-size: 16px;
    font-family: Arial black, Helvetica, sans-serif;
    text-decoration: none;
    display: block;
}

finswimmer · 11 Februar 2007

gamefreak schrieb:
hättet ihr für mich ein Beispiel wie ich das dann mit css machen kann?

<a href="#" id="link1"></a>

a#link1 { als Block formatieren;
breite und höhe angeben;
bild als hintergrundbild einfügen;
}

a#link1:hover { hover-bild als hintergrundbild einfügen; }

scriper · 11 Februar 2007

besonders das display:block ist zu beachten, damit es auch im IE geht.

gamefreak · 11 Februar 2007

finswimmer schrieb:
<a href="#" id="link1"></a>

a#link1 { als Block formatieren;
breite und höhe angeben;
bild als hintergrundbild einfügen;
}

a#link1:hover { hover-bild als hintergrundbild einfügen; }

wäre es dann so richtig?

CSS

Code:

a:hover {  color: #990000; text-decoration: underline; font-size: 10px; font-weight: bold; }
a:link {  color: #990000; text-decoration: none; font-size: 10px; font-weight: bold; }
a:visited {  color: #990000; text-decoration: none; font-size: 10px; font-weight: bold; }
a:active {font-weight: normal; color: #606060; text-decoration: none; font-size: 10px; }
a:active:hover {  color: #606060; text-decoration: underline; font-size: 10px; font-weight: bold; }
a:visited:hover {  color: #606060; text-decoration: underline; font-size: 10px; font-weight: bold; }
a#link1 { 	display: block;
			widht: 117px;
			hight: 14px;
			background-image : url(img/b_startseite.gif);
		}
a#link1:hover 	{ background-image : url(img/b2_startseite.gif);
				}

und html

HTML:

<a href="startseite.php" id="link1"></a>

:.EDIT.:
Also der Mouseover klappt, nur hat es mir gerade mein Menü zerschossen, hab die Buttons jetzt doppelt nebeneinander und ungewollte zeilenumbrüche -.-

finswimmer · 11 Februar 2007

Hallo,
sieht soweit erst mal richtig aus.
Den ungewollten Zeilenumbruch hast du wahrscheinlich, weil du hinter jedem <a ...></a> noch ein <br> hast? Durch das display:block wird nach dem Element jedoch schon en Zeilenumbruch erzeugt.

Was die doppelten Buttons angeht, müsste man in den HTML-Code gucken. Hast du nicht mal nen Link zu der Seite?

Tschau

tobias

strolch00 · 11 Februar 2007

Den zeilenumbruch kannst du mit float: left; wegbekommen.

gamefreak · 11 Februar 2007

Der Server ist gerade down, warum auch immer. Aber bei all-inkl geht das ja immer fix

adresse ist
www.rh-bauelemente.de

Bisher versuche ich erstmal den ersten Link zum laufen zu bringen, die anderen sind dann ja nicht das Prob.
Wäre euch sehr dankbar wenn ihr mir sagt wo der/die Fehler sind.

:.EDIT.:
Damit der Link überhaupt angezeigt wird muss ich den Link mit mind. 1 Symbol angeben, sonst zeigt er mir gar nichts an

<a href="index.php" id="link1" target="">.</a>

strolch00 · 11 Februar 2007

Das eine zeichen kannst du auch mit imitieren das ist ein erzwungenes Freizeichen, müsste also klappen.

finswimmer · 12 Februar 2007

Argh,
hab über deinen Quelltext etwas zu schnell drüber gelesen.

Code:

a#link1 { 	display: block;
			widht: 117px;
			hight: 14px;
			background-image : url(img/b_startseite.gif);
		}

Das heißt width und height. Dadurch dass du es falsch geschrieben hast, gibt es für ihn keine Breitenangabe und das Element wird anscheinend auf die maximale breite ausgedehnt. Da das Hintergrundbild automatisch wiederholt wird, siehst du die Schaltflächen doppelt.

Also Rechtschreibfehler beseitigen und bei bedarf auch noch background-repeat angucken.

Tschau

tobias

PS: Der Validator hat auch noch einiges zu meckern.

perlini · 12 Februar 2007

gamefreak schrieb:
:.EDIT.:
Damit der Link überhaupt angezeigt wird muss ich den Link mit mind. 1 Symbol angeben, sonst zeigt er mir gar nichts an

<a href="index.php" id="link1" target="">.</a>

Sollte aber nicht der Fall sein, da du ja eine Breite und Höhe angibst.

Und im Sinne der Barrierfreiheit und für Suchroboter würde ich eh den Linktext angeben. Sprich

Code:

<a href="index.php" id="link1"><span>Startseite</span></a>

Und in den styles den Text dann ausblenden

a span{display:none}

gamefreak · 12 Februar 2007

peinlich peinlich....ist nicht das erste mal das ich die beiden falsch schreibe...

vielen vielen Dank für deine/eure Hilfe, echt TOP!!!!

[JS] MouseOver

gamefreak

Active member

theHacker

sieht vor lauter Ads den Content nicht mehr

gamefreak

Active member

scriper

Eta Capricorni

theHacker

sieht vor lauter Ads den Content nicht mehr

finswimmer

Well-known member

gamefreak

Active member

scriper

Eta Capricorni

finswimmer

Well-known member

scriper

Eta Capricorni

gamefreak

Active member

finswimmer

Well-known member

strolch00

redraft.de

gamefreak

Active member

strolch00

redraft.de

finswimmer

Well-known member

perlini

Antifaschist

gamefreak

Active member