Text auf/über Grafik (Menübutton)

shuser · 19. Juli 2006

Text auf/über Grafik mit Mouse-Over (Menübutton) legen

Ich habe eine Navi mit Divs und Buttons erstellt.
Per Klick auf den Button wird die entsprechende Seite geladen (ja, nee-is klar...).

Nun möchte ich, dass auf den Buttons/über den Buttons ein Text(der Link-Name) erscheint...!
Das Problem ist, dass die Buttons mit Mouse-Over Effekt ausgestattet sind, also die einfach Verlegung/ Setzung der Grafik als Div-Hintergrund wegfällt...!
Wie bekomme ich das hin?

Code:

<Div Id="Button1">
<a href="index.html">
<Img Name="Button1" Src="images/Button1.png" Width=307 Height=23 Border=0 onMouseOver="this.src='images/Button1-over.png'" onMouseOut="this.src='images/Button1.png'" OnMouseDown="this.src='images/Button1-down.png'" OnMouseUp="this.src='images/Button1-over.png'" Alt="">
</a>
</Div>
<Div Id="Button1_link ">
<font size="2" face="Arial, Helvetica, sans-serif">Home</font>
</div>

Css:

Code:

#Button1 {
	position:absolute;
	left:39px;
	top:226px;
	width:307px;
	height:23px;
    z-index:983;
}
#Button1_link {
	position:absolute;
	left:39px;
	top:226px;
	width:307px;
	height:23px;
	background:transparent;
	z-index:999;
}

Den Text einfach in die Buttons einbauen möchte ich nicht, mehr Ladezeit für Modembesucher bedeuten würde und "einfache" Navigations und Benennungsänderungen bei vielen Unterseiten extrem aufwendig und umständlich machen würde (jedes Mal die Buttons neu bearbeiten...).

Ich habe versucht, das mit einem weiteren div mit höherem z-index zu regeln.
Es funktioniert aber nicht...

Meines Wissens kann ich ein Bild mit "over"-Status (die Mausaktionen) nicht als bg eines Divs festlegen...

Sonst wäre das Ganze einfach...

December · 19. Juli 2006

Den Text einfach in die Buttons einbauen möchte ich nicht, mehr Ladezeit für Modembesucher bedeuten würde

Wie kommst du darauf? Die Dateigröße, wenn du Text auf die Buttons schreibst, ändern sich nur minimal.

[...] bei vielen Unterseiten extrem aufwendig und umständlich machen würde (jedes Mal die Buttons neu bearbeiten...)

Da kommst du nicht drumrum. Meines Wissens nach gibt es keine Möglickeit, Rollover-Buttons per Divs mit z-index mit nachträglichem Text auszustatten.
Ich empfehle dir 5-8 Hauptmenüpunkte in Gestalt deiner Buttons und die Untermenüpunkte jeweils als Textonly-Versionen.

Gruß, December

dkdenz · 19. Juli 2006

Für eine Navigation empfehle ich eine Liste:

Code:

<ul>
<li><a href="" class="mainlink">Linktext</a></li>
...usw...
</ul>

Die Formatierung könnte so aussehen:

Code:

a.mainlink:link, a.mainlink:visited, a.mainlink:hover, a.mainlink:active {
  display:block;
  width:150px;
  height:24px;
  background:url(bild1.png);
  text-decoration:none;
}
a.mainlink:hover {
  background:url(bild2.png);
}

shuser · 19. Juli 2006

December schrieb:
Wie kommst du darauf? Die Dateigröße, wenn du Text auf die Buttons schreibst, ändern sich nur minimal.

Da kommst du nicht drumrum. Meines Wissens nach gibt es keine Möglickeit, Rollover-Buttons per Divs mit z-index mit nachträglichem Text auszustatten.
Ich empfehle dir 5-8 Hauptmenüpunkte in Gestalt deiner Buttons und die Untermenüpunkte jeweils als Textonly-Versionen.

Gruß, December

Sorry, ich weiß echt nicht, unter dem Einfluss welcher Rauschmittel ich gestanden habe (wahrscheinlich M U S I K

), als ich so einen Quark geschrieben habe

Einfach geil^^
"Dateigröße ändert sich wenn Text dazukommt"^^
Einfach geil- ohne Ende geil

Was ich meinte war, dass ich, sofern alle Buttons gleich aussehen ( sprich der Text "extern" ist ), den gleichen Button mehrmals anzeigen kann und so nur einen Button laden muss ( oder irre ich damit?)
Wenn ich nun aber jeder Button anders ausschaut,...
dann bleibt mir wohl nur X-Buttons einzeln zu laden...

