MySpace Header Hover Effekt ?!

pappalapp · 17.10.2009

Hallo liebe Forum-User und hoffentlich HTML-Geeks die mir helfen können. ^^
Ich habe im Photoshop ein Layout Für eine Band von Freunden erstellt.
Habe das ganze geslict und im Dreamweaver zusammen gebastelt.

Ich wollte das layout Schritt für schritt aufbauen und bin noch ziemlich am anfang. Beim Header.

Problem:

- der hover effekt erscheind erst nach ein paar mal mit der maus drüber gehen.

hier mal mein code

HTML:

<table id="Head" width="864" height="698" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="5">
            <img src="http://i677.photobucket.com/albums/vv140/stsadesign/PainInChainsOkt09/HeaderUnHov_01.jpg" alt="headpicture"></td>
    </tr>
    <tr>
        <td>
            <img src="http://i677.photobucket.com/albums/vv140/stsadesign/PainInChainsOkt09/HeaderUnHov_02.jpg" alt="contact"></td>
        <td>
            <a href="http://friends.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendId=372166779"><img src="http://i677.photobucket.com/albums/vv140/stsadesign/PainInChainsOkt09/HeaderUnHov_03.jpg" onMouseOver=src="http://i677.photobucket.com/albums/vv140/stsadesign/PainInChainsOkt09/HeaderHov_03.jpg"  onMouseOut=src="http://i677.photobucket.com/albums/vv140/stsadesign/PainInChainsOkt09/HeaderUnHov_03.jpg" border="0"></a></td>
        <td>
            <a href="http://messaging.myspace.com/index.cfm?fuseaction=mail.messageV3&friendID=372166779"><img src="http://i677.photobucket.com/albums/vv140/stsadesign/PainInChainsOkt09/HeaderUnHov_04.jpg" onMouseOver=src="http://i677.photobucket.com/albums/vv140/stsadesign/PainInChainsOkt09/HeaderHov_04.jpg"  onMouseOut=src="http://i677.photobucket.com/albums/vv140/stsadesign/PainInChainsOkt09/HeaderUnHov_04.jpg" border="0"></a></td>
        <td>
            <a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=372166779"><img src="http://i677.photobucket.com/albums/vv140/stsadesign/PainInChainsOkt09/HeaderUnHov_05.jpg" onMouseOver=src="http://i677.photobucket.com/albums/vv140/stsadesign/PainInChainsOkt09/HeaderHov_05.jpg"  onMouseOut=src="http://i677.photobucket.com/albums/vv140/stsadesign/PainInChainsOkt09/HeaderUnHov_05.jpg" border="0"></a></td>
        <td>
            <a href="http://comment.myspace.com/index.cfm?fuseaction=user.viewProfile_commentForm&friendID=372166779"><img src="http://i677.photobucket.com/albums/vv140/stsadesign/PainInChainsOkt09/HeaderUnHov_06.jpg" onMouseOver=src="http://i677.photobucket.com/albums/vv140/stsadesign/PainInChainsOkt09/HeaderHov_06.jpg"  onMouseOut=src="http://i677.photobucket.com/albums/vv140/stsadesign/PainInChainsOkt09/HeaderUnHov_06.jpg" border="0"></a></td>
    </tr>
</table>

und hier noch die html datei:

ich hab dann einfach mal weiter gebastelt
und den header angefangen bei myspace einzusetzen.
der Hover effekt funktioniert hier überhaupt gar nicht.
hier der code den ich benutzt habe:

HTML:

<style>
.KhAk {Create Image Navigation}        
  div.profileWidth {width:800px;
  padding-bottom: 700px !important;
  margin-bottom: 10px !important;}  
                                      
.KhAkImgNav {position:absolute;
  left:50%; top:0%; text-align:center;
  white-space:nowrap !important; z-index:9;
  margin-top:174px; margin-left:-419px;
  _margin-top:174px; _margin-left:-419px;}
</style>

<div class="KhAkImgNav">    
<table id="Head" width="864" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="5">
            <img src="http://i677.photobucket.com/albums/vv140/stsadesign/PainInChainsOkt09/HeaderUnHov_01.jpg" alt="headpicture" /></td>
    </tr>
    <tr>
        <td>
            <img src="http://i677.photobucket.com/albums/vv140/stsadesign/PainInChainsOkt09/HeaderUnHov_02.jpg" alt="contact" /></td>
        <td>
            <a href="http://www.msplinks.com/MDFodHRwOi8vZnJpZW5kcy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRJZD0zNzIxNjY3Nzk="><img src="http://i677.photobucket.com/albums/vv140/stsadesign/PainInChainsOkt09/HeaderUnHov_03.jpg" border="0" /></a></td>
        <td>
            <a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVzc2FnZVYzJmZyaWVuZElEPTM3MjE2Njc3OQ=="><img src="http://i677.photobucket.com/albums/vv140/stsadesign/PainInChainsOkt09/HeaderUnHov_04.jpg" border="0" /></a></td>
        <td>
            <a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=372166779"><img src="http://i677.photobucket.com/albums/vv140/stsadesign/PainInChainsOkt09/HeaderUnHov_05.jpg" border="0" /></a></td>
        <td>
            <a href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdQcm9maWxlX2NvbW1lbnRGb3JtJmZyaWVuZElEPTM3MjE2Njc3OQ=="><img src="http://i677.photobucket.com/albums/vv140/stsadesign/PainInChainsOkt09/HeaderUnHov_06.jpg" border="0" /></a></td>
    </tr>
