Mouseover Problem [HTML / Javascript]

Annmey · 13.04.2012

Hi,

Ich habe ein Problem mit meinem Mouseover.
Die ganze Website habe ich in Dreamweaver erstellt und habe dort auch einen Mouseover Effekt eingebaut, der allerdings via Javascript und nicht via CSS funktioniert.

Allerdings kann man dort nur den Normalzustand und den Over Zustand einstellen. Ich allerdings möchte noch einen Aktiven Zustand dazu haben.
Sprich, wenn man auch einer Unterseite ist, dass der betreffende Button aktiv ist.

Wie geht das? - Denn ich habe in Dreamweaver (CS5) nichts gefunden.

Nebenbei; Ginge das ganze auch via CSS?
Dass ich gar nicht auf Javascript zurück greifen muss?
Ich habe hier im Forum schon gelesen, dass das via Klassen funktioniert.
Ich habe dass dann auch mal versucht, habe es aber nicht hinbekommen.

Ich habe das in den Container eingefügt:

Code:

<img src="images/navi_normal.png" width="95" height="47" alt="Home" />

Und das hier ins CSS:

Code:

Code:
.home {
width:95px;
height:47px;
border:none;
background:transparent url(images/navi_normal.png);
}

.home:hover {
background:transparent url(images/navi_over.png)
}

.home:active {
background:transparent url(images/navi_pressed.png)
}

Hm.
In dem CSS den ich hier habe, habe ich aber auch bisher nur IDs gehabt und keine Klassen. (Ehrlich gesagt, weiß ich auch nicht sooo besonders viel damit anzufangen)

Könnt ihr mir helfen?

Gruß,
Mey

simonpicos · 13.04.2012

AW: Mouseover Problem [HTML / Javascript]

Du gibst dem Link der die aktuelle Seite anzeigt immer eine zusätzliche Klasse. z.B.

HTML:

<a href="home.html">Home</a>
<a href="ueber-mich.html" class="active">Über mich</a> [B]← Das ist die aktuell aktive Seite[/B]
<a href="kontakt.html">Kontakt</a>

und im CSS-Code kannst du dann für die entsprechende Klasse deine eigenschaften definieren.

Code:

.active{
bla: blub;
}

Die Klasse .active musst du dann bei jeder Seite auf den jeweiligen Link anwenden.

Waegi · 13.04.2012

AW: Mouseover Problem [HTML / Javascript]

Irgendwie komisch, du gibst zweimal das Bild navi_normal.png an, einmal im HTML als Bild in dem Bereich und einmal im CSS als Background, das kann nicht ganz passen. In dem CSS-Code verwendest du zur Zeit ja nur Klassen, da du alles mit dem Punkt ansprichst, wäre gut, wenn man mal den HTML-Code zu der Navigation hätte, also den Gesamten Code der Navigation.

mfg Waegi

Annmey · 13.04.2012

AW: Mouseover Problem [HTML / Javascript]

@simonpicos: Hm, aber mit der active klasse, die ich dann einfügen würde, könnte ich jeweils nur einen zustand beschreiben, oder?
Ich meine; Jede Seite hat ihren eigenen Hoher & Pressed Button. Aber ich hätte dann nur einen zustand..
Verstehst du was ich meine? :eek:

Oder wie meintest du das?

@Waegi:

Also der Code der Navi ist folgender:

Code:

<div id="navigation"> 
<a href="index.html"><img src="images/home_normal.png" width="87" height="47" alt="Home" /></a>
<a href="news.html"><img src="images/news_normal.png" width="77" height="47" alt="News" /></a>
<a href="musik.html"><img src="images/musik_normal.png" width="83" height="47" alt="Musik" /></a>
<a href="kunst.html"><img src="images/kunst_normal.png" width="86" height="47" alt="Kunst" /></a>
<a href="bistro.html"><img src="images/bistro_normal.png" width="91" height="47" alt="Bistro" /></a>
<a href="umwelt.html"><img src="images/umwelt_normal.png" width="101" height="47" alt="Umwelt" /></a>
<a href="goodies.html"><img src="images/goodies_normal.png" width="106" height="47" alt="Goodies" /></a>
<a href="kontakt.html"><img src="images/kontakt_normal.png" width="108" height="47" alt="Kontakt" /></a>
<a href="infos.html"><img src="images/infos_normal.png" width="80" height="47" alt="Infos" /></a>
<a href="impressum.html"><img src="images/impressum_normal.png" width="131" height="47" alt="Impressum" /></a>
</div>

