Hoverschaltfläche die in fast allen browsern geht

web673 · 29 September 2007

Hallo liebes Team,

habt ihr vielleicht eine hoverschaltfläche die im Internetexplorer und im FireFox funktioniert ?

diese hier von Frontpage funktioniert ja nicht.:

<applet code="fphover.class" codebase="./" width="112" height="47">
<param name="color" value="#000080">
<param name="hovercolor" value="#0000FF">
<param name="textcolor" value="#FFFFFF">
<param name="effect" value="glow">
<param name="image" valuetype="ref" value="image/menu_nicht_hover.jpg">
<param name="hoverimage" valuetype="ref" value="image/menu_nicht_hover.jpg">
<param name="url" valuetype="ref" value="willk_txt_1280_1024.htm">
</applet>

Danke schonmal Web673

Körnerbrötchen · 29 September 2007

Was genau fürn Hovereffekt willst du denn haben?
Ich hätte da schon einen simplen MouseOver parat:

Code:

 <HTML>
<HEAD>
<Title>Ein Mouse-Over Button</Title>

<Script Language="JavaScript">
<!--
if (document.images) {
var Startseite1=new Image;
Startseite1.src="grafik1.jpg";
var Startseite2=new Image;
Startseite2.src="grafik2.jpg";
}
//-->
</Script>

</Head>
<BODY>
<A HREF="index.html" onMouseover="document.Startseite.src=Startseite2.src"; onMouseout="document.Startseite.src=Startseite1.src"><IMG SRC="grafik1.jpg" BORDER=0 NAME="Startseite" Title="Zur&uuml;ck zur Startseite"></A>
</BODY>
</HTML>

Und das ganze noch mit ner Beispielseite...

web673 · 29 September 2007

also ich meinte dass wenn ich den button nicht überfahre das bild a drann ist

wenn ich ihn dann überfahre soll ein bild b angezeigt werden.

ist das jettz mit zwei bildern gewesen ???

BcF · 29 September 2007

Dazu ist kein JS nötig, das geht auch mit CSS (Beispielcode):

Code:

#navi a {
  display:block;
  width:150px;
  height:50px;
}
a.startseite {
  background:#FFF URL('startseite1.jpg');
}
a.startseite:hover {
  background:#000 URL('startseite2.jpg');
}
[...]
<div id="navi">
  <a class="startseite" href="index.html" title="Startseite">&nbsp;</a>
</div>

web673 · 29 September 2007

BcF schrieb:

Dazu ist kein JS nötig, das geht auch mit CSS (Beispielcode):

Code:

#navi a {
  display:block;
  width:150px;
  height:50px;
}
a.startseite {
  background:#FFF URL('startseite1.jpg');
}
a.startseite:hover {
  background:#000 URL('startseite2.jpg');
}
[...]
<div id="navi">
  <a class="startseite" href="index.html" title="Startseite">&nbsp;</a>
</div>

wie muss ich das genau im html style schreiben ? muss das so aussehen:

Code:

<style>
#navi a {
  display:block;
  width:150px;
  height:50px;
}
a.startseite {
  background:#FFF URL('startseite1.jpg');
}
a.startseite:hover {
  background:#000 URL('startseite2.jpg');
}
[...]
</style>
<div id="navi">
  <a class="startseite" href="index.html" title="Startseite">&nbsp;</a>
</div>

Dark D. · 29 September 2007

Den <style>-tag mußt du in den HEAD schreiben ;-)

web673 · 29 September 2007

EDIT:

ja ich habs danke für deine / ihre hilfe

Dark D. · 29 September 2007

So ungefähr, ja. :-)

BcF · 29 September 2007

Das [...] sollte eigentlich als Platzhalter dienen und gehört nicht in den Quelltext ;)

XraYSoLo · 29 September 2007

bitte code-tags editieren, danke.

Nils aka XraYSoLo

web673 · 29 September 2007

so jetzt hab ich noch ein problem....

ich habe jetzt die erste hoverschaltfläche fertig wen ich jetzt aber eine zweite mach wie soll ich das dann machen ? habe versucht mit dem <div id="kontakt"> und das andere <div id="forum">

und die styles davon sind so:

Code:

<style>
#forum a {
display:block;
width:112px;
height:47px;
}
a.startseite {
background:#FFF URL('image/menu_nicht_hover.jpg');
}
a.startseite:hover {
background:#000 URL('image/menu_hover.jpg');
}
[...]

#kontakt a {
display:block;
width:112px;
height:47px;
}
a.kontakt {
background:#FFF URL('image/kontakt_nicht_hover.jpg');
}
a.kontakt:hover {
background:#000 URL('image/kontakt_hover.jpg');
}
[...]
</style>
</head>

aber das funktioniert nicht ... da geht nur das forum hoverteil....

bitte um hilfe gruß web673

BcF · 29 September 2007

Du hast das etwas falsch verstanden, also:

Code:

