Problem mit CSS Rollover - was tun?

  • Problem mit CSS Rollover - was tun?

    Hallo Freunde der nächtlichen Codierung,

    ich habe hier ein Problem mit einem Rollover, der via CSS gestaltet wurde.

    Es sieht so aus, dass ich eine Liste habe, die aus Images besteht. Die Images vereinen zwei Bilder, einmal normal und einmal Rollover. Sobald die Mouse über ein Bild bewegt wird, wird es per CSS verschoben und es zeigt sich der Rollover-Teil des Bildes.

    Grundlage dafür bildet dieses kleine Tutorial von DrWeb

    http://www.drweb.de/csspraxis/css-rollover-menu.shtml

    Mein Problem ist jetzt, dass ich in meiner Liste zu wenig Platz habe, im Rollover-Bild aber einen Schatten darstellen möchte. Sobald der Rollover erfolgt liegt dann das jeweils untere Image vor dem Oberen und verdeckt einen Teil des Rollover-Bildes.

    Anbei ein Screenie davon. Habt Ihr eine Idee, wie man das lösen kann?

    Vielleicht auch durch eine andere Technik (also nicht CSS-Rollover)??

    Tausend Dank!!

    xound
    Bilder

    • rollover.jpg

      8,54 kB, 291×226, 649 mal angesehen
    Um Rekursionen zu verstehen, muss man zuerst Rekursionen verstehen...

  • //EDIT.. hab das problem jetzt glaub ich etwas ausgeweitet, aber falls du mehrere spalten modifizieren willst, hast du jetzt immerhin den code

    naja, bei mouseover kannst du ja jede beliebige javascript funktion aufrufen
    du kannst also auch die zellen drüber und drunter manipulieren

    ist jetzt nicht sonderlich schön, aber vielleicht hilft dir das weiter:

    Quellcode

    1. <html><head><script type="text/javascript">
    2. function clean(str) {
    3. //ganze spalte zuruecksetzen
    4. for(var i=1; i<=10; i++) {
    5. var ob = document.getElementById('y'+i);
    6. if(ob) ob.style.backgroundColor = '#ffffff';
    7. }
    8. }
    10. function hover(str) {
    11. var y = eval(str.substr(1));
    12. var ob = document.getElementById('y'+(y+1));
    13. if(ob) ob.style.backgroundColor = '#afafaf';
    14. var ob2 = document.getElementById('y'+(y-1));
    15. if(ob2) ob2.style.backgroundColor = '#afafaf';
    19. }
    20. </script></head>
    22. <body>
    24. <table border="1">
    25. <tr>
    26. <td id="y1" onmouseover="hover(this.id)" onmouseout="clean()">y1</td>
    27. </tr>
    28. <tr>
    29. <td id="y2" onmouseover="hover(this.id)" onmouseout="clean()">y2</td>
    30. </tr>
    31. <tr>
    32. <td id="y3" onmouseover="hover(this.id)" onmouseout="clean()">y3</td>
    33. </tr>
    34. <tr>
    35. <td id="y4" onmouseover="hover(this.id)" onmouseout="clean()">y4</td>
    36. </tr>
    37. <tr>
    38. <td id="y5" onmouseover="hover(this.id)" onmouseout="clean()">y5</td>
    39. </tr>
    40. <tr>
    41. <td id="y6" onmouseover="hover(this.id)" onmouseout="clean()">y6</td>
    42. </tr>
    43. <tr>
    44. <td id="y7" onmouseover="hover(this.id)" onmouseout="clean()">y7</td>
    45. </tr>
    46. <tr>
    47. <td id="y8" onmouseover="hover(this.id)" onmouseout="clean()">y8</td>
    48. </tr>
    49. <tr>
    50. <td id="y9" onmouseover="hover(this.id)" onmouseout="clean()">y9</td>
    51. </tr>
    52. <tr>
    53. <td id="y10" onmouseover="hover(this.id)" onmouseout="clean()">y10</td>
    54. </tr>
    55. </table></body>
    56. </html>
    Alles anzeigen

  • "mad" schrieb:

    tritt der fehler auch auf, wenn du zwei verschiedenen Bilder nimmst?

    ich machs immer so:

    a ohne hover -> hintergrund1.bild

    a hover -> hintergrund2.bild


    bei mir klappt das immer...


    Ja, natürlich tritt das Problem auch bei 2 verschiedenen Bildern auf.

    Das Problem liegt an den Div-Layern. Man muss sich das wie eine Treppe vorstellen, bei der die jeweils folgende Stufe einen Teil der vorherigen Stufe verdeckt.

    Ich möchte mit meinem "Austauschbild" in den Bereich des nachfolgenden Bildes rein.

    (Achtung: Baustelle, Stylesheets sind nur für Internet Explorer angepasst im Momant, also am besten iE verwenden!!)

    Aufgrund der Tatsache, dass das Austauschbild mit dem "Schatten" einfach in den Bereich des vorherigen und des nachfolgenden Bildes reingeht, wird der untere Bereich abgeschnitten (weil das nachfolgende Bild "drüberliegt") ...

    Hm, ich bin ratlos?!?

    Vielleicht noch eine Idee? d0nut? Lässt sich der Code oben darauf anwenden?
    Um Rekursionen zu verstehen, muss man zuerst Rekursionen verstehen...

  • "mad" schrieb:

    schonmal mit dem z-index probiert?

    damit kannst du die Reihenfolge der div-layer anpassen, vielleicht kannst du ja sagen, dass er bei hover den z-index anpasst

    nur so 'ne idee

    http://www.css4you.de/z-index.html

    cya


    Z-index ist mir auch in den Sinn gekommen. Aber das ist nicht praktikabel: Wenn man Z-Index anwendet, dann ist entweder das vorherige oder das nachfolgende Bild im Hintergrund.

    Es muss aber eine Lösung geben, bei der beide Bilder, also das vorherige und das nachfolgende für den Moment des Rollovers im Background sind ...?!?

    Ob das überhaupt geht?
    Um Rekursionen zu verstehen, muss man zuerst Rekursionen verstehen...

  • Stimmt, der Code sollte das Problem lösen.

    Allerdings habe ich jetzt festgestellt, dass Z-INDEX überhaupt keine Auswirkung hat auf das Überlappen der einzelnen Layer.

    Mir ist das unklar. Vielleicht kann sich das jemand mal ansehen.

    Ich habe mal eine kleine Datei mit 3 Buttons hochgeladen ... irgendwie kommt mir das ganze auch als sehr unelegant gelöst vor. Das grundsätzliche Problem ist übrigens, dass die Buttons im Endeffekt sehr nah untereinander liegen müssen, damit das nicht so viel Platz kostet.

    Die einzelnen Bilder, die ich verwendet habe, sehen so aus (immer normal + mouseover gekoppelt)

    Gibt es dafür keine funktionierende Lösung? Wo liegt denn mein Fehler?
    Um Rekursionen zu verstehen, muss man zuerst Rekursionen verstehen...

  • ach du arbeitest ja mit "verschiebung"
    die möglichkeit hab ich noch nie gesehen, aber eigentlich auch nicht schlecht

    warum kein normaler hover

    Quellcode

    1. <style type="text/css">
    2. .h {
    3. background-image:url('3.jpg');
    4. background-position:left top;
    5. background-repeat:no-repeat;
    6. display:block;
    7. padding-left:75px;
    8. padding-top:10px;
    9. width:200px;
    10. height:30px;
    11. text-decoration:none;
    12. color:#00aa00;
    13. }
    14. .h:hover {
    15. background-image:url('2.jpg');
    16. }
    17. </style>
    19. <a class="h" href="">Ambient Media</a>
    20. <a class="h" href="">Ambient Media</a>
    Alles anzeigen

  • Das ist natürlich auch gut.

    Aber auch bei dieser Möglichkeit entsteht das gleiche Problem. Die einzelnen Einträge sind zu weit auseinander. Sobald ich sie per CSS näher aneinanderrücken möchte, entsteht die beschriebene Problematik.

    Ich veranschauliche das mal an einem Bild.

    Links sieht man Deine Version. Rechts ist dargestellt, wie die Abstände sein müssen. Leider lassen diese Abstände nicht zu, dass die Schattierung beim Mouseover korrekt dargestellt wird. Das mit dem z-Index funktioniert nicht so recht - weder bei Deiner noch bei meiner Version. :/

    Vielleicht noch eine andere Idee?? Danke vorab!!
    Bilder

    • Unbenannt-18.gif

      29,84 kB, 388×246, 558 mal angesehen
    Um Rekursionen zu verstehen, muss man zuerst Rekursionen verstehen...

  • "d0nUt" schrieb:

    aber da ist doch das bild dran schuld
    dann musst du das bild verkleinern

    wenn du die höhe von 30px auf 25px reduzierst und die hintergrundausrichtung mit background-position:left center; einstellst, sieht es übrigens auch noch vernünftig aus


    Sorry, ich glaube ich denke irgendwie zu verquer.

    Also: Wenn ich das Bild verkleinere, dann kann ich doch diesen Schatteneffekt beim Mouseover nicht mehr hinbekommen, da dieser einfach größer ist, als der Abstand es zulässt.

    Verstehst Du was ich meine? Kann auch sein, dass ich einfach momentan nicht begreife, wie ich das mit dem Schatten bei geringem Abstand zwischen den einzelnen Pics sauber lösen kann.
    Um Rekursionen zu verstehen, muss man zuerst Rekursionen verstehen...