Mit einem "Modell" ist das schon wesentlich einfacher sprich unkomplizierter!
Hinzu kommt, dass Sumas Grafikbuttons mit Text nicht "lesen" können...

shuser · 19. Juli 2006

dkdenz schrieb:
Für eine Navigation empfehle ich eine Liste:

Code:

<ul> <li><a href="" class="mainlink">Linktext</a></li> ...usw... </ul>

Die Formatierung könnte so aussehen:

Code:

a.mainlink:link, a.mainlink:visited, a.mainlink:hover, a.mainlink:active { display:block; width:150px; height:24px; background:url(bild1.png); text-decoration:none; } a.mainlink:hover { background:url(bild2.png); }

Davon habe ich gehört.
Das wäre wahrscheinlich wirklich die beste Methode.
Wichtig ist aber, dass der komplette Button verlinkt wird/ anklickbar ist... .
Gut, mit underline=none ginge es ja sogar, dass der komplette Button inklusive Text anklickbar (und die Verlinkung beim Text nicht ohne Weiteres ersichtlich)wäre...!

Wie kann ich das realisieren?

Dankeschön

Schnuckenpapa · 19. Juli 2006

Hier hätte ich einen weiteren Vorschlag. Kann ja noch weiter ausgefeilt werden.
Die beiden Bilder könnte man vorladen und im gesamten Dokument verwenden.

HTML:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Bilder-Navi</title>
<style type="text/css">
.dx
{position:absolute;
top:0px;
width:140px;
height:60px;
border:1px solid blue;
font-weight:bold;
font-size:12pt;
font-style:italic;
line-height: 60px;
text-align:center;
background-image:url(bild_1.gif);
background-repeat:no-repeat;
background-color:transparent;
color:#000000;
cursor:pointer;
}
.px
{margin-top: 0; margin-bottom: 0;}
</style>

<script type="text/javascript">
function change(obj){
obj.style.backgroundImage='url(bild_2.gif)';
}
function norm(obj){
obj.style.backgroundImage='url(bild_1.gif)';
}
</script>
</head>

<body>
<div id="d1" class="dx"  style="left:10px;" onmouseover="change(d1)" onmouseout="norm(d1)" onclick="location.href='Seite3.htm';return false;">
<p class="px"> Seite 3 </p></div>
<div id="d2" class="dx"  style="left:160px;" onmouseover="change(d2)" onmouseout="norm(d2)" onclick="location.href='Seite4.htm';return false;">
<p class="px"> Seite 4 </p></div>
</body>
</html>

Grüsse Schnuckenpapa

dkdenz · 20. Juli 2006

shuser schrieb:
Wichtig ist aber, dass der komplette Button verlinkt wird/ anklickbar ist... .

Durch display:block und die Angabe von width und height wird alles innerhalb dieser Maße anklickbar...

shuser · 20. Juli 2006

dkdenz schrieb:
Durch display:block und die Angabe von width und height wird alles innerhalb dieser Maße anklickbar...

Ah, das is gut!
Hm, es scheint also mehrere Möglichkeiten zu geben (wie immer...).
edit: eigentlich wollte ich jetzt noch meine Frage zur Listenmethode ausführen, aber es naht ein Gewitter...
^^ vielleicht später.

shuser · 03. Aug. 2006

So, dann woll'n wir mal wieder...
Also, ich habe einmal folgenden Code vorbereitet:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Menü</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background: #A2966D;
}

a.home:link, a.home:hover, a.home:active {
    display:block;
	position:absolute;
	left:39px;
	top:226px;
	width:307px;
	height:23px;
	color:#000000;
    text-decoration:none;
}
a.downloads:link, a.downloads:hover, a.downloads:active {
    display:block;
	position:absolute;
	left:39px;
	top:253px;
	width:307px;
	height:23px;
	color:#000000;
        text-decoration:none;
}
a.home:link, a.downloads:link {
	background:url(../../images/Button1.png)
}
a.home:hover, a.downloads:hover {
    background:url(../../images/Button1-over.png)
}
a.home:active, a.downloads:active {
    background:url(../../images/Button1-down.png)
}
-->
</style>
</head>
<body>
<ul style="list-style-type:none">
<li><a href="http://www.beispiellink1.de" class="home">Startseite</a></li>
<li><a href="http://www.beispiellink2.de" class="downloads">Downloads</a></li>
</ul>
</body>
</html>

