Mouseover-Effekt

darkblue

Hi Leutz!

Ich bräuchte mal wieder Hilfe. Folgendes habe ich vor.

Derzeit habe ich folgenden Code verbaut:

Code

<div align=center>[url='/kontakt.html'][img]/HPKontaktButtonWeiss.gif[/img][/url]

Beim Klich auf den Button "/HPKontaktButtonWeiss.gif" öffnet sich die Page "/kontakt.html" in einem neuen Fenster.

Ich möchte für den Button einen Mouseover-Effekt haben und habe mir die Grafik "/HPKontaktButtonRot.gif" erstellt, die mit der Grafik "/HPKontaktButtonWeiss.gif" fast identisch ist, allerdings eine andere Schriftfarbe hat.
Nun möchte ich, daß die Grafik mit der weissen Schrift beim Aufruf der Seite erscheint und die mit der roten Schrift sobald mit der Maus über den Button gefahren wird. Beim Anklicken soll dann w. b. auf "/kontakt.html" verlinkt werden.

Am liebsten wäre mir eine Lösung mit CSS, evtl. auch mit JS.

Wie stelle ich das an?

darkblue

So, in JS ist es mir bereits gelungen!

CSS wäre mir lieber, da ich eigentlich der Ansicht bin, ein HP muß auch ohne JS funktionieren.

Hätte da jemand eine Lösung für mich?

6_freddy

Hi,
guckst Du hier.
MfG
6_freddy

darkblue

Zitat von 6_freddy

Hi,
guckst Du hier.
MfG
6_freddy

Erst mal Danke für Deinen Hinweis,
aber so ganz trifft das glaube ich nicht meine Problemstellung.

Mir geht´s um gif´s, nicht um Texte.

stefan999

Für die CSS-Lösung musst du das Bild als Hintergrundbild einbinden. Dann wäre die <DIV>-Box aber leer und würde stark verkleinert werden. Außerdem könnte man das alt-Attribut nicht nutzen (Wichtig für screenreader)

Eine barriere- und JS-freie CSS-Lösung verwendet ein Blind-GIF:

Code

<head>
<style type=text/css>
#kontakt {
display: block;
background-image: urk(bild1.jpg)
}


#kontakt:hover {
display: block;
background-image: url(bild2.jpg)
}
</style>
</head>
<body>
........
<a id="kontakt" href="../kontakt.html">
[img]blind.gif[/img]
</a>
........
</body>

Alles anzeigen

Ronald

Moin!

Versuche es mal so:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>irgendwas</title>
<base target="_blank"></base>


<style type="text/css">
<!--
#but a, #but a:link
  {
  background-image:url(HPKontaktButtonWeiss.gif);
  display:block;
  width:120px;   ### Breite deines Button eintragen
  height:24px;   ### Höhe deines Button eintragen
  }


#but a:hover
  {
  background-image:url(HPKontaktButtonRot.gif)
  }


-->
</style>
</head>
<body>


<div id="but" align=center>[url='/kontakt.html'][/url]</div>


</body>
</html>

Alles anzeigen

Tipp: Wenn du mehrere Verweise so formatieren willst, dann kann man das in eine Tabelle packen und der Zellenhintergrund verändert sich dann jeweils, entweder andere Farbe oder eine andere Grafik. Auch da kann sich dann die Schriftfarbe ändern, dann benötigt man nur insgesamt 2 Grafiken für beliebig viele "Button"-Verweise und einen Zentrale Zellenformatierung.
In deinem Beispiel müßtest du jetzt für jeden Link ein eigenes Stylesheet basteln.

G.a.d.M.

Ronald

Tags