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

Thema: Änderung des Button bei Mouseover

  1. #1
    Youngster
    Registriert seit
    02.11.2007
    Beiträge
    19
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Änderung des Button bei Mouseover

    Ich wollte den Effekt erreichen, daß wenn man auf den Button klickt, sich die Farbe verändert und man auf eine andere Seite gelangt.
    Im Editor funktioniert das ganze, aber wenn ich es auf diesen FTP-Server ziehe, hab ich ein Kästchen ohne Inhalt - die Bilder habe ich mit draufgezogen.
    Kann mir jemand sagen, wo der Fehler liegen könnte?
    Und mal wieder vielen Dank vorab


    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>start</title>
    <title>mouseover1</title>
    <script language="JavaScript">
    </script>
    </head>
    <body style="color: rgb(255, 0, 0); background-color: rgb(0, 0, 0);" alink="#009900" link="#33cc00" vlink="#990099">
    <table style="text-align: left; width: 100%; height: 100%;" border="0" cellpadding="0" cellspacing="0">
    <tbody>
    <tr>
    <td style="width: 250px;"></td>
    <td style="width: 204px; text-align: center;"></td>
    <td style="width: 250px;"></td>
    </tr>
    <tr>
    <td style="width: 250px;"></td>
    <td style="width: 204px; text-align: center;"> [img]logo.jpg[/img] </td>
    <td style="width: 250px;"></td>
    </tr>
    <tr>
    <td style="width: 250px;"></td>
    <td style="width: 204px; text-align: center;"></td>
    <td style="width: 250px;"></td>
    </tr>
    </tbody>
    </table>


    </body>
    </html>
    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 !!!!!
    Angehängte Grafiken Angehängte Grafiken

  2. #2
    Azubi(ne)
    Registriert seit
    16.06.2007
    Beiträge
    70
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Hi!
    Wie wäre es mit der CSS-Lösung?
    Code:
    <style type="text/css">
            .hoverimg1 img &#123; display&#58;block; width&#58;120; border&#58;0;&#125;
            .hoverimg1 a &#123;background&#58;url&#40;bild2.jpg&#41; no-repeat; display&#58;block; width&#58;120;&#125;
            .hoverimg1 a&#58;hover img &#123;visibility&#58;hidden;&#125;
            .hoverimg1 a&#58;hover &#123;border&#58;0;&#125;
            * html .hoverimg1 a &#123;margin-right&#58;1px;&#125;
            * html .hoverimg1 a&#58;hover &#123;height&#58;60px; margin-right&#58;0;&#125;
    </style>
    
    //....
    
    <span class="hoverimg1">[img]bild1.jpg[/img]</span>
    LG nif7

  3. #3
    Youngster
    Themenstarter

    Registriert seit
    02.11.2007
    Beiträge
    19
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Klingt gut - nur ich muß gestehen, davon hab ich mal wieder keinen Plan!
    Wenn ich den Code richtig für meinen Fall umgeändert hab - woran ich ehrlichgesagt noch zweifel - verschwindet das Logo, oder?

    Und wie ist das, wenn ich mehrere solcher Buttons habe, die ich beim Draufklicken abdunkeln möchte, setz ich den Code dann jeweils an die Position, wo sich dieser Button befindet?

  4. #4
    Kaiserliche Hoheit
    Registriert seit
    04.03.2007
    Ort
    BäRLIN
    Alter
    31
    Beiträge
    1.857
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Problem bei der CSS-Lösung : Einige Browser erkennen den ":hover" tag nicht ...
    Jeder hat das Recht dumm zu sein. Einige mißbrauchen dieses Recht leider ständig!
    Weder meine ICQ-Nummer noch meine MSN-Adresse oder meine eMailadresse sind für Bestellungen, Sponsoringanfragen oder Support !

    ploppGROUP Internetservices - IT-Partner für Geschäfts-/Großkunden
    mit Rechenzentren in Berlin, Hannover und bald auch FFM

  5. #5
    Azubi(ne)
    Registriert seit
    16.06.2007
    Beiträge
    70
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Wenn du dein Dokument hast, setzt du es etwa so ein:
    Code:
    <html>
        <head>
        <title>Test</title>
    
    
    
        <style type="text/css"> 
                .hoverimg1 img &#123; display&#58;block; width&#58;120; border&#58;0;&#125; 
                .hoverimg1 a &#123;background&#58;url&#40;bild12.jpg&#41; no-repeat; display&#58;block; width&#58;120;&#125; 
                .hoverimg1 a&#58;hover img &#123;visibility&#58;hidden;&#125; 
                .hoverimg1 a&#58;hover &#123;border&#58;0;&#125; 
                * html .hoverimg1 a &#123;margin-right&#58;1px;&#125; 
                * html .hoverimg1 a&#58;hover &#123;height&#58;60px; margin-right&#58;0;&#125; 
    
                .hoverimg2 img &#123; display&#58;block; width&#58;120; border&#58;0;&#125; 
                .hoverimg2 a &#123;background&#58;url&#40;bild22.jpg&#41; no-repeat; display&#58;block; width&#58;120;&#125; 
                .hoverimg2 a&#58;hover img &#123;visibility&#58;hidden;&#125; 
                .hoverimg2 a&#58;hover &#123;border&#58;0;&#125; 
                * html .hoverimg2 a &#123;margin-right&#58;1px;&#125; 
                * html .hoverimg2 a&#58;hover &#123;height&#58;60px; margin-right&#58;0;&#125; 
        </style> 
    </head>
    <body>
        <table cellspacing="0" cellpadding="0" border="0">
            <tr>
                <td>
                    <span class="hoverimg1">[img]bild11.jpg[/img]</span>
                </td>
                <td>
                    <span class="hoverimg1">[img]bild21.jpg[/img]</span>
                </td>
            </tr>
        </table>
    
    
    </body>
    </html>
    In diesem Falle erscheint also erst bild11/bild21 (die Bilder bild12/bild22 liegen hinter bild11/bild12, sind aber durch diese verdeckt) und wird dann bei "hover" durchsichtig gemacht, so dass die im Hintergrund liegenden Bilder freigelegt werden (es sieht dann so aus, als würde sich das erste Bild verändern). Um mehrere solche Bilder einzubinden, einfach mehrere Anweisungen schreiben (wie oben gezeigt) mit unterschiedlichen Namen (hoverimg1, hoverimg2, hoverimg3,...)
    LG nif7

  6. #6
    Youngster
    Themenstarter

    Registriert seit
    02.11.2007
    Beiträge
    19
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Eine Sache ist mir jetzt leider noch nicht klar: Du redest von Bild11/21 und Bild12/22 - das wären doch somit 4 Bilder und ich hab doch nur 2
    Kannst Du mir für etwas sehr Schwerfällige vielleicht noch markieren, wo ich was zu ändern habe!
    Auf alle Fälle herzlichen Dank für die Hilfe!

  7. #7
    König(in)
    Registriert seit
    06.06.2007
    Ort
    Bi
    Beiträge
    1.015
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Code:
    .hoverimg2 img &#123; display&#58;block; width&#58;120; border&#58;0;&#125;
                .hoverimg2 a &#123;background&#58;url&#40;bild22.jpg&#41; no-repeat; display&#58;block; width&#58;120;&#125;
                .hoverimg2 a&#58;hover img &#123;visibility&#58;hidden;&#125;
                .hoverimg2 a&#58;hover &#123;border&#58;0;&#125;
                * html .hoverimg2 a &#123;margin-right&#58;1px;&#125;
                * html .hoverimg2 a&#58;hover &#123;height&#58;60px; margin-right&#58;0;&#125;
    das ist der CSS-Teil für jeweils ein Bild (mit verstecktem Hintergrundbild)

    Code:
    <span class="hoverimg1">[img]bild21.jpg[/img]</span>
    dieser Teil muss in deine Anzeigebereich rein
    Sämtlicher Code erhebt keinen Anspruch auf syntaktische Korrektheit geschweige denn Ausführbarkeit und ist für die Implementation außerhalb der Beispiele nicht geeignet.

    Kein Support für kommerzielle Scripts | Kein kostenloser Support via ICQ

  8. #8
    Youngster
    Themenstarter

    Registriert seit
    02.11.2007
    Beiträge
    19
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Danke, jetzt habe ich es begriffen und mit dem Editor funktioniert das ganze auch
    Allerdings wenn ich es auf den FTP-Server ziehe mit den Bildern, die reinsollen, gehts wie bei dem Java-Script irgendwie nicht. Das Bild wird nicht angezeigt.
    Muß man noch irgendwas besonderes beachten?

  9. #9
    Youngster
    Themenstarter

    Registriert seit
    02.11.2007
    Beiträge
    19
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Ich geb, um das Problem vielleicht mal zu erklären, mal den Link von der HP (die da kommen soll)
    www.oiforceone.de
    Der erkennt irgendwie die Bilder nicht auf der Start-Seite. Wenn ich das ganze über den Editor austeste, funktioniert es.
    Falls das wichtig ist, ich bin über Strato angemeldet

  10. #10
    der/die Göttliche Avatar von jojo87
    Registriert seit
    23.03.2007
    Ort
    Leipzig
    Alter
    30
    Beiträge
    3.131
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Dein Pfad scheint nicht zu stimmen. Achte auf Groß-/Kleinschreibung und versuch mal den Pfad relativ anzugeben:
    Code:
    [img]./bilder/logo-klein.jpg[/img]

Ähnliche Themen

  1. ICQ 6 Problem mit der Änderung des Avatars!
    Von Marie im Forum Computer - Internet Forum
    Antworten: 15
    Letzter Beitrag: 08.07.2008, 11:19
  2. Aktualisierung nach Änderung
    Von Street im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 24.10.2006, 18:44
  3. änderung
    Von Zasi im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 21.06.2005, 23:25
  4. Änderung
    Von umbenannt im Forum Off Topic und Quasselbox
    Antworten: 1
    Letzter Beitrag: 06.06.2003, 15:28

Stichworte

Berechtigungen

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