mouse over - wieder mal

hhspre

hallo,

ihr werdet alle denken mouse over nicht schon wieder das hatten wir doch schon aber ich möchte ein specielles - und zwar:

ich hab 2 buttons gemacht (button 1 button 2) und ich möchte das die mit mouse over abgespielt werden! gut bis dahin kein problem;) aber ich mochte das jetzt da auch noch ein text reinkommt! ich mag immer die gleichen buttons verwenden nur immer einen anderen text reinschreiben - um die ladezeit zu verkürzen! so muss jede grafic datei einzeln geladen werden und ich mag das nur eine (zwei) datein geladen werden müssen. Dann den text kann man ja dann auch wie im grafic programm noch verändern!

währe super wenn einer wüsste wir man das macht ...

Shila

Also, egal welchen Link ich hier von dir anklicke, bekomme ich jedes Mal die Meldung: Seite kann nicht gefunden werden.
Auch wenn ich mir den Link aus dem Quelltext kopiere.
Wenn du also Hilfe möchtest, dann poste hier bitte den richtigen Link.
Oder könnte es sein, dass du vergessen hast die Buttons hoch zuladen.

LG Shila

hhspre ;)

hallo,

ops ähm ...

also ich hatte die datei schon richtig hochgeladen aber nur falsch benannt ... tschuldignug

also nochmal: http://yure.yu.funpic.de/bilder/buttons/button1.gif und http://yure.yu.funpic.de/bilder/buttons/button2.gif

ich weis net warums net geht awa wenn der fehler kommt und man in der adessen leiste nochmal enter drückt dann kommts ... komisch ... *grr*

Rocco

Zitat

ich weis net warums net geht awa wenn der fehler kommt und man in der adessen leiste nochmal enter drückt dann kommts ... komisch ... *grr*

...geht noch immer ned...aber ich weiß was du meinst.
1. tipp für die schule: speziell schreibt man mit Z; ebenso wie grafik mit K (auch ned auf englisch, denn da heißts image )
2. ich werd mal recherchieren. mal sehn wer schneller ist. ich mitm nachschaun, oder ronald bis er kommt und das aus dem stehgreif löst

mfg
Rocco

MrJava

Zitat von Rocco

2. ich werd mal recherchieren. mal sehn wer schneller ist. ich mitm nachschaun, oder ronald bis er kommt und das aus dem stehgreif löst

Du recherchierst bei manchen Antworten? Wenn ichs net auf Anhieb weiß antworte ich auch net.
Ich mein wenn der Beitragsteller es genauso wenig weiß wie ich kann ja auch
er recherchieren. Schließlich ist die Ausgangssituation ziemlich identisch. Nur das ihm bei einer Recherche meinerseits Arbeit abgenommen wird.

Ronald

Moin!

Zitat von Rocco

2. ich werd mal recherchieren. mal sehn wer schneller ist. ich mitm nachschaun, oder ronald bis er kommt und das aus dem stehgreif löst

Unfair, ich komme gerade eben erst nach Hause

Aber ich hätte es schon, falls du nicht eine besser Lösung hast?

hhspre:

Meine Lösung heißt "formatieren mit Stylesheets".

Das jetzt detaliert zu erklären ist nicht so ganz schnell geschrieben, deshalb habe ich mal ein Beispiel gemacht:

HTML

<html>
<head>
<title>Testseite</title>
<style type="text/css">
<!--
#navigation a {display: block; padding:3px; padding-left:10px; text-decoration:none; background-image:url(images/button1.gif); background-repeat:no-repeat; width: 160px; height:25;}


#navigation a:hover {display: block; padding:3px; padding-left:10px; text-decoration:none; background-image:url(images/button2.gif);  background-repeat:no-repeat; width: 160px; height:25 }
-->
</style>
</head>
<body>


<table border="0" id="navigation" cellspacing="3" cellpadding="3">
<tr>
<td>
[url='seite1.html'] Seite 1 [/url]
</td>
</tr>
<tr>
<td>
[url='seite2.html'] Seite 2 [/url]
</td>
</tr>
</table>
</body>
</html>

Alles anzeigen

Du weist mit "id=navigation" der gesamten Tabelle eine id zu, für die du entsprechende Styles formatiert hast.

Worauf du achten mußt:
1. die Angaben zu Höhe und Breite muß der Gifgröße entsprechen, nicht der Zellengröße,
2. Die Zellengröße wird beim td-Tag nicht angegeben;
3. du mußt den Text mit "padding" an die richtige Stelle schieben,
4. "background-repeat:no-repeat" bernötigst du für den IE-Explorer nicht, aber für Mozilla/Netscape.

