Mit CSS Rollover horizontal darstellen

Dieses Thema im Forum "Webentwicklung" wurde erstellt von eVeReSt, 21. Juni 2007 .

  1. 21. Juni 2007
    Hallo!

    Also ich habe mehrere Rollover mit CSS erstellt. Nun möchte ich diese mit ebenfalls mit CSS in eine horizontale Reihe bringen. Wie mache ich das? Ich weiss, dass das ganze mit dem Boxmodell zu tun hat (oder?!?) aber irgendwie schaffe ich das nicht bzw. eignentlich schaffe ichs aber nicht mit Bilder-Rollover(also wo sich zwei Bilder (xx.jpg) ändern)

    Vielen Dank für jede Hilfe!

    mfg eVeReSt

    Mit BW's werfe ich nur so um mich
     
  2. 21. Juni 2007
    AW: Mit CSS Rollups horizontal darstellen

    "Rollover" (?) oder "Mouseover" (?) weil Rollup ist jetzt mir jetzt nicht son begriff. Bilder ändern mit css, nur bei hintergründen und so ansonsten muss JS her!
     
  3. 21. Juni 2007
    AW: Mit CSS Rollups horizontal darstellen

    Mensch, danke, ich wusste doch das ich den Falschen begriff hatte :angry: thx, ist editiert!

    Nö, geht auch mit css! Ich habs ja selber gemacht und es funktioniert zu 1000000 %!!

    Code:
    .links #A{
    background-image: url("#");
    width: 79px;
    height: 32px;
    display:block;
    }
    
    .links #A:hover {
    background-image: url("#");
    }
    
     
  4. 22. Juni 2007
    AW: Mit CSS Rollups horizontal darstellen

    ?
    dir is scho klar das background-image zu deutsch hintergrund-bild heißt oder?
    ...
    wenn du bilder wechseln willst, dann kannst du in einem link ein bild verstecken oder anzeigen lassen indem du auf den mouseover via css reagierst:

    HTML:
    <style type="text">
    .link a .a { display: block; }
    .link a .b { display: none; }
    .link a:hover .a { display: none; }
    .link a:hover .b { display: block; }
    </style>
    <div class="link">
    <a href="#"><img class="a" src="bild.png" /><img class="b" src="bild2.png" /></a>
    </div>
    ansonsten musst du mi JS arbeiten.
     
  5. 22. Juni 2007
    AW: Mit CSS Rollups horizontal darstellen

    Ja das ist für mich schon klar was Background heisst. Vielleicht meinten MakenX und ich nicht das gleiche, darum sry, falls ich was falsch interpretiert habe!

    thx für das Mouseover, ich werds mal ausprobieren!
     
  6. 22. Juni 2007
    AW: Mit CSS Rollups horizontal darstellen

    Also ich meinte schon das richtige, aber da du dich nicht klar ausgedrückt hast musste ich dir beide Methoden des Bildänderns vorstellen, nämlich das Ändern eines Hintergrundes per CSS oder das direkte Ändern der Bildquelle per JS!
     
  7. 22. Juni 2007
    AW: Mit CSS Rollups horizontal darstellen

    als hier nochmal die sichere css methode (bug behoben):
    HTML:
    <html>
    <head>
    <style type="text/css"> 
    .link a .a { display: inline; } 
    .link a .b { display: none; } 
    .link a:hover .a { display: none; } 
    .link a:hover .b { display: inline; } 
    </style> 
    </head>
    <body>
    <div class="link"> 
     <a href="#">
     <!--befor:--><img class="a" src="http://www.bbc.co.uk/radio1/fabioandgrooverider/includes/media/banner1.gif" border="0" alt="Linkgrafik 1"/>
     <!--after:--><img class="b" src="http://www.bbc.co.uk/radio1/media/images/onair/r1logo.gif" border="0" alt="Linkgrafik 2"/>
     </a> 
    </div>
    </body>
    </html>
    und hier die javascript methode:
    HTML:
    <a href="#"><img src="http://www.bbc.co.uk/radio1/fabioandgrooverider/includes/media/banner1.gif" onmouseover="this.alt = this.src; this.src = 'http://www.bbc.co.uk/radio1/media/images/onair/r1logo.gif';" onmouseout="this.src = this.alt;" alt="Linkgrafik" border="0"/></a>
     
  8. 22. Juni 2007
    AW: Mit CSS Rollups horizontal darstellen

    Genau das habe ich bisher (CSS Version), nur möchte ich gern diese Navi ohne Tabelle horizontal darstellen, so wies hier beschrieben ist. Nur halt, nicht das ich mit CSS die Buttons definiere sondern, dass ich genau dein Script einfügen kann. Nur das ist mein Problem, wie füge ich das Script richtig ein, dass es auch funktioniert?
     
  9. 22. Juni 2007
    AW: Mit CSS Rollups horizontal darstellen

    Was bitte? Also ich muss dir leider attestieren, dass du deine HTML - Probleme nicht wirklich "artikulieren" kannst.

    Um nochmal den Thread aufzurollen. Du hast deine Navigation bisher mit einer Tabelle gelöst, jeder Navigationslink ist ein Bild welches sich beim mouseover ändern soll. Nun hast du dein mouseover des Bildes gelöst und möchtest deine Navigation über eine Liste formatieren, deren Listenpunkte nicht untereinander stehen, sondern nebeneinander?

    EDIT: gelöscht ....


    mann mann mann ... schreib Murdocs
    HTML:
    <!--befor:--><img class="a" src="http://www.bbc.co.uk/radio1/fabioandgrooverider/includes/media/banner1.gif" border="0" alt="Linkgrafik 1"/>
     <!--after:--><img class="b" src="http://www.bbc.co.uk/radio1/media/images/onair/r1logo.gif" border="0" alt="Linkgrafik 2"/>
    in die selfhtml liste und das css einfach dazu!
     
  10. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.