• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Bilder "befestigen" das sie nicht mehr nach oben gedrückt werden können?

F

FBM

New member
Hallo,
ich hoffe ihr könnt mir weiterhelfen.

Ich habe mehrere Bilder in einen Banner, wenn man nun über eines drüber fährt wird es größer.
Das habe ich so gebaut:
PHP: 
....
<a href='LINK' target='_parent'><img src="BILD" onmouseover="(width='100')" onmouseout="(width='97')"></a>
....

Das Problem ist alle anderen Bilder werden, wenn man mit der Maus über ein Bild drüber fährt, nach OBEN gedrückt. (Bilder sind alle in einer reihe)

Kann man die Bilder irgendwie "befestigen" oder dafür sorgen das sie nach unten gedrückt werden?

Hoffe ihr habe verstanden was ich meine.

LG FBM
 
AW: Bilder "befestigen" das sie nicht mehr nach oben gedrückt werden können?

Du kannst alle Bilder einzeln fixieren... ist aber eine riesen Arbeit.
Oder du kannst das kompet ohne JS und mit reinem CSS machen :)hover + width und neg. margin).
 
AW: Bilder "befestigen" das sie nicht mehr nach oben gedrückt werden können?

Danke für die Antwort.

Aber wie genau fixiert man ein Bild?
Könntest du mir das an einen bsp. zeigen? >.<
Bin noch ziemlich neu was php angeht...
 
AW: Bilder "befestigen" das sie nicht mehr nach oben gedrückt werden können?

Ein Bild fixiert man mit eine Positionsangabe (position: fixed; )

Beispiel:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
img {
	width: 100px;
}
img:hover {
	position: relative;
	z-index: 2;
	width: 116px;
	margin: -6px -8px;
}
</style>
</head>
<body>
<img src="http://farm3.static.flickr.com/2227/3678675310_96a19ec7b1_z.jpg">
<img src="http://farm3.static.flickr.com/2227/3678675310_96a19ec7b1_z.jpg">
<img src="http://farm3.static.flickr.com/2227/3678675310_96a19ec7b1_z.jpg">
<img src="http://farm3.static.flickr.com/2227/3678675310_96a19ec7b1_z.jpg">
<img src="http://farm3.static.flickr.com/2227/3678675310_96a19ec7b1_z.jpg">
<img src="http://farm3.static.flickr.com/2227/3678675310_96a19ec7b1_z.jpg">
<img src="http://farm3.static.flickr.com/2227/3678675310_96a19ec7b1_z.jpg">
<img src="http://farm3.static.flickr.com/2227/3678675310_96a19ec7b1_z.jpg">
<img src="http://farm3.static.flickr.com/2227/3678675310_96a19ec7b1_z.jpg">
<img src="http://farm3.static.flickr.com/2227/3678675310_96a19ec7b1_z.jpg">
</body>
</html>

PS: Das hat gar nichts mit PHP zu tun, sondern nur mit CSS/HTML.
 
Zuletzt bearbeitet:
AW: Bilder "befestigen" das sie nicht mehr nach oben gedrückt werden können?

Im Beispiel fehlt die Angabe 'position', die musst du also in jedem Fall noch bei den Hoverwerten einfügen, damit z-index ausgeführt wird. Ich würde hier jetzt 'relative' nehmen.
Also bei img:hover noch einsetzen
Code: 
position: relative;
 
AW: Bilder "befestigen" das sie nicht mehr nach oben gedrückt werden können?

Ersteinmal DANKE!
Habe das jetzt versucht umzusetzen, die Bilder ziehen jetzt zwar nicht mehr nach oben, aber dafür schieben sie sich zusammen.

Habe das hier mal hoch geladen http://test654.te.ohost.de/1.php
Wenn man nun über das erste Bild fährt ziehen alle anderen Bilder nach vorne.

Kann ich eigentlich mit id=... dafür sorgen das dass nur für diese Bilder geht und nicht für alle anderen auf der Site?
Müsste ich doch bei <img src="http://forum.jswelt.de/css-x-html/.."> rein machen oder?

Nochmal vielen Dank für eure mühe!
 
AW: Bilder "befestigen" das sie nicht mehr nach oben gedrückt werden können?

Die Angaben von width (im normalen und bei :hover), die daraus resultierenden Höhe und die beiden margin-Angaben müssen natürlich aufeinander angepasst werden.

Du kannst mit einem Klassenselektor nur bestimmte Bilder auf der Seite so verändern.
 
AW: Bilder "befestigen" das sie nicht mehr nach oben gedrückt werden können?

FBM schrieb:
Ersteinmal DANKE!
Habe das jetzt versucht umzusetzen, die Bilder ziehen jetzt zwar nicht mehr nach oben, aber dafür schieben sie sich zusammen.
Zum Vergrößern anklicken....

Du hast ja bei der hover-Version keinen Zoom. Bei deinem Bildbeispiel lautet der Code

Code: 
img:hover {
        position: relative;
	z-index: 2;
	width: 116px;
	margin: -22px -8px;

}


FBM schrieb:
Kann ich eigentlich mit id=... dafür sorgen das dass nur für diese Bilder geht und nicht für alle anderen auf der Site?
Zum Vergrößern anklicken....
Nimm eine class, die kannst du dann allen Bildern zuordnen, die es betrifft. Ne id kannst du nur einmal vergeben.
 
AW: Bilder "befestigen" das sie nicht mehr nach oben gedrückt werden können?

Es hat geklappt! Danke! :icon7:
Das mit class ging auch super.

Nur das mit width und margin Angaben ist mir ein Rätsel.
Wie errechnet man denn diese Angaben???
Also wie kommt ihr von den width Werten auf die margin Angaben?
Habe schon über Google eine Erklärung gesucht, leider ohne Erfolg.
 
AW: Bilder "befestigen" das sie nicht mehr nach oben gedrückt werden können?

Du hast ein Verhältnis zwischen Höhe und Breite. Aus der Breitenangabe kannst du so die Höhe ausrechnen. Wenn sich jetzt die Breite und damit auch die Höhe beim :hover ändern müsst du die Änderung als margin oben/unten und link/rechts wieder abziehen - also die Hälfte der Änderung.
 
AW: Bilder "befestigen" das sie nicht mehr nach oben gedrückt werden können?

Ok, mal in Zahlen:
Dein Badfoto hat bei einer Breite von 100px eine Höhe von 258px. Nun willst du das in dem Beispiel zoomen auf eine Breite von 116px, das sind 16px mehr, die du links und rechts abziehen musst, daher also die zweite Angabe bei margin = -8px. Bei der Höhe genauso. Du hast in deinem Fall bei 116px Breite eine Höhe von 299px. Du ziehst also bei der ersten margin-Angabe, die die Abstände oben und unten angibt, die Hälfte ab, kommst dann also auf -22px. Die Rechnung ist: 299-258=41 und dann ./.2. Dir reichen also -21px.
 
AW: Bilder "befestigen" das sie nicht mehr nach oben gedrückt werden können?

Ok, ich habe es hin bekommen!:icon7:
Hätte ich wohl ohne euch nie geschafft!

Nochmal vielen Dank!!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben