Suche im Forum:
Suchen


Autor Nachricht
Beitrag02.10.2012 um 21:27 (UTC)    
Titel: Mousover Effekt
Antworten mit Zitat
Hallo liebe Forum Mitglieder
Und zwar hab ich ein kleines Problem Smile
Ich wollte gerne mehrere Bilder mit einem Mousover Effekt versehen Very Happy
Ich wollte gerne das wen man mit der Maus über das bild geht das dan ein anderes Bild erscheint "Hover effekt" Very Happy Jedoch hab ich jetzt das Problem das bei jedem Bild das selbe "Hover Bild" kommt jedoch hatte ich eig. für jedes Bild ein eigenes Hover Bild angeordnet Smile

Hier der "Ganze Code" Very Happy
Code:

<style type="text/css">
<!--
td.pic:hover{background-image: url(http://111server111.square7.ch//images/Iconhover/a2.png);}
-->
</style>
<table width="53" height="53">
    <tbody>
        <tr>
            <td class="pic" background="http://111server111.square7.ch//images/Icon/1.png">&nbsp;</td>
        </tr>
    </tbody>
</table>
<style type="text/css">
<!--
td.pic:hover{background-image: url(http://111server111.square7.ch//images/Iconhover/a1.png);}
-->
</style>
<table width="53" height="53">
    <tbody>
        <tr>
            <td class="pic" background="http://111server111.square7.ch//images/Icon/10.png">&nbsp;</td>
        </tr>
    </tbody>
</table>
<style type="text/css">
<!--
td.pic:hover{background-image: url(http://111server111.square7.ch//images/Iconhover/a3.png);}
-->
</style>
<table width="53" height="53">
    <tbody>
        <tr>
            <td class="pic" background="http://111server111.square7.ch//images/Icon/12.png">&nbsp;</td>
        </tr>
    </tbody>
</table>
<style type="text/css">
<!--
td.pic:hover{background-image: url(http://111server111.square7.ch//images/Iconhover/a4.png);}
-->
</style>
<table width="53" height="53">
    <tbody>
        <tr>
            <td class="pic" background="http://111server111.square7.ch//images/Icon/8.png">&nbsp;</td>
        </tr>
    </tbody>
</table>
<style type="text/css">
<!--
td.pic:hover{background-image: url(http://111server111.square7.ch//images/Iconhover/a5.png);}
-->
</style>
<table width="53" height="53">
    <tbody>
        <tr>
            <td class="pic" background="http://111server111.square7.ch//images/Icon/2.png">&nbsp;</td>
        </tr>
    </tbody>
</table>
<style type="text/css">
<!--
td.pic:hover{background-image: url(http://111server111.square7.ch//images/Iconhover/a6.png);}
-->
</style>
<table width="53" height="53">
    <tbody>
        <tr>
            <td class="pic" background="http://111server111.square7.ch//images/Icon/6.png">&nbsp;</td>
        </tr>
    </tbody>
</table>
<style type="text/css">
<!--
td.pic:hover{background-image: url(http://111server111.square7.ch//images/Iconhover/a7.png);}
-->
</style>
<table width="53" height="53">
    <tbody>
        <tr>
            <td class="pic" background="http://111server111.square7.ch//images/Icon/5.png">&nbsp;</td>
        </tr>
    </tbody>
</table>
<style type="text/css">
<!--
td.pic:hover{background-image: url(http://111server111.square7.ch//images/Iconhover/a8.png);}
-->
</style>
<table width="53" height="53">
    <tbody>
        <tr>
            <td class="pic" background="http://111server111.square7.ch//images/Icon/3.png">&nbsp;</td>
        </tr>
    </tbody>
</table>
<style type="text/css">
<!--
td.pic:hover{background-image: url(http://111server111.square7.ch//images/Iconhover/a9.png);}
-->
</style>
<table width="53" height="53">
    <tbody>
        <tr>
            <td class="pic" background="http://111server111.square7.ch//images/Icon/4.png">&nbsp;</td>
        </tr>
    </tbody>
</table>
<style type="text/css">
<!--
td.pic:hover{background-image: url(http://111server111.square7.ch//images/Iconhover/a10.png);}
-->
</style>
<table width="53" height="53">
    <tbody>
        <tr>
            <td class="pic" background="http://111server111.square7.ch//images/Icon/7.png">&nbsp;</td>
        </tr>
    </tbody>
</table>
<style type="text/css">
<!--
td.pic:hover{background-image: url(http://111server111.square7.ch//images/Iconhover/a11.png);}
-->
</style>
<table width="53" height="53">
    <tbody>
        <tr>
            <td class="pic" background="http://111server111.square7.ch//images/Icon/9.png">&nbsp;</td>
        </tr>
    </tbody>
</table>
[/code]
______________



Zuletzt bearbeitet von hotel-habbos am 02.10.2012, 22:28, insgesamt einmal bearbeitet
↑
Beitrag03.10.2012 um 08:47 (UTC)    
Titel:
Antworten mit Zitat
Hallo!

Das liegt daran, dass alle deine Tabellenzellen die Klasse pic haben.
Jede einzelne hat ein anderes HIntergrundbild.

In der CSS-Anweisung davor definierst du den Hovereffekt für jedes Element der Klasse pic neu => immer das gleiche Bild.

Wenn du die Klasse durch eine ID ersetzt, sollte das klappen:
Zitat:
<div id="pic1" style="background-image=url(eins-a.jpg);">
<div id="pic2" style="background-image=url(zwei-a.jpg);">
<div id="pic3" style="background-image=url(drei-a.jpg);">
<div id="pic4" style="background-image=url(vier-a.jpg);">
....
....

Hier kannst du das Standard-Hintergrundbild einstellen.

Der CSS-Code dazu:
Zitat:
<style type="text/css"> <!--
#pic1:hover { background-image:url(eins-b.jpg); }
#pic2:hover { background-image:url(zwei-b.jpg); }
#pic3:hover { background-image:url(drei-b.jpg); }
#pic4:hover { background-image:url(vier-b.jpg); }
/* beliebig */
/* erweiterbar... */
//--> </style>

Hier kannst du das Hintergrundbild beim Überfahren mit der Maus angeben.

Für das Beispiel habe ich div-Elemente verwendet. Du kannst aber natürlich auch Tabellenzellen nehmen Wink

Gruß,

TransInt
______________
Kein Support per PN - Im Forum hilft es allen!

Life is what happens while you are busy making other plans.
- John Lennon
↑
Beiträge der letzten Zeit anzeigen:   
  • Seite 1 von 1

  •  
    • Gehe zu:  


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de

© 2024 webme GmbH, Deutschland. Alle Rechte vorbehalten.