</table>      
</div>

ich hoffe mal ihr versteht mich soweit^^

wär echt richtig cool wenn ihr mir helfen könntet
ich bin erst 17 jahre alt und hab mir mein photoshop- und html-wissen selber angeeignet.

danke schonmal

sokie · 17.10.2009

AW: MySpace Header Hover Effekt ?!

leg in deine a elemente keine <img>, sondern definiere sie mit display:block, höhe und breite, und setze die gtrafiken als hintergrund ein. dannkannst du sie über :hover mit dem entsprechenden hoverbild im css belegen.

pappalapp · 17.10.2009

AW: MySpace Header Hover Effekt ?!

oke ich bin ehrlich..
ich versteh nix wovon du redest ^^
danke schonmal das du mir hilfst
könntest du mal ein bespiel zeign?

pappalapp · 20.10.2009

AW: MySpace Header Hover Effekt ?!

20.10.2009:
Also, ich hab jetzt eine andere Variante für den header gewählt.

HTML:

<style>
body table { margin-top: 730px; }
body td table, body div table { margin-top: 0;} 

.header {position: absolute; width: 800px; height: 873px; margin-left: -400px; left: 50%; top: 0px;}

div.navigation a:hover{
    border-top: none;
    opacity: 0.0;
    filter: alpha(opacity=0);
width: 0px; 
height: 0px;    
        z-index:2;
}
.navigation {position: absolute; top: 862px; left: 50%; height: 32px; width: 800px; overflow: visible; background-color: none; margin-left: -400px; text-align: center; z-index:2;}
  </style>
                    <div class="header">
<table id="Head" width="800" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <img src="http://i709.photobucket.com/albums/ww100/SailThisShipAlone/PICLay/PICHeader01.jpg" width="800" height="174" /></td>
    </tr>
    <tr>
        <td>
            <img src="http://i709.photobucket.com/albums/ww100/SailThisShipAlone/PICLay/PICHeader02.jpg" width="800" /></td>
    </tr>
    <tr>
        <td>
            <img src="http://i709.photobucket.com/albums/ww100/SailThisShipAlone/PICLay/PICHeader03.jpg" /></td>
    </tr>
</table>
                    </div>
                    <div class="navigation">
<table id="navigation" width="800" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <img src="http://i709.photobucket.com/albums/ww100/SailThisShipAlone/PICLay/PICHeader04.jpg" width="292" height="32" alt="" /></td>
        <td>
            <img src="http://i709.photobucket.com/albums/ww100/SailThisShipAlone/PICLay/PICHeader05.jpg" width="141" height="32" alt="" /></td>
        <td>
            <img src="http://i709.photobucket.com/albums/ww100/SailThisShipAlone/PICLay/PICHeader06.jpg" width="120" height="32" alt="" /></td>
        <td>
            <img src="http://i709.photobucket.com/albums/ww100/SailThisShipAlone/PICLay/PICHeader07.jpg" width="116" height="32" alt="" /></td>
        <td>
            <img src="http://i709.photobucket.com/albums/ww100/SailThisShipAlone/PICLay/PICHeader08.jpg" width="131" height="32" alt="" /></td>
    </tr>
</table>
                    </div>

hab aus einem DIV -> 2 gemacht ^^
Im "Navigations-Div" sin die Buttons die ich Hovern bzw. Rollovern will.

Meine Frage: könnte mir mal jemand in meinen Code editieren, so das 1 Button den Rollovereffekt hat?
Ich google den ganzen Tag und nichts will so wirklich funktionieren. An einem Beispiel könnt ichs sicher besser begreifen.

Hier mal die die Hover-Image URL= für den 1. Button (Add To Friends, bzw: )
Hier das Hoverimage:

ich wär unendlich dankbar!

achja: das ganze ist eine Non-Profit sache, ich mach das nur um die Band meine Kumpels zuunterstützen und selber ein bissl mein Gehirn weiter "auszubauen"

^^

grüße