Ergebnis 1 bis 8 von 8

Thema: Mouseover-Effekt mit Grafiken

  1. #1
    suchender
    Gast

    Standard Mouseover-Effekt mit Grafiken

    hallo!

    ich stehe an und weiß nicht weiter. ich hoffe jemand kann mir helfen.
    ich habe insgesamt 9 verschiedene bilder. dazu 9 verschiedene "Hoverbilder". dh jedes Bild hat ein anderes hover. diese bilder sollten nahtlos aneinander aufgereiht werden und ein menü bilden.

    hier mein code:

    ich hoffe ich bin nicht komplett am holzweg ;-( aber das hover funktioniert einfach nicht ;-(

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="de">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>test</title>

    <style>

    #test1
    a { float:left;
    background-image:url(test01.jpg);
    width:65px; height:430px }
    a:hover { background-image:url(testover01.jpg); }

    #test2
    a { float:left;
    background-image:url(test02.jpg);
    width:65px; height:430px }
    a:hover { background-image:url(testover02.jpg); }

    #test3
    a { float:left;
    background-image:url(test03.jpg);
    width:65px; height:430px }
    a:hover { background-image:url(testover03.jpg); }

    #test4
    a { float:left;
    background-image:url(test04.jpg);
    width:65px; height:430px }
    a:hover { background-image:url(testover04.jpg); }

    #test5
    a { float:left;
    background-image:url(test05.jpg);
    width:65px; height:430px }
    a:hover { background-image:url(testover05.jpg); }

    #test6
    a { float:left;
    background-image:url(test06.jpg);
    width:65px; height:430px }
    a:hover { background-image:url(testover06.jpg); }

    #test7
    a { float:left;
    background-image:url(test07.jpg);
    width:65px; height:430px }
    a:hover { background-image:url(testover07.jpg); }

    #test8
    a { float:left;
    background-image:url(test08.jpg);
    width:65px; height:430px }
    a:hover { background-image:url(testover08.jpg); }

    #test9
    a { float:left;
    background-image:url(test09.jpg);
    width:65px; height:430px }
    a:hover { background-image:url(testover09.jpg); }

    </style>
    </head>

    <body>
    <div id="test1"><a href="test1.htm"></a></div>
    <div id="test2"><a href="test2.htm"></a></div>
    <div id="test3"><a href="test3.htm"></a></div>
    <div id="test4"><a href="test4.htm"></a></div>
    <div id="test5"><a href="test5.htm"></a></div>
    <div id="test6"><a href="test6.htm"></a></div>
    <div id="test7"><a href="test7.htm"></a></div>
    <div id="test8"><a href="test8.htm"></a></div>
    <div id="test9"><a href="test9.htm"></a></div>

    </body>

    </html>

    liebe grüße und vielen dank im voraus
    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 !!!!!

  2. #2
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Mouseover-Effekt mit Grafiken

    Das ist eine unschöne "Div-Suppe", die du da gekocht hast.
    Verwende für die Navi besser eine Liste und definiere für jeden Link eine Klasse.
    Wie's geht ist hier (Variante 2) erklärt.

  3. #3
    Unregistriert
    Gast

    Standard AW: Mouseover-Effekt mit Grafiken

    vielen dank...

    weiß zwar nicht wieso es mit div nicht funzt, aber jetzt geht es

    danke

    liebe grüße

  4. #4
    suchender
    Gast

    Standard AW: Mouseover-Effekt mit Grafiken

    zu früh gefreut... eines bekomme ich noch immer nicht hin ;(

    ich hab mich jetzt gänzlich an das beispiel gehalten...

    siehe auch hier: http://www.ohne-css.gehts-gar.net/demo/0022b.html

    wie oder wo kann ich aber die buttons zentriert darstellen lassen?

    ich bekomm es leider nicht hin ;(

    liebe grüße

  5. #5
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Mouseover-Effekt mit Grafiken

    Da müsstest du etwas rechnen:
    Du könntest ul eine bestimmte Breite geben.
    Davon abziehen: Anzahl der Links x deren Einzelbreite.
    Den Rest teilen durch (Anzahl Links - 1), ergibt dann den Zwischenabstand.
    Dieses Ergebnis verwendest du als margin-right-Wert.
    Dem letzten Listenpunkt darf dieser Wert dann jedoch nicht zugewiesen werden.

  6. #6
    suchender
    Gast

    Standard AW: Mouseover-Effekt mit Grafiken

    dh es gibt keine möglichkeit das ganze ohne rechnen/abstand etc... zentriert darstellen zu lassen?

    liebe grüße

  7. #7
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Mouseover-Effekt mit Grafiken

    Versuch mal folgendes:
    Weile ul eine Breite zu, so dass alle Links reinpassen und zentriere ul, z.B. so:

    Code:
    width: 500px;
    margin: 0 auto;

  8. #8
    suchender
    Gast

    Standard AW: Mouseover-Effekt mit Grafiken

    danke funktioniert

Ähnliche Themen

  1. Mouseover-effekt
    Von Posi im Forum HTML & CSS Forum
    Antworten: 20
    Letzter Beitrag: 25.09.2008, 12:12
  2. Wiedermal mouseover effekt...
    Von Maggi im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 2
    Letzter Beitrag: 20.03.2007, 07:16
  3. Hoover/Mouseover Effekt
    Von im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 12.03.2007, 09:15
  4. Problem mit mouseover effekt
    Von im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 17
    Letzter Beitrag: 09.05.2006, 08:48
  5. Mouseover-Effekt
    Von darkblue im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 10.08.2005, 05:09

Stichworte

Berechtigungen

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