Hover CSS und Mouseover Java geht das ?

One Man Production · 4 Januar 2008

Habe folgendes Problem. Ich habe buttons mit hilfe von Bildern mit Java eingebunden mit einem Mouseovereffekt. Diese Buttons habe ich mit <a> verlinkt.
Nun möchte ich in dieser gleichen Datei Hover Buttons einsetzen mit CSS.
Wie kriege ich es hin, das die Buttons die ich mit Java auf die Seite eingebaut habe, nicht von dem Hover effekten beeinflusst wird?

<html>
<head>
<style type="text/css">
a:link {font-family:Comic Sans MS; font-size:24px; backgroundcolor:#D0BFBF; display:block; color:#9E3A3D; width:80px; height:20px;}
a:visited {font-family:Comic Sans MS; font-size:24px; backgroundcolor:#C2EDED; display:block; color:white; width:80px; height:20px;}
a:hover {font-family:Comic Sans MS; font-size:24px; backgroundcolor:#FFB0B0; text-decoration:underline; display:block; color:white; width:80px; height:20px;}
a:active {font-family:Comic Sans MS; font-size:24px; backgroundcolor:#7688DC; display:block; color:gray; width:80px; height:20px;}

p#Back {float:left; border:1px solid black; width:200px; height:400px; text-align:center; font-family:Comic Sans MS;font-size: 30px; font:bold; color:#F17567; background-color:#C7B8BD}
</style>

<script language="JavaScript">

</script>

</head>
<body bgcolor="gray" lang="de" text="#000000" bgcolor="" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<table align="center"bordercolorlight="#EEEEEE" bordercolordark="#494949" bgcolor="#B6B6B6" bordercolor="#DADADA"border="6" cellpadding="6" cellspacing="6" width="900">
<th>
<div align="center">

<a href="index.html"
onMouseOver="button07.src=image13.src"
onMouseOut="button07.src=image14.src">
<img src="Start.bmp" width="90" height="30" border="0"
name="button07"></a>

<a href="Bilder.html"
onMouseOver="button01.src=image1.src"
onMouseOut="button01.src=image2.src">
<img src="Bilder.bmp" width="90" height="30" border="0"
name="button01"></a>

<a href="Music.html"
onMouseOver="button02.src=image3.src"
onMouseOut="button02.src=image4.src">
<img src="Musik.bmp" width="90" height="30" border="0"
name="button02"></a>

<a href="Links.html"
onMouseOver="button03.src=image5.src"
onMouseOut="button03.src=image6.src">
<img src="Videos.bmp" width="90" height="30" border="0"
name="button03"></a>

<a href=""
onMouseOver="button9.src=image17.src"
onMouseOut="button9.src=image18.src">
<img src="Games.bmp" width="90" height="30" border="0"
name="button9"></a>

<a href="Yo.html"
onMouseOver="button04.src=image7.src"
onMouseOut="button04.src=image8.src">
<img src="yo.bmp" width="90" height="30" border="0"
name="button04"></a>

<a href="Links.html"
onMouseOver="button05.src=image9.src"
onMouseOut="button05.src=image10.src">
<img src="Infos.bmp" width="90" height="30" border="0"
name="button05"></a>

<a href="Links.html"
onMouseOver="button06.src=image11.src"
onMouseOut="button06.src=image12.src">
<img src="Links.bmp" width="90" height="30" border="0"
name="button06"></a>

<a href="Links.html"
onMouseOver="button08.src=image15.src"
onMouseOut="button08.src=image16.src">
<img src="Sonstiges.bmp" width="90" height="30" border="0"
name="button08"></a>
</th>
</div>
</table>

<div align="center"><h1><font color="black">O.M.P. Home</font></h1></div>
<hr size="5" color="black">
<p id="Back" >Hotbox</p>
<ul id="navigation"><a href="dsadf">dsasdf</a></ul>

<p style="float:right; border:1px dashed silver; width:200px; text-align:center; height:400px; background-color:#D8D8D8; font-family:MS Sans Serif; font-size:20px">Hier folgen die Infos</p clear="all">

<div align="center" style="font-family: Century Gothic; font-size: larger;"><h1>Willkommen auf meiner Homepage</h1><br>Hier können sie sich Bilder anschauen, Musik hören, Flash-Games Spielen, Videos ansehen und sich über allgemeine Themen informieren.
</div>

</body>
</html>

Mfg OMP

iceman400 · 4 Januar 2008

Du legst einfach für die hover-Buttons eine Klasse fest.

HTML:

<a class="hoverbutton" href="http://link.de">Link</a>

(wenn du nicht weißt, wie du Klassen in CSS anwendest, kannst du es hier nachlesen)

One Man Production · 4 Januar 2008

Ich habe jetzt folgendes gemacht.

.extra a:active {....}
Ist das so richtig?
Es wird kein hover effekt angezeigt und die schrift wird auch nicht als Button wiedergegeben.
Gehört das Disply:button; nicht in .extra a:active {display:button} rein ?
Was habe ich falsch gemacht? Ich habe in den a tag die Klasse extra eingegeben. <a class="extra" href="dasfs">bla</a> ?!?

Kann mir jemand helfen ????

Gimli · 4 Januar 2008

So kannst du das machen! Hier der link sodass du siehst was es erzeugt:Untitled Document

css:

Code:

/*Allgemein:*/
a.extra {border-left:1px solid black;
  border-right:1px solid black;
  border-top:1px solid black;
  width:150px;
  height:20px;
  display:block;
  white-space:nowrap;
  overflow:hidden;
  border-bottom:1px solid black;
  font-family:"Times New Roman",Times, serif;
  font-size:12px;
  font-weight:bold;
  text-decoration:none;
  letter-spacing:0.1em;
  padding:3px;
  text-align:center;
}
/*Definitionen für link und hover:*/
a.extra:link, a.extra:visited {background-color:#FFFF00;
           color:#000000;
           font-weight:bold;
           font-size:12px;
}
a.extra:hover, a.extra:active {background-color:#CC0000;
            color:#000000;
            font-weight:bold;
            font-size:14px;
}

html:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="test.css" rel="stylesheet" type="text/css">
</head>
<body>
<a href="test.htm" class="extra">BLABLA</a>
</body>
</html>

Maxi · 5 Januar 2008

Closed: Nicht Regelkonform.

Hover CSS und Mouseover Java geht das ?

One Man Production

Guest

iceman400

Neues Mitglied

One Man Production

Guest

Gimli

Mitglied

Maxi

Neues Mitglied

Neueste Beiträge