Es funzt aber noch nicht so richtig, außerdem weiß ich nicht, wie ich den URL-TEXT nun positionieren soll, weil ich ihn nicht an der Stelle haben möchte sondern rechts auf/in der Buttongrafik...(nur wie, die Grafik soll ja an der Stelle bleiben)!

Weiß jemand einen Rat?

dkdenz · 03. Aug. 2006

Du musst das dann noch mit padding für den Linktext machen.
Aber da wir nicht wissen, wie groß die Grafiken sind, wäre es wirklich hilfreicher,
wenn Du das mal online zeigen könntest.

shuser · 03. Aug. 2006

dkdenz schrieb:
Du musst das dann noch mit padding für den Linktext machen.
Aber da wir nicht wissen, wie groß die Grafiken sind, wäre es wirklich hilfreicher,
wenn Du das mal online zeigen könntest.

Oh :whacky:
Ich dachte, ich hätte den Link schon herausgegeben

Also- die Seite ist http://www.shuser.de/Extreme_Edition_Beta/index.html !

Ich möchte auf die bereits bestehende Navi quasi "nur noch" die Links/ den Text legen.

dkdenz · 03. Aug. 2006

Sieht ja schonmal gar nicht übel aus. Wirklich.
Wenn Du jetzt noch bei ein, zwei Menüpunkten etwas Text reinschreiben könntest, wär's super.
Zur Aufklärung: Ich verwende die Web-Developer-Toolbar im FireFox.
Und da gibt es das EditCSS. Mit dem kann ich quasi live Deine CSS manipulieren und gucken, was passiert, wenn ich Werte vergebe...
Im HTML geht das leider nicht.

shuser · 03. Aug. 2006

dkdenz schrieb:
Sieht ja schonmal gar nicht übel aus. Wirklich.
Wenn Du jetzt noch bei ein, zwei Menüpunkten etwas Text reinschreiben könntest, wär's super.
Zur Aufklärung: Ich verwende die Web-Developer-Toolbar im FireFox.
Und da gibt es das EditCSS. Mit dem kann ich quasi live Deine CSS manipulieren und gucken, was passiert, wenn ich Werte vergebe...
Im HTML geht das leider nicht.

Hehe, die Toolbar verwende ich bereits, ein super Tool !!!
Aber das "edit"-css feature war mir neu- danke für diese Horizonterweiterung

Kennst du "Spider Zilla"?
Damit kann man Websites komplett herunterladen, also lokal abspeichern und sie so wie ein eigenes Projekt bearbeiten.
Somit gibt's auch keine Probleme mehr mit Grafiken usw...
Was meinst du mit "bei ein, zwei Menüpunkten Text reinschreiben"?
Soll ich z.b beim "button1"-div die Grafik rausnehmen, damit du anschließend per css "nachrüsten "kannst?

Mit den Padding-Angaben klappt's schon ganz gut

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Menü</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background: #A2966D;
}
a.downloads:link, a.downloads:hover, a.downloads:active, a.home:link, a.home:hover, a.home:active  {
    display:block;
	position:absolute;
	color:#000000;
    text-decoration:none;
	padding-top:4px;
	padding-left:18px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}
a.home:link, a.home:hover, a.home:active {
	left:39px;
	top:226px;
	width:307px;
	height:23px;
}
a.downloads:link, a.downloads:hover, a.downloads:active {
	left:39px;
	top:253px;
	width:307px;
	height:23px;
}
a.home:link, a.downloads:link {
	background:url(../../images/Button1.png)
}
a.home:hover, a.downloads:hover {
    background:url(../../images/Button1-over.png)
}
a.home:active, a.downloads:active {
    background:url(../../images/Button1-down.png)
}
-->
</style>
</head>
<body>
<ul style="list-style-type:none">
<li><a href="http://www.shuser.de/Extreme_Edition_beta/index.html" class="home">Startseite/Home</a></li>
<li><a href="http://www.shuser.de/Extreme_Edition_beta/index.html" class="downloads">Downloads</a></li>
</ul>
</body>
</html

Jedoch wird das bei mir im Browser gar nicht angezeigt :-O
Dort steht nur der Textlink, welcher wie wild anfängt zu zappeln, wenn ich mit der Maus drüberfahre...
Zudem scheint die Grafik mit den Paddingangaben bzw dem Text "mitzuwandern", weshalb nun der obere Teil abgeschnitten und dafür unten wiederholt wird...

!
Irgendwas passt da noch nicht...

edit: kann das etwas mit dem list-style-type zu tun haben?

Weiß keiner mehr online oder weiß niemand einen Rat...?