Viel Spaß damit und ein Gruß aus der Marsch!

Ronald

hhspre

hallo,

erstma vielen dank für eure postings!

@ rocco ... auch ich darf ma was falsch schreiben ... naja in rechtschreibung war ich noch nie gut und jetzt kommt schon wieder ne neue *grrr*

hmm also ich teste das gleich ma ... wenn es hilfreich is das ihr meinen genzen code seht dann sagt es ... will den jetzt nich sinnlos herher posten ...

hhspre

ok ... alles klar ich habs! subba geht

danke ... in ner halben std presentier ich euch dann das ergebniss

Ronald

Nachtrag:

Ich habe gerade noch einen Fehler entdeckt:

Du mußt die Padding-Werte von der Länge und Breit abziehen.

Wenn du als ein Gif von 160 x 25 Pixel benutzt, da ist

falsch:

Code

#navigation a {display: block; padding:3px; padding-left:10px; text-decoration:none; background-image:url(images/button1.gif); background-repeat:no-repeat; width: 160px; height:25;}


#navigation a:hover {display: block; padding:3px; padding-left:10px; text-decoration:none; background-image:url(images/button2.gif);  background-repeat:no-repeat; width: 160px; height:25 }

richtig:

Code

#navigation a {display: block; padding-top:3px; padding-left:10px; text-decoration:none; background-image:url(images/button1.gif); background-repeat:no-repeat; width: 150px; height:22;}


#navigation a:hover {display: block; padding-top:3px; padding-left:10px; text-decoration:none; background-image:url(images/button2.gif);  background-repeat:no-repeat; width: 150px; height:22 }

Dann brauchst du auch für den Mozilla/Netscape das no-repeat nicht mehr, kannst es aber sicherheitshalber stehen lassen, falls du dich verrechnet hast

Du kannst natürlich auch noch weitere Grafiken benutzen,
Beispiel:

Code

#navigation a:visited {display: block; padding-top:3px; padding-left:10px; text-decoration:none; background-image:url(images/button3.gif);  background-repeat:no-repeat; width: 150px; height:22 }

Prinzip erkannt ?

G.a.d.M.n.e.

Ronald[/code]

hhspre

hallo,

alles klar habs schon lange durschaut ... und schaut mal an was geworden is http://www.yure.de.tt/ das ne page für ne freundin die heude nach spanien gezogen is *heul*

naja wieso sind da so große abständ dazwischen?

Ronald

Das Padding ist größer als deine Gif.

Nimm mal dieses Style:

Code

<style type="text/css"> 
<!-- 
#navigation a, #navigation a:visited {display: block; padding-top:2px; padding-left:20px; text-decoration:none; background-image:url(http://yure.yu.funpic.de/bilder/buttons/button1.gif); background-repeat:no-repeat; width: 130px; height:18px;} 


#navigation a:hover, #navigation a:focus {display: block; padding-top:2px; padding-left:20px; text-decoration:none; background-image:url(http://yure.yu.funpic.de/bilder/buttons/button2.gif);  background-repeat:no-repeat; width: 130px; height:18px } 
--> 
</style>

G.a.d.M.

Ronald

hhspre

ne du ich hab das jetzt ma drauf getan awa geht net ...
ich glaub eingentlich acuh net das am style lag eigentlich war das doch richtig ...

Rocco

Zitat von MrJava

Ich mein wenn der Beitragsteller es genauso wenig weiß wie ich kann ja auch er recherchieren.

...dann mach das auch!

hhspre

... wenn ich jetzt andere mouseovers machen mag mit andere grafi!K!en dann muss ich doch hier:

Code

#navigation ->a<-, #navigation ->a<-

nur den namen ändern oder?

Shila

So ganz verstehe ich jetzt nicht was du damit meinst.

1.: Meinst du jetzt in der Navigation oder wo anders auf der HP?
2.: Willst du unterschiedliche Grafiken für die Navigation nehmen?

LG Shila

hhspre

na genau das mein ich ich mag unterschiedlich grafiken nehmen - zwar net für die navi awa für was anderes in der gleichen tabelle ...

Ronald

Hi,

du vergibst dann einfach einen anderen Alias:

Code

#navigation a, #navigation a:visited {...(styles) ....}


#tabelle a, #tabelle a:visited {...(styles) ....}


pp....

G..d.M.

Ronald

hhspre

axxo ich muss den namen vor dem buschstaben ändern ... na dann ... und in der tabelle muss ich dann auch die id ändern oder ... ok dann is ja alles klar

... danke

Tags