Bildgröße Mit Css ändern Bei Hover

#1 fogel

Aufsteiger

Gruppe: aktive Mitglieder
Beiträge: 21
Beigetreten: 02. Dezember 06
Reputation: 0

geschrieben 02. Februar 2010 - 03:34

Hallo,

ich hab mehrere Bilder, die ich bei einer eigentlichen Größe von 50*50 auf 40*40 per width und height verkleinert habe.

Wie kann ich diese nun per CSS und hover auf die Größe von 50*50 ändern?

Hab da was, aber damit ist vergrössert sich das Bild nicht zentrisch:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
 <title>Rollover mit CSS - Beispiel 5</title>
 <style>
   a	   { display:block;
			 background-image:url(http://bbfun.de.dedi968.your-server.de/images_40x40/Klaus.jpg);
			 width:42px; height:42px }
   a:hover { background-image:url(http://bbfun.de.dedi968.your-server.de/images_40x40/Klaus.jpg); width:50px; height:50px; }
 </style>
</head>
<body>
  <h1>Bild-Button mit CSS</h1>
  <p><a href="#">&nbsp;</a></p>
</body>
</html>

Jemand ne Ahnung wie ich das hinbekomm, dass das Bild zentrisch vergrössert wird?

Nach oben
Nach oben of the page up there ^

#2 cien

Alter Hase

Gruppe: aktive Mitglieder
Beiträge: 363
Beigetreten: 01. Dezember 04
Reputation: 36
Geschlecht:Männlich
Wohnort:Niedersachsen

geschrieben 02. Februar 2010 - 04:25

einfach gehts doch damit, wenn du a in ein div setzt und das div zentrierst. dann kannst dir auch das display sparen!

im (x)html

<h1>Bild-Button mit CSS</h1>
<div><a href="#">&nbsp;</a></div>

und im css

div { margin: 0 auto; }

a { background-image: url(http://bbfun.de.dedi968.your-server.de/images_40x40/Klaus.jpg);
	  width: 42px;
	  height: 42px; }

a:hover { background-image: url(http://bbfun.de.dedi968.your-server.de/images_40x40/Klaus.jpg);
			   width: 50px;
			   height: 50px; }

so in etwa, ist spät - kann sein das da jetzt ein fehler drin ist - wäre jetzt jedenfalls meine idee...
ausserdem, wenn du das so aus deiner datei hier eingefügt hast, es fehlt am ende von height: 42px das ;

viele grüße

cien

Dieser Beitrag wurde von cien bearbeitet: 02. Februar 2010 - 04:48

Grüße
Cien

Ich bin notorischer Kleinschreiber! Also nicht wundern!

Nach oben
Nach oben of the page up there ^

#3 Witi

Supermond

Gruppe: aktive Mitglieder
Beiträge: 5.942
Beigetreten: 13. Dezember 04
Reputation: 43
Geschlecht:Männlich
Wohnort:Kingsvillage
Interessen:Frickeln

geschrieben 02. Februar 2010 - 08:02

Cien, ja das so sollte so funktionieren.
Übrigens, Bilder per CSS oder HTML kleiner darzustellen ist immer eine schlechte Idee. Browser müssen diese on-the-fly berechnen und interpolieren, was nie zu so guten Ergebnissen führt, als wenn man einfach mit einer kleineren Version des Bildes arbeiten würde. Zugegeben wird der Effekt bei 10 Pixel sicherlich nicht so hoch ausfallen.

[email protected] 0xAAE321A2

50226 - Witis Blog

Nach oben
Nach oben of the page up there ^

#4 Tienchen

Spezialist

Gruppe: aktive Mitglieder
Beiträge: 423
Beigetreten: 09. März 08
Reputation: 0
Geschlecht:Männlich

geschrieben 02. Februar 2010 - 16:58

Ich würde das ganze über "image sprites" lösen. Da steht eigentlich alles dazu (wenn auch leider nicht in Deutsch): http://www.alistapar...rticles/sprites
Also: Du erstellst zwei Icons (einmal das 40x40, einmal das 50x50), packst beide in eine Datei, und bei hover wird eben das andere Bild in der Datei ausgewählt.

Nach oben
Nach oben of the page up there ^

Thema verteilen:

Seite 1 von 1

WinFuture-Forum.de: Bildgröße Mit Css ändern Bei Hover - WinFuture-Forum.de