Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 13

Thema: button rollover ...

  1. #1
    Kaiserliche Hoheit
    Registriert seit
    06.12.2004
    Ort
    daheim
    Beiträge
    1.550
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard button rollover ...

    Ehm ich möchte bei meinem design dass wenn man auf die buttons mit der maus drauf geht sich das button verändert (z.B. färblich)
    also das button hat einen schwarzen schlagschatten aber ich will das wenn man mit der maus drauf geht das der schwarze schlagschatten sich in einen orangen schlagschatten umwandelt

    was muss ich jetzt machen?
    ich möchte das wenn möglich mit CSS machen
    doch muss ich auch die buttons so machen oder wie funtkioniert das??
    habe photoshop 7
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Das unterhaltsamste Forum wos gibt !

  2. #2
    [sG|W00tkaeppi]
    Gast

    Standard

    Schlagschatten 'geradlinig' oder 'verschwommen'? Also grafisch oder geht auch als 'Border'?

  3. #3
    Kaiserliche Hoheit
    Themenstarter

    Registriert seit
    06.12.2004
    Ort
    daheim
    Beiträge
    1.550
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    ich zeig am besten einen screen von den buttons:



    die zei weißen die umrahmt sind! hoffe man erkennt es
    Das unterhaltsamste Forum wos gibt !

  4. #4
    Großmeister(in)
    Registriert seit
    03.12.2004
    Ort
    Schweiz
    Beiträge
    514
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    mit css alleine ists vielleicht schon möglich, weiss nicht *g*
    auf jeden fall empfehle ich dir, dass du den text nicht direkt auf den button schreibst, sondern erst später in html.
    das hat viele vorteile: navigation durch textlinks (gut für suchmaschinen, bilderlose browser, sprachausgabe...), einfaches ändern der texte auf dem button, einfaches ändern des buttons, ohne alle texte ändern zu müssen.. etc etc...

    also dann kannst du den rohen button erstellen wo immer du willst.
    dann erstellst du eine css klasse für den normalen button und eine für den hover-button, ich schlage die eine tabellenzelle vor.
    zum beispiel so:
    Code:
    td.menu_normal {
    background-image; url(images/dernormalebutton.gif);
    }
    td.menu_hover {
    background-image; url(images/derhoverbuttonmitkrassemeffekt.gif);
    }
    dein menu kannst du jetzt auf einer tabelle aufbauen, pro zelle ein menupunkt.
    beim onmouseover wechselst du jetzt aber die css klasse per JS, und beim onmouseout ebenfalls. das kann dann etwa so aussehen:

    Code:
    html und headerzeugs.. tabellenkopf
    
    <tr><td class="menu_normal" onmouseover="this.className='menu_hover'" onmouseout="this.className='menu_normal'">menu 1</td></tr>
    <tr><td class="menu_normal" onmouseover="this.className='menu_hover'" onmouseout="this.className='menu_normal'">menu 2</td></tr>
    <tr><td class="menu_normal" onmouseover="this.className='menu_hover'" onmouseout="this.className='menu_normal'">menu 3</td></tr>
    
    tabellenende und footerzeugs etc.
    wenn du jetzt über eine tabellenzelle fährt, ändert das hintergrundbild.

    jetzt empfiehlt sich es noch, den link auf die ganze tabelle zu erweitern - denn wenn sich schon das gesamte hintergrundbild ändert, will ich auch überall klicken können und nicht nur genau über dem text.
    dies ist per css kein problem:
    Code:
    a &#123;
    display&#58; block;
    width&#58; 150px; /* oder je nach dem, wie breit deine buttons sind */
    line-height&#58; 20px; /* von vorteil&#58; die höhe deiner buttons */
    &#125;

    die schrift kannst du mit den diversen css teilern natürlich deinem button anpassen.

    ich hoffe es hilft dir.
    mein menu unter multi-web.ch ist zum beispiel so aufgebaut.

  5. #5
    [sG|W00tkaeppi]
    Gast

    Standard

    Dann müsstest Du von diesem Button, der ja grafisch ist, eine MouseOver-Variante erstellen. Wie der Button bei einem MouseOver erscheinen soll. Dann lässt sich das mit JS oder CSS lösen ...

    €dit: Da war ich wohl zu langsam!

  6. #6
    Kaiserliche Hoheit
    Themenstarter

    Registriert seit
    06.12.2004
    Ort
    daheim
    Beiträge
    1.550
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Zitat Zitat von baloo
    mit css alleine ists vielleicht schon möglich, weiss nicht *g*
    auf jeden fall empfehle ich dir, dass du den text nicht direkt auf den button schreibst, sondern erst später in html.
    das hat viele vorteile: navigation durch textlinks (gut für suchmaschinen, bilderlose browser, sprachausgabe...), einfaches ändern der texte auf dem button, einfaches ändern des buttons, ohne alle texte ändern zu müssen.. etc etc...

    also dann kannst du den rohen button erstellen wo immer du willst.
    dann erstellst du eine css klasse für den normalen button und eine für den hover-button, ich schlage die eine tabellenzelle vor.
    zum beispiel so:
    Code:
    td.menu_normal &#123;
    background-image; url&#40;images/dernormalebutton.gif&#41;;
    &#125;
    td.menu_hover &#123;
    background-image; url&#40;images/derhoverbuttonmitkrassemeffekt.gif&#41;;
    &#125;
    dein menu kannst du jetzt auf einer tabelle aufbauen, pro zelle ein menupunkt.
    beim onmouseover wechselst du jetzt aber die css klasse per JS, und beim onmouseout ebenfalls. das kann dann etwa so aussehen:

    Code:
    html und headerzeugs.. tabellenkopf
    
    <tr><td class="menu_normal" onmouseover="this.className='menu_hover'" onmouseout="this.className='menu_normal'">menu 1</td></tr>
    <tr><td class="menu_normal" onmouseover="this.className='menu_hover'" onmouseout="this.className='menu_normal'">menu 2</td></tr>
    <tr><td class="menu_normal" onmouseover="this.className='menu_hover'" onmouseout="this.className='menu_normal'">menu 3</td></tr>
    
    tabellenende und footerzeugs etc.
    wenn du jetzt über eine tabellenzelle fährt, ändert das hintergrundbild.

    jetzt empfiehlt sich es noch, den link auf die ganze tabelle zu erweitern - denn wenn sich schon das gesamte hintergrundbild ändert, will ich auch überall klicken können und nicht nur genau über dem text.
    dies ist per css kein problem:
    Code:
    a &#123;
    display&#58; block;
    width&#58; 150px; /* oder je nach dem, wie breit deine buttons sind */
    line-height&#58; 20px; /* von vorteil&#58; die höhe deiner buttons */
    &#125;

    die schrift kannst du mit den diversen css teilern natürlich deinem button anpassen.

    ich hoffe es hilft dir.
    mein menu unter multi-web.ch ist zum beispiel so aufgebaut.
    danke schonmal für die ausfürhliche erklürung
    werde das später ausprobieren
    Das unterhaltsamste Forum wos gibt !

  7. #7
    Kaiserliche Hoheit
    Themenstarter

    Registriert seit
    06.12.2004
    Ort
    daheim
    Beiträge
    1.550
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    ehm habs jetzt zwar noch nicht ausprobiert weil ich skaten war und jetzt tennis geh aber hab gerade gedacht dass ich eiegntlich nicht etwas mit einer sprache coden will von der ich noch gar keine ahnung habe! und das ist bei JS so
    das mit dem mouseout und so bei JS geht doch mit CSS auch
    den code weiß ich glaube ich eh weil schon öfters solche threads über das gab


    also es wird sicher noch probleme geben . ich melde mich dann einfach
    Das unterhaltsamste Forum wos gibt !

  8. #8
    Großmeister(in)
    Registriert seit
    03.12.2004
    Ort
    Schweiz
    Beiträge
    514
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    wenn dir
    Code:
    onmouseover="this.className='klasse'"
    zuviel fremdes ist, kannst du auch einfach eine klasse .menu und eine klasse .menu:hover machen.

    ist eigentlich dasselbe, nur einfacher *g*

  9. #9
    Kaiserliche Hoheit
    Themenstarter

    Registriert seit
    06.12.2004
    Ort
    daheim
    Beiträge
    1.550
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    hm ja muss alles zuerst probieren so kann ich nichts sagen
    muss noch zuerst das design fertig stellen und danach mit dem coden anfangen
    mich interessierte erstmal ob das überhaupt möglich ist

    ich hoffe wenn ich dann soweit bin kann ich mich bei problemen an dich wenden :P
    Das unterhaltsamste Forum wos gibt !

  10. #10
    Großmeister(in)
    Registriert seit
    03.12.2004
    Ort
    Schweiz
    Beiträge
    514
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    hehe..
    ne, geht nicht. jetzt oder nie!

Ähnliche Themen

  1. Rollover Button einfügen
    Von Barcelino im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 16.01.2007, 12:39
  2. Grafik als Button + Rollover effekt
    Von im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 31.08.2006, 09:02
  3. rollover
    Von Gast im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 23.02.2006, 09:53
  4. Button ändern beim Anklicken Rollover-Effekt
    Von Phill im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 3
    Letzter Beitrag: 03.05.2004, 15:55
  5. rollover
    Von xyz im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 26.02.2004, 22:30

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •