MySpace Header - Links mit Hover Effekt

[dennisburnsred]

Hallo liebes Forum,
ich bastel grade an einem MySpace Layout für die Band von einem guten Freund von mir.

Ich habe das Layout im Photoshop komplett zusammen gebastelt

Problem:
Header - In dem Header ist eine kleine Navi-Bar (Add To Friends etc.) diese Links Wollte ich mit einem Header Effekt versehen. Also die Schrift wird von schwarz zu weiß. Die Grafiken hab ich gesclict und mich ans coden gemacht.
Im Dreamweaver funktioniert der Hover-Effekt eigentlich ganz gut. Was mich stört ist das man mehrmals über die grafik mit der maus fahren muss damit der Hover Effekt zum Vorschein kommt. Was mach ich falsch? Ich möchte das der Hover Effekt sofort kommt und nicht erst nach 3 mal drüber fahren.

hier mal mein code den ich benutzt habe:
<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>

2. Problem: ich habe einfach mal angefangen den Header bei myspace einzusetzten. Hab ihn in die richtige position gesetzt und wollte mal schauen ob der Hover effekt funktioniert. Aber nichts tut sich.
Nicht einmal nach 20 mal drüber fahren.

Was mach ich da verkehrt?

hier mal mein code

<style>  
.KhAk {Create Image Navigation}  
  div.profileWidth {width:800px;  
  padding-bottom: 700px !important;  
  margin-bottom: 10px !important;}  
  
.KhAkImgNav a img {  
  border: 1px solid; border-color:white !important;}  
.KhAkImgNav a:hover img {  
  border: 1px solid; border-color:green !important;}  
  
.KhAkImgNav {position:absolute;  
  left:50%; top:0%; text-align:center;  
  white-space:nowrap !important; z-index:9;  
  margin-top:160px; margin-left:-400px;  
  _margin-top:160px; _margin-left:-390px;}  
</style>  
  
<div class="KhAkImgNav">  

>hier meine tabelle mit den images<  

</div>

Wär richtig nett wenn jemand mir bei meinem Problem helfen könnte.
Ich bin 17 Jahre alt und hab mir mein bisheriges Wissen selbst angeeignet.
Bin Also noch nicht die HTML,CSS-Leuchte :)

Ich hoffe mal ich bin im richtigen Thread :>

Grüße, Dennis

[Simon]

Im Dreamweaver funktioniert der Hover-Effekt eigentlich ganz gut. Was mich stört ist das man mehrmals über die grafik mit der maus fahren muss damit der Hover Effekt zum Vorschein kommt. Was mach ich falsch? Ich möchte das der Hover Effekt sofort kommt und nicht erst nach 3 mal drüber fahren.

Das Problem ist wahrscheinlich das die Grafik erst geladen werden, muss. Darum dauerts ein bisschen.

MfG
Simon

[Thomas J.S.]

Hallo

onMouseOver=src="...v_03.jpg"

Dass, das so nicht gehen wird, muss dir klar sein.
Wenn dann bitte onMouseOver="src=' .... .jpg'" beachte die Setzung der Anführungszeichen.
Noch etwas besser wäre onMouseOver="this.src=' .... .jpg'"

Wobei das noch immer nicht so wirklich toll ist. Du muss auch bedenken, dass du dabei nicht nur über Bild "drüberfährst" sondern auch über den eigentlichen Link.

Schaue dir die Seite: http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#img an, da ist eich ein Bildwechel-Funktion dabei.

Du könntest dir eine kleine JavasCript-Funktion schreiben, die das Bildwechsel macht.
Wirklich sehr einfach könnte das so aussehen:

  
function mausDrueber(bildID) {  
  document.getElementById(bildID).src = "hoverbild.jpg";  
}  
function mausDrunter(bildID) {  
  document.getElementById(bildID).src = "originalbild.jpg";  
}  
  

<a href="..." onmouseover="mausDrueber('dasBild') onmouseout="mausDrunter('dasBild')"><img id="dasBild" src="...HeaderUnHov_03.jpg" border="0"></a>

Grüße
Thomas