Button Bildwechsel Größenproblem

[LydiRedAngel]

Hey,

habe für einen Bekannten versucht mit CSS ne Art Rollover-Button zu machen, so wie auf dieser Seite: WebDesign - Tips und Tricks: Bildwechsel clever mit CSS

Wenn man mit der Maus über den Button geht, wird das andere Bild auch angezeigt, aber in der falschen Größe. Er soll natürlich genauso groß sein, wie das Button-Bild vorher. Die 2 Bilder haben exakt die gleiche Größe (267x89) Weiß nicht mehr, woran es noch liegen kann.

Wär klasse, wenn mal jmd drüber schauen könnte. Wie gesagt, ist von einem Bekannten. Von mir ist nur das:

<style type="text/css">
#test a {
background: url(3.jpg); no-repeat;
display:block; width:150px; height:50px; /* Linkbereich begrenzen */
}
#test img {
display:block; border:0; height:50px; width:150px;
}
#test a:hover img {
visibility: hidden;
}
#test a:hover { /* Workaround fuer IE 5.5 und 6 */
border:0; height:50px; width:150px;
}
* html #test a {
margin-right:1px;
}
* html #test a:hover {
width:150px; margin-right:0; /* Workaround fuer IE 5.01 */
}

</style>

...

<p id="test"><a href="#test"><img src="2.jpg" width="150" height="50" alt="Logo" /></a></p><br />

Im Anhang vollständige Textdatei.

Grüße

 

[nichtsgeht]

Füge mal margin:0 hinzu:

#test a {
    background: url(3.jpg) no-repeat; [COLOR=Red]margin:0;[/COLOR]
    display:block; width:150px; height:50px; /* Linkbereich begrenzen */
  }

EDIT: Hier natürlich auch: (außerdem wüde ich es CSS-gerecht machen)

<img src="2.jpg"  style="width:150px; height:50px; margin: 0;" alt="Logo" />

 

[LydiRedAngel]

Danke für deine Antwort.

Hab das mit dem margin gemacht, aber der Button der beim mouseover erscheint, ist immer noch zu groß. da hat sich nichts geändert. Margin macht doch auch nur was mit Abständen und nix mit der dargestellten Größe oder?!

 

[nichtsgeht]

Eben, da habe ich mir gedacht, da das eine Bild als background deklariert ist, und evtl. auch im margin-Bereich sichtbar ist. Das andere Bild aber ohne margin angezeigt wird. War ja auch nur eine Vermutung.
Ich würde dir aber Empfehen, beides als BACKGROUND-IMAGE zu deklarieren:

 #test a {
    background: url(bild1.jpg) no-repeat;
    display:block; width:150px; height:50px; /* Linkbereich begrenzen */
  }
 #test a:hover {
     background: url(bild2.jpg) no-repeat;
}

Im HTML-Teil kannst du es dann so machen:

<a href="#test">&nbsp;</a>

Oder du setzt ein transparentes Bild ein

EDIT: Übrigens hat dein CODE ein Fehler, den ich blöderweise auch noch übernommen habe.
Bei background kommt zwischen der url und no-repeat kein Semikolon.

 

[LydiRedAngel]

Habe nun beides als background-img. Dementsprechend werden beide in Originalgröße - also nicht hinein passend - dargestellt.

Naja, hab jetz einfach die Größe der Buttons geändert, so dass sie rein passen. Wenns halt net anders geht. (wollt ich eigentl nicht)

Danke dir.

 

[nichtsgeht]

Das wäre eine Frage, dich mich jetzt auch Intressiert: Kann man in ein Background-Image die Größe ändern ? So jedenfalls nicht

background: url(bild1.jpg) no-repeat 50%;

Vielecht kennt ja einer eine Antwort.

 

[gruenspan]

Naja, hab jetz einfach die Größe der Buttons geändert, so dass sie rein passen. Wenns halt net anders geht. (wollt ich eigentl nicht)

Warum änderst Du nicht die Größe des Links? ;ugl

 #test a {
    background: url(3.jpg); no-repeat;
    display:block; width:267px; height:89px; /* Linkbereich begrenzen */
  }

Das wäre eine Frage, dich mich jetzt auch Intressiert: Kann man in ein Background-Image die Größe ändern ?

nein