# [DW oder FP] Rollover Buttons mit editierbarem Text



## zirag (8. Mai 2004)

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 (9. Mai 2004)

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 (9. Mai 2004)

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


----------



## zirag (9. Mai 2004)

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 (10. Mai 2004)

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


----------



## zirag (10. Mai 2004)

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


----------



## max (10. Mai 2004)

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 (10. Mai 2004)

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 (10. Mai 2004)

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 (18. Mai 2004)

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


----------



## Ladybug (18. Mai 2004)

hat sich schon erledigt.... trotzdem danke


----------



## delektron (5. Juli 2004)

was ist eigentlich vorzuziehen? JavaScript oder CSS Menüs?


----------