#navi a {   /*Das brauchst du nur einmal und in <div id="navi"> kammen dann alle Links rein*/
  display:block;
  width:150px;
  height:50px;
}
a.startseite {   /*Und sowas machst du für jede Seite*/
  background:#FFF URL('startseite1.jpg');
}
a.startseite:hover {
  background:#000 URL('startseite2.jpg');
}
a.impressum {
  background:#FFF URL('impressum1.jpg');
}
a.impressum:hover {
  background:#000 URL('impressum2.jpg');
}
[...]
<div id="navi">
  <a class="startseite" href="index.html" title="Startseite">&nbsp;</a>
  <a class="impressum" href="impressum.html" title="Impressum">&nbsp;</a>
</div>

Jetzt klarer :roll:

web673 · 29 September 2007

BcF schrieb:

Du hast das etwas falsch verstanden, also:

Code:

#navi a {   /*Das brauchst du nur einmal und in <div id="navi"> kammen dann alle Links rein*/
  display:block;
  width:150px;
  height:50px;
}
a.startseite {   /*Und sowas machst du für jede Seite*/
  background:#FFF URL('startseite1.jpg');
}
a.startseite:hover {
  background:#000 URL('startseite2.jpg');
}
a.impressum {
  background:#FFF URL('impressum1.jpg');
}
a.impressum:hover {
  background:#000 URL('impressum2.jpg');
}
[...]
<div id="navi">
  <a class="startseite" href="index.html" title="Startseite">&nbsp;</a>
  <a class="impressum" href="impressum.html" title="Impressum">&nbsp;</a>
</div>

Jetzt klarer :roll:

aber width:150px;
height:50px; ist nicht immer gleich ...

Commodore · 29 September 2007

web673 schrieb:
aber width:150px;
height:50px; ist nicht immer gleich ...

Dann schreibst du in jeden solchen Bereich die entsprechende Groesse und Hoehe rein.

web673 · 29 September 2007

ich hab das jetzt so wie ich denke das es gehen müsste aber da werden keine bilder angezeigt obwohl es richtig ist.....

Code:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Neue Seite 2</title>
<base target="Hauptframe">
<style>
#navi a {
  display:block;
  width:150px;
  height:50px;
}
a.forum {
  background:#FFF url('forum_nicht_hover.jpg');
}
a.forum:hover {
  background:#000 URL('forum_hover.jpg');
}
a.kontakt {
  background:#FFF URL('kontakt_nicht_hover.jpg');
}
a.kontakt:hover {
  background:#000 URL('kontakt_hover.jpg');
}

</style>
</head>

<body>


<p align="center"><img border="0" src="image/menu.jpg" width="122" height="59"></p>

<div id="navi">
  <a class="forum" href="index.html" title="forum"></a>
  <a class="kontakt" href="impressum.html" title="kontakt"></a>
</div>
<body style="background-attachment:fixed;
background-image:url(image/menu_hinterg.jpg);">
</body>

</html>

Commodore · 29 September 2007

Weil du die Hoehen- und Breitenangaben vergessen hast!

web673 · 29 September 2007

kannst du da mal bitte in das teil ein beispiel reinschreiben damit ich weiß wo die hinkommen ...........

Commodore · 29 September 2007

Code:

a.forum {
  background:#FFF url('forum_nicht_hover.jpg');
  height: 100px;
  width: 100px;
}
a.kontakt {
  background:#FFF URL('kontakt_nicht_hover.jpg');
  height: 250px;
  width: 50px;
}

Natuerlich mit den entsprechend richtige Groessen.

web673 · 29 September 2007

Commodore schrieb:
Code:

a.forum { background:#FFF url('forum_nicht_hover.jpg'); height: 100px; width: 100px; } a.kontakt { background:#FFF URL('kontakt_nicht_hover.jpg'); height: 250px; width: 50px; }

Natuerlich mit den entsprechend richtige Groessen.

das hab ihc jetzt aber es geht noch immer nicht....

Code:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Neue Seite 2</title>
<base target="Hauptframe">
<style>
#navi a {
  display:block;
  width:150px;
  height:50px;
}
a.forum {
  background:#FFF url('forum_nicht_hover.jpg');
  height: 149px;
  width: 49px;
}
a.forum:hover {
  background:#000 URL('forum_hover.jpg');
}
a.kontakt {
  background:#FFF URL('kontakt_nicht_hover.jpg');
  height: 148px;
  width: 49px;
  }
a.kontakt:hover {
  background:#000 URL('kontakt_hover.jpg');
}

</style>
</head>

<body>


<p align="center"><img border="0" src="image/menu.jpg" width="122" height="59"></p>

<div id="navi">
  <a class="forum" href="index.html" title="forum"></a>
  <a class="kontakt" href="impressum.html" title="kontakt"></a>
</div>
<body style="background-attachment:fixed;
background-image:url(image/menu_hinterg.jpg);">
</body>

</html>

Commodore · 29 September 2007

Aendere "#navi a" mal so ab:

Code:

#navi a{
  display: block;
}

Hoverschaltfläche die in fast allen browsern geht

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Senior HTML'ler

Neues Mitglied

Neues Mitglied

Neues Mitglied

Commodore

Guest

Neues Mitglied

Commodore

Guest

Neues Mitglied

Commodore

Guest

Neues Mitglied

Commodore

Guest