Vorher sah der ein wenig anders aus. Ich habe das Javascript für den Mouseover Effekt mal heraus genommen.
Ich hoffe, dass ich beides (mouseover & active) via css definieren könnte.~

simonpicos · 13.04.2012

AW: Mouseover Problem [HTML / Javascript]

Also dein html-code ist so ziemlicher Murks..
Ein Hintergrundbild für deinen Link definierst du so:

HTML:

<a href="bla.html">Linktext</a>

Code:

a{
background-image: url(verzeichnis/bild.jpg);
}

Also du möchtest für jeden Link ein individuelle Eigenschaften? Dann musst du für jeden Link eine eigene ID vergeben. Das muss dann so aussehen

HTML:

<ul id="navigation"> 
    <li><a href="index.html" id="link-home"></a></li>
    <li><a href="news.html" id="link-news"></a></li>
    <li><a href="musik.html" id="link-musik"></a></li>
    <li><a href="kunst.html" id="link-kunst"></a></li>
    <li><a href="bistro.html" id="link-bistro"></a></li>
    <li><a href="umwelt.html" id="link-umwelt"></a></li>
    <li><a href="goodies.html" id="link-goodies"></a></li>
    <li><a href="kontakt.html" id="link-kontakt"></a></li>
    <li><a href="infos.html" id="link-infos"></a></li>
    <li><a href="impressum.html" id="link-impressum"></a></li>
</ul>

Ich habe deine Navigation auhc etwas umgestellt. Navigationen löst man mit Listen, die du dann in der CSS via

Code:

ul#navigation li{
    display: inline-block;
}

nebeneinander anordnen kannst.

Du kannst jetzt folgendermaßen für jeden Link sigene Eigenschaften definieren:

Code:

a#link-musik{
    background-image: url(bild-musik.jpg);
}

a#link-musik:hover{
    background-image: url(bild-musik-hover.jpg);
}

a#link-musik:active{
    background-image: url(bild-musik-active.jpg);
}

Annmey · 13.04.2012

AW: Mouseover Problem [HTML / Javascript]

Ich habe das nun so gemacht wie du sagtest und habe auch das CSS so entsprechend angepasst, aber da wird mir nur das hier angezeigt:

Die Punkte, wie ich sie aus der ungeordneten Liste kenne.
Aber keinerlei Navi Bilder oder etwaiges... :/

simonpicos · 13.04.2012

AW: Mouseover Problem [HTML / Javascript]

Das Bild sagt mir nicht viel.. Hast du nen Webspace? Dann lads doch mal hoch.

Wenn du noch keinen hast, kannst du dir auch schnell einen anlegen bei nem freehoster wie bplaced.net.

Dort dann einfach mal deine daten via Filezilla hochladen.

Dann sehen wir deine site "in Echt" und können dir besser helfen

Wenns fragen gibt, einfach fragen

Annmey · 13.04.2012

AW: Mouseover Problem [HTML / Javascript]

->

simonpicos · 13.04.2012

AW: Mouseover Problem [HTML / Javascript]

Also zuerst einmal haben dein div um die ul in der navi und die ul selbst die selbe ID.. Das geht nicht, IDs können nur einmalig vergeben werden.

Dann hast du gar keinen Text in deinen Ankern/Links der angezeigt werden könnte.
Außerdem scheinen deine Bilder (die hintergrundbilder der links) nicht auf dem server zu liegen, bzw sie sind falsch verlinkt.

edit: oh, hehe, ich hab meinen 4. Stern bekommen

*__*

Annmey · 13.04.2012

AW: Mouseover Problem [HTML / Javascript]

Dass die Navi ul die Selbe ID tragen, habe ich gerade schon bemerkt und geändert

Ich hab's mal neu hochgeladen & jetzt ist die Navigation in einer Reihe, allerdings noch immer ohne Bild.
Obwohl ich sie mit verlinkt habe und auch hochgeladen habe..

Eventuell zickt sich da was im CSS gegenseitig in die Karten? :eek:

Siehe da:

Code:

@charset "UTF-8";

