Bild-Überschlageffekt bei Mouseover

  • Ein simples RollOver mit Überschlageffekt per CSS.


    Das Bild der Homepage: [Blockierte Grafik: http://hilfe.unofficialwsx5.de/v9screens/pics/ueberschlag-img_a.png]


    Das Bild bei Mouseover: [Blockierte Grafik: http://hilfe.unofficialwsx5.de/v9screens/pics/ueberschlag-img_p.png]


    Code für den CSS-Bereich:


    Code für das HTML-Objekt:

    Code
    1. <a class="demoimg" href="#x">
    2. <img src="images/bild.jpg" alt="Bild"/></a>


    Das entsprechende Bild befindet sich hier im Ordner "images" auf dem Webserver und muss manuell übertragen werden oder als "Verlinkte Datei" in X5 angehangen werden.

    Mario


    Der einzige Lohn für Helfer ist ein Feedback.

  • Oder man spricht die jeweilige Klasse bzw. ID der Zelle vom Bildobjekt direkt an.


    Dazu habe ich mal ein Testprojekt erstellt und eine Testseite .


    Um gezielt Objekte anzusprechen muss man herausfinden welche ID das Objekt verwendet. Das kann man mit verschiedenen Tools die im Browser laufen z.B. Web Developer oder Firebug für den Browser von Mozilla.


    Man kann das ganze aber natürlich auch im Quelltext suchen. Im Testprojekt habe ich die ID´s der 3 Bilder im unteren Bereich (Pinguin) rausgesucht:


    CSS
    1. <style>
    2. /* gezielt Objekte ansprechen */
    3. #imObjectImage_13:hover, #imObjectImage_12:hover, #imObjectImage_11:hover {
    4. filter:alpha(opacity=50);
    5. -moz-opacity:0.50;
    6. opacity:0.50;
    7. }
    8. </style>


    oder man spricht einfach alle img Tags an...


    CSS
    1. <style>
    2. /* alle Bilder ansprechen die den img Tag verwenden */
    3. img:hover {
    4. filter:alpha(opacity=50);
    5. -moz-opacity:0.50;
    6. opacity:0.50;
    7. }
    8. </style>


    Im Testprojekt ist auf der Startseite nur das gezielte Ansprechen gezeigt. Der Code befindet sich im Head der Seite unter Eigenschaften der Seite.
    Auf den nachfolgenden Seiten wurden alle img Tags angesprochen.