[DW oder FP] Rollover Buttons mit editierbarem Text

[zirag]

Hi Leute
kann ich ein Rollover Button ( in PS ) mit editierbarem Text machen ?
also ich will ein Rollover Button machen ohne Text , und den Text dann in DreamWeaver oder Frontpage 2003 raufmachen ?
wie kann ich das am besten machen
Oder ist es besser den Text für jeden Button in PS raufzumachen und denn 2 mal in den verschiedenen Farben zu speichern ?

Danke schonmal

mfg ZiRaG


( PS @ Mods: ich habs auch im HTML Editoren Forum gepostet , wusste nicht genau wo es besser reinpasst , löscht den Thread , wo ihr meint , dass es nicht reinpasst )

 

[dtdesign]

Ich hab mal was probiert. Mach per Javaskript einen RollOver Effekt rein und 2 verschiedenfarbige UNBESCHRIEBENE Buttons, dann pack die mit einer Tabelle auf deine HP. Dann packst du mit nem center Befehl einfach einen Text in diese Tabelle, dadurch ist dieser direkt zentriert. Die Buttons sind die Links, der Text nicht, dadruch sparst du dir auch die Active, Hover etc Effekte.

MfG dtdesign

 

[Gumbo]

Ich wüsste noch eine weitere, nicht auf Javascript basierte Möglichkeit. dazu müsste ich allerdings wissen, wie der Button aussieht.

 

[zirag]

Ok danke schonmal .
Ich bin grad noch mit dem HauptDesign beschäftigt , ich weiss selber noch nicht genau wie die Buttons aussehen werden , wenn ich die gemacht hab , werd ich die mal posten

mfg ZiRaG

 

[zirag]

So ich hab mal nen Button schnell gemacht , so ungefähr soll der denn aussehen

 

[zirag]

und hier der Button wie der normal aussieht , der oben soll nur bei MouseOver und bei down so sein

 

[max]

Ich habs mal mit CSS gelöst, ist dann halt sehr einfach zu handhaben.

Beispiel

Hier die CSS
Ist zwar nicht die beste aber sie Funktioniert.

Ich hab das ganze so aufgebaut dass wenn man einen <li></li> Tag macht, hat der einfach als hintergrund dein Pic für den Button.

mfg
max

 

[zirag]

Sieht schon mal sehr gut aus
Danke
nur wie mach ich das , dass wenn man auf einen Link klickt , der Button Gelb bleibt

ich hab noch nicht viel Ahnung von HTML und keine Ahnung von CSS


mfg ZiRaG

 

[max]

Für deine CSS kentnisse schau mal auf:
http://edition-w3c.de/TR/1998/REC-CSS2-19980512/
http://www.w3schools.com

HTML natürlich SelfHTML

Überhaupt Edition W3C.de ist eine gute Seite.

Also hier ist einmal der Quelltext der Navi:

<div id="navcontainer" align="left">
<ul>
<li id="active"><a href="#">Punkt 1</a></li>
<li><a href="#">Punkt 2</a></li>
<li><a href="#">Punkt 3</a></li>
<li><a href="#">Punkt 4</a></li>
<li><a href="#">Punkt 5</a></li>
</ul>
</div>

Damit der aktive Link hervorgehoben ist muss folgendes im Quellcode stehen:

<li id="active"><a href="#">Punkt 1</a></li>

Also der jeweilig aktuelle Link muss die id="active" haben.

Und hier nochmal die CSS:

body {
	background-color: #999;
}

/* ANFANG LINKFORMATIERUNG */
a:visited { 
	color: #ffffff; 
	font-weight: bold; 
	text-decoration: none;
	}

a:link { 
	color: #ffffff; 
	font-weight: bold;
	text-decoration: none;
	}

a:hover { 
	color: #FFCC33; 
	font-weight: bold;
	text-decoration: none;
	}

a:active { 
	color: #FFCC33; 
	font-weight: bold; 
	text-decoration: none;
	}

a { 
	color: #aaa9a9; 
	font-size: 8pt; 
	font-family: Verdana, Arial, Helvetica, sans-serif;
	height: 20px; 
	}

a:focus { 
	color: #afafaf; 
	font-weight: bold;
	line-height: 20px; 
	text-decoration: none; 
	}
/* ENDE LINKFORMATIERUNG */

/* ANFANG NAVIGATION */
 #navcontainer ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	}

#navcontainer a {
	display: block;
	padding: 2px 2px 2px 24px;
	width: 120px;
	background-image:  url(button2.gif);
	background-repeat: no-repeat;
	}

#navcontainer a:link, #navlist a:visited {
	text-decoration: none;
	}

#navcontainer a:hover {
	background-image:  url(button1.gif);
	background-repeat: no-repeat;
	}

#active a:link, #active a:visited, #active a:hover {
	background-image:  url(button1.gif);
	background-repeat: no-repeat;
	color: #FFCC33; 
	font-weight: bold; 
	text-decoration: none;
	}
/* ENDE NAVIGATION */

Hier das Ganze nochmal zum ansehen.

mfg
max

 

[Ladybug]

also ich hab das jetzt auch mal ausprobiert und soweit hat das auch funktioniert, aber wie mache ich das, dass sich gleichzeitig auch nen anderer link öffnet?! mit nem javascript, das 2 links gleichzeitig öffnet?!
daran häng ich gerade