dkdenz · 04. Aug. 2006

Wenn ich Deinen Quelltext so betrachte, fällt mir eigentlich nur noch das hier ein:
http://yatil.de/artikel/der-div-wahnsinn
Verstehe das bitte mit einem Augenzwinkern, ok?

shuser · 04. Aug. 2006

dkdenz schrieb:
Wenn ich Deinen Quelltext so betrachte, fällt mir eigentlich nur noch das hier ein:
http://yatil.de/artikel/der-div-wahnsinn
Verstehe das bitte mit einem Augenzwinkern, ok?

Das trifft es genau"st"

Ja, ich weiß, dass es "verdivt" schwierig ist, mit so vielen einzelnen Ebenen zu arbeiten und dass es auch zu Kompabilitätsproblemem führen kann.
Aber bis jetzt sieht es zumindest im FF "perfekt" aus, ich habe Fehler vermieden und auch schon viele Probleme mit dem IE beseitigt.

Mein aktuelles Problem mit dem Menü kann aber weniger damit zu tun haben, da ich das Menü zunächst in einer neuen Html-Seite ausprobiere, also noch nicht in die Website eingebaut habe.
Hier kann ich beim besten WIllen noch keinen "Dschungel "sehen

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Menü</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background: #A2966D;
}
a.downloads:link, a.downloads:hover, a.downloads:active, a.home:link, a.home:hover, a.home:active  {
    display:block;
	position:absolute;
	color:#000000;
    text-decoration:none;
	padding-top:4px;
	padding-left:18px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}
a.home:link, a.home:hover, a.home:active {
	left:39px;
	top:226px;
	width:307px;
	height:23px;
}
a.downloads:link, a.downloads:hover, a.downloads:active {
	left:39px;
	top:253px;
	width:307px;
	height:23px;
}
a.home:link, a.downloads:link {
	background:url(../../images/Button1.png)
}
a.home:hover, a.downloads:hover {
    background:url(../../images/Button1-over.png)
}
a.home:active, a.downloads:active {
    background:url(../../images/Button1-down.png)
}
-->
</style>
</head>
<body>
<ul style="list-style-type:none">
<li><a href="http://www.shuser.de/Extreme_Edition_beta/index.html" class="home">Startseite/Home</a></li>
<li><a href="http://www.shuser.de/Extreme_Edition_beta/index.html" class="downloads">Downloads</a></li>
</ul>
</body>
</html>

Mein Problem ist, dass mit den Paddingangaben auch das BG-Bild verschoben wird...
Zudem wird das Testmenü gar nicht grafisch angezeigt, sondern nur als Text...
Beim Mouseover "blinkt" der Text förmlich und die Grafik wird ab und zu angezeigt.
Ich denke, mit dieser Beschreibung kann niemand etwas anfangen, deshalb habe ich das Testmenü auch einmal hochgeladen:
http://www.shuser.de/Extreme_Edition_Beta/sonstiges%20Material/Men%FC/Menue_test.htm
( sorry für die "unvorteilhafte" URL...=)

dkdenz · 04. Aug. 2006

Probiere mal das aus und erzähle dann, was passiert ist:

Code:

_padding-top:5px;
_padding-left:13px;

shuser · 04. Aug. 2006

dkdenz schrieb:
Probiere mal das aus und erzähle dann, was passiert ist:

Code:

_padding-top:5px; _padding-left:13px;

Sorry für die späte Antwort, in diesem Forum ist die nächste Seite so versteckt

Nein, es bringt im Firefox nichts, im IE schaut es auch nicht gut aus...
Gibt es gar keine andere Lösung für dieses "Text auf Grafik"-Problem?

Ich möchte halt nur sehr, sehr ungern ohne Text arbeiten, aus sumatechnischen Gründen (und aufgrund von einfacheren Änderungsarbeiten)...

dkdenz · 04. Aug. 2006

Quatsch! Blödsinn!
Du musst dann einfach die width- und height-Angaben entsprechend abändern.

shuser · 04. Aug. 2006

dkdenz schrieb:
Quatsch! Blödsinn!
Du musst dann einfach die width- und height-Angaben entsprechend abändern.

Richtig, mein Fehler.
Trotzdem zappelt das Ganze doch merkwürdig rum, nicht wahr

?

dkdenz · 04. Aug. 2006

Welchen Browser benutzt Du denn?
Bei mir zappelt nix (Linux-FireFox1.5.0.4, Opera 9.0)

Text auf/über Grafik (Menübutton)

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member

New member