Bildadresse bei onmousehover ändern

[Leonard]

Hallöle,

Ich habe unter zu Hilfenahme von CSS einen Div-Container erstellt, der sich in der Mitte meines Dokuments befindet und eine prozentuale Breite hat. In diesem Bereich befindet sich eine Grafik, die sich ebenfalls an die prozentuale Breite anpasst (um jegliche Auflösung zu gewährleisten):

CSS:

#logo {  
    background:none;  
    position:absolute;  
    top:70px;  
    margin-top:0px;  
    left:-7.5%;  
    margin-left:50%;  
    width:15%;  
    height:38px;  
    border: 0px;  
}  

HTML:

<div id="logo">  
<img src="images/logo.png" width="100%" height="38px">  
</div>  

Jetzt möchte ich gerne diese Grafik in einen Link verwandeln. ich weis wie man es in CSS schreibt:

#link1 a:link, #link1 a:visited, #link1 a:active {  
    display:block;  
    border: 0px;  
    background-image:url(images/link.png);  
    background-repeat: none;  
    width: 153px;  
    height: 30px;  
    color:none;  
    text-decoration:none;  
}  
  
#link1 a:hover {  
    display:block;  
    border: 0px;  
    background-image:url(images/link-h.png);  
    background-repeat: none;  
    width: 153px;  
    height: 30px;  
    color:none;  
    text-decoration:none;  
}

Dabei geht aber meine PROZENTUALE Breite verloren, da es sich bei diesem Modell um eine Hintergrundgrafik handelt, die man nicht prozentual beschreiben darf. -leider-

Kann mir jemand einen Tipp geben, wie man vielleicht einfach nur die Bildadresse beim Mouse-Hover ändern kann?

Euer Leonard

[Leonard]

Hallöle > Hallöle,

Ich habs schon gelöst:

  
<script type="text/javascript">  
Zweitbild = new Image();  
Drittbild = new Image();  
Zweitbild.src = "images/logo-hover.png";  
Drittbild.src = "images/logo.png";  
function Bildwechsel1 () {  
  document.logo.src = Zweitbild.src;  
}  
function Bildwechsel2 () {  
  document.logo.src = Drittbild.src;  
}  
</script>  

...und
<a href="start.html"><img src="images/logo.png" width="100%" height="38px" onmouseover="javascript:Bildwechsel1 ()" onmouseout="javascript:Bildwechsel2 ()" name="logo"></a>

Euer Leonard

[Gunnar Bittersmann]

@@Leonard:

nuqneH

Ich habs schon gelöst:

Du hast ein Katzenbaby getötet. Auch wenn man Katzen nicht mag, das ist keine Lösung.

<a href="start.html"><img src="images/logo.png" width="100%" height="38px" onmouseover="javascript:Bildwechsel1 ()" onmouseout="javascript:Bildwechsel2 ()" name="logo"></a>

Die Sprungmarke "javascript" ist unsinnig.

Qapla'

[Leonard]

Hallöle

Gunnar

Du hast ein Katzenbaby getötet.

Okay, du hast Recht.
Ich bin allerdings eher ein Hunde-Typ deswegen verzeih mir meinen Fehltritt

Auch wenn man Katzen nicht mag, das ist keine Lösung.

Dazu muss ich Folgendes sagen: FALSCH!!
Es ist vielleicht nicht DIE Lösung, es ist jedoch EINE Lösung, meine Lösung. Ich bedanke mich jedoch für deine Hilfe die du mir unterschwellig hast zukommen lassen. Denn das mit der bg-size hatte ich nicht gekannt.

[Gunnar Bittersmann]

@@Leonard:

nuqneH

ich weis wie man es in CSS schreibt:
#link1 a:link, #link1 a:visited, #link1 a:active

Nicht wirklich. Ein Link ist entweder :link oder :visited. Und wenn er auch bei :active gleich gestylt werden soll, macht keine der Pseudoklassen Sinn. Einfach #link1 a

Dabei geht aber meine PROZENTUALE Breite verloren, da es sich bei diesem Modell um eine Hintergrundgrafik handelt, die man nicht prozentual beschreiben darf. -leider-

Wieso sollte man das nicht dürfen? Es gibt die CSS-Eigenschaft background-size, die von so gut wie alle gängigen Browsern bis auf IE < 9 unterstützt wird.

Kann mir jemand einen Tipp geben, wie man vielleicht einfach nur die Bildadresse beim Mouse-Hover ändern kann?

Wie du’s getan hast: #link1 a:hover { background-image:url(images/link-h.png) }

Die Eigenschaften, die sich gegenüber #link1 a nicht ändern, bei #link1 a:hover nochmal anzugeben, ist unsinnig.

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Wie du’s getan hast: #link1 a:hover { background-image:url(images/link-h.png) }

Oder auch nicht.

Um HTTP-Request zu sparen, bietet es sich an, Bilddaten inline im Stylesheet zu haben (data-URL) oder Sprites zu verwenden.

Qapla'