#hauptcontainer {
	height: 1000px;
	width: 1000px;
	margin: auto;
	
	-webkit-box-shadow: 0px 0px 100px 5px rgba(50, 50, 50, 30);
-moz-box-shadow: 0px 0px 100px 5px rgba(50, 50, 50, 30);
box-shadow: 0px 0px 100px 5px rgba(50, 50, 50, 30);

	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	padding: 7px;
}

#innenflaeche {
	margin: 20px;
	height: 950px;
	width: 950px;
	border: thick solid #7FBC43;
	
	-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

}
#header {
	height: 247px;
	width: 950px;
}
#textbereich {
	float: right;
	height: 655px;
	width: 375px;
	margin-right: auto;
}
#navi {
	height: 47px;
	width: 950px;
}
#content {
	height: 656px;
	width: 950px;
}
#medienbereich {
	height: 655px;
	width: 575px;
	float: left;
	margin-left: auto;
}
#text {
	height: 635px;
	width: 360px;
	padding: 10px;
	font-family: Arial, Helvetica, sans-serif;
}
#medien {
	height: 635px;
	width: 550px;
	padding: 10px;
	margin-right: auto;
}


ul#navigation li{
    display: inline-block;
}

a#link-home{
    background-image: url(images/home_normal.png);
}

a#link-home:hover{
    background-image: url(images/home_over.png);
}

a#link-home:active{
    background-image: url(images/home_pressed.png);
}

a#link-news{
    background-image: url(images/news_normal.png);
}

a#link-news:hover{
    background-image: url(images/news_over.png);
}

a#link-news:active{
    background-image: url(images/news_pressed.png;
}

a#link-musik{
    background-image: url(images/musik_normal.png);
}

a#link-musik:hover{
    background-image: url(images/musik_over.png);
}

a#link-musik:active{
    background-image: url(images/musik_pressed.png;
}

a#link-kunst{
    background-image: url(images/kunst_normal.png);
}

a#link-kunst:hover{
    background-image: url(images/kunst_over.png);
}

a#link-kunst:active{
    background-image: url(images/kunst_pressed.png;
}

a#link-bistro{
    background-image: url(images/bistro_normal.png);
}

a#link-bistro:hover{
    background-image: url(images/bistro_over.png);
}

a#link-bistro:active{
    background-image: url(images/bistro_pressed.png;
}

a#link-umwelt{
    background-image: url(images/umwelt_normal.png);
}

a#link-umwelt:hover{
    background-image: url(images/umwelt_over.png);
}

a#link-umwelt:active{
    background-image: url(images/umwelt_pressed.png;
}

a#link-goodies{
    background-image: url(images/goodies_normal.png);
}

a#link-goodies:hover{
    background-image: url(images/goodies_over.png);
}

a#link-goodies:active{
    background-image: url(images/goodies_pressed.png;
}

a#link-kontakt{
    background-image: url(images/kontakt_normal.png);
}

a#link-kontakt:hover{
    background-image: url(images/kontakt_over.png);
}

a#link-kontakt:active{
    background-image: url(images/kontakt_pressed.png;
}

a#link-infos{
    background-image: url(images/infos_normal.png);
}

a#link-infos:hover{
    background-image: url(images/infos_over.png);
}

a#link-infos:active{
    background-image: url(images/infos_pressed.png;
}

a#link-impressum{
    background-image: url(images/impressum_normal.png);
}

a#link-impressum:hover{
    background-image: url(images/impressum_over.png);
}

a#link-impressum:active{
    background-image: url(images/impressum_pressed.png;
}

simonpicos · 13.04.2012

AW: Mouseover Problem [HTML / Javascript]

Also die Verlinkung der Bilder scheint immer noch nicht so ganz zu stimmen. Stimmt das Verzeichnis? Ich hab keinen Zugriff auf deine Ordnerstruktur, daher kann ich dazu wenig sagen.

Und könntest du dann mal schauen, ob deine CSS-Datei auf dem aktuellsten Stand ist? Weil laut Firebug geht sie nur bis #link-home..

edit: komisch, wenn ich mir die css-datei anschaue ist eigentlich alles drin.. *confused*

kannst du mal überprüfen ob du alle klammern } geschlossen hast? das könnte nämlich erklären warum die eigenschaften der restlichen links nicht eingelesen werden..

