Hallo, Gast! (Registrieren)

Letzte Ankündigung: MyBB 1.8.38 veröffentlicht (30.04.24)


Benutzer, die gerade dieses Thema anschauen: 3 Gast/Gäste
CSS | Mousover Button
#1
Moin.

Ich habe folgendes Problem.
Ich habe 2 Buttons erstellt, mit jeweils einer Font drauf.
Nun möchte ich das ganze via Css mit einem Mouseover machen.

Wie mache ich das nun?

Im moment habe ich das so.
Nur wie kann ich dann den Button verlinken.

style>
a { display:block;
background-image:url(URL);
width:300px; height:75px }
a:hover { background-image:url(URL); }
</style>
Bitte die Suche u. die Doku nutzen.
______________________________

mfg Murphy
Zitieren
#2
ich weiß es nicht genau aber ich glaube so geht das ich gebe dir aber keine 100%ige Garantie das es funkioniert:

Ändere deinen Code wie folgt um:

PHP-Code:
<style>
ul#navigation {
display:block;
background-image:url(URL);
width:300pxheight:75px }
a:hover background-image:url(URL); }
</
style

Und als Links so:

PHP-Code:
<ul id="navigation">
  <
li><a href="link1.htm">Dein Link</a></li>
</
ul

mfg,

youfree
Zitieren
#3
http://www.developers-guide.net/forums/2...+nachladen
Da ist das ganze sehr gut erklärt und gelöst.

Zitieren
#4
Ich habe jetzt noch eine Möglichkeit mit Java gefunden.
Wenn ich aber jetzt 2 mal den Code hintereinander in der Html Datei benutze, klappt der Mouseover-Effekt nicht mehr.
Hier mal der Code:

Zitat:<a href="index.html"
onMouseOver="document.Bild.src='BILD 1';"
onMouseOut="document.Bild.src='BILD "';">

<img src="BILD, DAS ALS ERSTES ANGEZEIGT WERDEN SOLL"
name="Bild"
width=300 height=75
alt="test"
border=0>
</a></div>
Bitte die Suche u. die Doku nutzen.
______________________________

mfg Murphy
Zitieren
#5
Funktioniert gar keiner mehr oder nur einer nicht? Ein Link zum Ausprobieren wäre ganz nett.
Vantage-Forum: http://vantage-forum.de/
Zitieren
#6
Wenn ich einmal den Code in der .html Datei drin habe, dann klappt das ganze. Wenn ich aber noch ein anderen Button mit diesem Code einbaue, klappt das ganze nicht mehr. Die beiden Buttons werden zwar dargestellt, doch wenn ich mit der Maus über einen der beiden Buttons gehe, passiert nichts.
Bitte die Suche u. die Doku nutzen.
______________________________

mfg Murphy
Zitieren
#7
Ich wollte nochmal nachfragen, ob jemand eine Idee hat.
Oder mir ein Code gibt, mit dem ich das auch machen kann.
Bitte die Suche u. die Doku nutzen.
______________________________

mfg Murphy
Zitieren
#8
Entferne mal die beiden Semikolon (Strichpunkte) aus Deinem letztgenannten Code. Dann sollte es funktionieren.
 
The User, Formerly Known As "En-Gedi"
 
Zitieren
#9
Es kommt immernoch kein Mouseover Effekt.
Bitte die Suche u. die Doku nutzen.
______________________________

mfg Murphy
Zitieren
#10
Ooops, übersehen ... in Deinem o.a. Code ist in der 3. Zeile (vor dem Semikolon) ein Anführungszeichen zuviel.

Richtiger Code:

Code:
<a href="index.html"
onMouseOver="document.Bild.src='BILD_2'"
onMouseOut="document.Bild.src='BILD_1'">

<img src="BILD_1"
name="Bild"
width="300"
height="75"
alt="test"
border="0" />

</a>
 
The User, Formerly Known As "En-Gedi"
 
Zitieren