Ernasina · 13.04.2012

AW: Mouseover Problem [HTML / Javascript]

Vllt hast du auch nen ; dort vergessen.

Annmey · 13.04.2012

AW: Mouseover Problem [HTML / Javascript]

Ich hab's mal aktualisiert, und die { & } und ; geprüft, aber die scheinen alle da zu sein, wo sie hin sollen.
Die Verlinkung passt eigentlich auch.

Die Namen und der Ordner stimmt. Ist auch alles klein geschrieben & ohne umlaute..

Ich versteh's nicht.. :/

simonpicos · 13.04.2012

AW: Mouseover Problem [HTML / Javascript]

Schau mal bitte in deine PNs, hab dir was geschrieben..

simonpicos · 13.04.2012

AW: Mouseover Problem [HTML / Javascript]

Jo, Problem gefunden. Du hast die CSS in nem eigenen Ordner liegen. Dieser und der images Ordner liegen im Stammverzeichnis. Das heißt du musst erstmal aus deinem CSS-ordner rausnavigieren um an den images odrner zu kommen. das ganze sieht dann so aus:

Code:

background-image: url(../images/bistro_normal.png);

außerdem solltest du nochmal alle verweise durchgehen, bei manchen fehlt die Klammer zu )..

Annmey · 13.04.2012

AW: Mouseover Problem [HTML / Javascript]

Aaaaaaahhhhhhh!

Jau stimmt! Darauf habe ich nicht geachtet.. DANKE dir!

Allerdings habe ich jetzt ein neues "Problem".

Wenn ich jetzt auf die Page gehe , dann ist die Navigation noch immer nicht wie sie sein sollte.
Ich habe ja die Leiste mit den Buttons so gestaltet, dass sie komplett ausfüllend in die Reihe passt.
Hier hinterlegt es allerdings nur die Links selbst...

Und kann ich nicht statt den Links (also den geschriebenen) die regelrechten Bilder dort als Buttons definieren, oder geht das nur so? :eek:

simonpicos · 13.04.2012

AW: Mouseover Problem [HTML / Javascript]

Das geht, jedoch ist das aus SEO-Gründen nicht zu empfehen, den Text komplett wegzulassen. Du kannst stattdessen den text mit

Code:

text-indent: -99999px;

quasi rausschieben..

Und damit das Bild komplett angezeigt wird musst du die Links als blockelement definiern und die entsprechende Höhe und Breite der Hintergrundbilder angeben..

Annmey · 13.04.2012

AW: Mouseover Problem [HTML / Javascript]

Super! Auch das hat funktioniert!

Allerdings sind zwischen den einzelnen Buttons Abstände.
Hast du 'ne Idee wie ich das wegbekomme?

simonpicos · 13.04.2012

AW: Mouseover Problem [HTML / Javascript]

Jep habe ich. Du solltest vielleicht ganz am Anfang deiner CSS einen universalreset machen, der alle browsereigenen abstände löscht:

Code:

*{
margin: 0;
padding: 0;
}

Das sind allerings die grundlegensten Sachen in CSS.. VIelleicht solltest du, bevor du weiter solche Fragen stellst, die eigentlich grundlagen sind, dir nochmal ein bisschen Lektüre in Sachen CSS und HTML grundlagen reinziehen..

http://little-boxes.de/little-boxes-teil1-online.html
http://jendryschik.de/wsdev/einfuehrung/

Annmey · 13.04.2012

AW: Mouseover Problem [HTML / Javascript]

Ich weiß. Und ich danke dir, dass du es trotzdem beantwortest.

Das musste nur jetzt alles ein wenig schneller gehen, da das Ding Montag fertig sein soll und ich außer Dreamweaver nur ziemlich wenig weiß. ^^°
Die haben uns in der Schule gesagt, wir sollen uns nach dem hier richten -> http://de.html.net/

Ich hab' mir die Links direkt abgespeichert!

Ich habe das nun so eingerichtet, wie du's mir gesagt hast, habe aber nun die Navigation dort sitzen, wo ich sie haben will~
(Allerdings waren danach noch immer Abstände zwischen den Buttons.. ich hab' die Liste dann in eine Reihe geschoben und danach saß es dann wie's sollte!

)

Ich kann dir wirklich nicht genug danken!

<3