nicht angemeldet
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
marctrix
Tabellenkalk
Matthias Apsel
Hallo, wenn ich in dem nachfolgenden Beispiel über das Bild fahre, wird es neben dem Ursprungsbild vergrößert. Wie kann ich erreichen, dass es sich über dem Ursprungsbild öffnet? Danke für Eure Geduld.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.bilder_zoom{
position: relative;
z-index: 0;
}
.bilder_zoom:hover{
background-color: transparent;
z-index: 50;
}
.bilder_zoom span{
position: absolute; float: left;
visibility: hidden;
/* color: black; */
text-decoration: none;
}
.bilder_zoom span img{
border-width: 0;
}
.bilder_zoom:hover span{
visibility: visible;
}
</style>
</head>
<body>
<div>
<a class="bilder_zoom">
<img style="width: 100px; height: 67px;" src="bild.jpg" alt="Blumen" />
<span><img src="bild.jpg" width="500" height="334" alt="Blumen" /></span></a>
</div>
</body>
</html>
@@Trapp
wenn ich in dem nachfolgenden Beispiel über das Bild fahre, wird es neben dem Ursprungsbild vergrößert.
Nein, bei mir nicht. Ich fahre über das Bild, indem ich die Tab-Taste drücke – nichts passiert.
Merke: Wann immer du :hover im Stylesheet zu stehen hast, sollte :focus nicht weit sein.
LLAP 🖖
Und wenn Du mit der Maus darüber fährst?
@@Trapp
Und wenn Du mit der Maus darüber fährst?
Es gibt Nutzer, die haben keine Maus.
LLAP 🖖
Warum werden immer wieder Ratschläge erteilt, nach denen man gar nicht gefragt hat? Das Beispiel habe ich (vermutlich) aus Selfhtml) und der Einfachheit halber abgespeckt. Dass nicht alle eine Maus besitzen ist mir bekannt und auch wie dies dann abgehandelt wird. Gefragt war dies sicher nicht!
@@Trapp
Warum werden immer wieder Ratschläge erteilt, nach denen man gar nicht gefragt hat?
Weil das die Qualität dieses Forums ausmacht.
Das Beispiel habe ich (vermutlich) aus Selfhtml) und der Einfachheit halber abgespeckt.
Wenn ersteres, gib das bitte an. Dann muss SELFHTML berichtigt werden.
Wenn zweiteres, dast du nicht abgespeckt, sondern bis zur Funktionsuntüchtigkeit verstümmelt.
Dass nicht alle eine Maus besitzen ist mir bekannt und auch wie dies dann abgehandelt wird.
Schön, dass du das weißt. Hier lesen aber auch andere mit.
Gefragt war dies sicher nicht!
Dass eine Webseite auch mit anderen Eingabegeräten als Mäusen funktionieren muss, ist immer gefragt.
LLAP 🖖
Weil das die Qualität dieses Forums ausmacht.
Die Frage ist nur ob zum Positiven oder Negativen.
@Gunnar: Und zum Thema hast Du nichts beizutragen?
@@Trapp
@Gunnar: Und zum Thema hast Du nichts beizutragen?
Wenn ich das hätte, würde ich es tun.
Du kannst es potentiellen Etwas-beizutragen-Habenden aber einfacher machen, indem du ein Online-Beispiel bereitstellst: entweder deine Seite verlinken oder auf Plattformen wie CodePen.
LLAP 🖖
@Trapp: Es gibt in diesem Forum Leute, die ein verstärktes Mitteilungsbedürfnis haben und zu jedem Beitrag etwas schreiben müssen. Das gabs schon in der Schule, dass der Lehrer solche Schüler bremsen musste!
Hej Mitleser,
@Trapp: Es gibt in diesem Forum Leute, die ein verstärktes Mitteilungsbedürfnis haben und zu jedem Beitrag etwas schreiben müssen. Das gabs schon in der Schule, dass der Lehrer solche Schüler bremsen musste!
In einem öffentlichen Raum, der dazu gedacht ist, Hilfe zu guter Webentwicklung zu geben, wird Code voller Fehler präsentiert - und du möchtest ernsthaft, dass die enthaltenen Fehler ungenannt bleiben?
Das musstest du - ungefragt - unbedingt loswerden? Und behauptest andere hätten ein ungebremstes Mitteilungsbedürfnis? — Ich frag ja nur…
Marc
Hallo,
Wie kann ich erreichen, dass es sich über dem Ursprungsbild öffnet?
Je nachdem, was genau du unter über verstehst, kann es reichen die Reihenfolge zu tauschen.
Gruß
Kalk
Ich meinte mit 'über', dass das Originalbild verdeckt wird und die links oben liegenden Ecken der beiden Bilder an der gleichen Position liegen sollen.
Hallo,
Ich meinte mit 'über', dass das Originalbild verdeckt wird und die links oben liegenden Ecken der beiden Bilder an der gleichen Position liegen sollen.
Wenn ich das richtig sehe, dann willst du dasselbe Bild, bloß größer. Da brauchst du doch nicht zwei Img-Elemente, sondern kannst doch direkt bei dem einen per CSS die Größe verändern. Auf das Inline-CSS kannst du auch verzichten.
Gruß
Kalk
Jaaa, das ist schön, danke!
Hallo Trapp,
.bilder_zoom:hover{
Wo immer :hover erscheint, sollte :focus nicht weit sein. (Gunnar Bittersmann)
<div> <a class="bilder_zoom"> <img style="width: 100px; height: 67px;" src="bild.jpg" alt="Blumen" /> <span><img src="bild.jpg" width="500" height="334" alt="Blumen" /></span></a> </div>
Wozu die Elemente div und span? Warum ein a, wenn es nicht wo anders hinführt? Die Angaben mit „px“ sind falsch.
<figure>
<img src="bild1.jpg" alt="Blumen">
<img src="bild2.jpg" alt="große Blumen">
</figure>
wäre aus meiner Sicht ein geeignetes Markup. Beispiel: https://www.j-berkemeier.de/Spiralen.html
Bis demnächst
Matthias
Hallo, wenn ich in CSS als Width/height 100% angebe, wird das Bild so groß wie die gesamte Seite. Was muss ich angeben, dass das Bild genau die Originalgröße annimmt?
@@Trapp
wenn ich in CSS als Width/height 100% angebe, wird das Bild so groß wie die gesamte Seite. Was muss ich angeben, dass das Bild genau die Originalgröße annimmt?
Gar nichts.
Oder wenn schon was angegeben ist, musst du den Wert wieder zurücksetzen. Das geht mit den Schlüsselwörtern initial bzw. unset [CSS-CASCADE §7.3] – außer im IE.
Du kannst aber auch explizit auf den Ausgangswert setzen. Dazu musst du dir diesen raussuchen. Für die Eigenschaften width und height ist das der Wert auto. [CSS 2.2 §10.2, §10.5]
LLAP 🖖
@Gunnar
mit der Angabe "auto" funktioniert es, danke dir. Aber um die Beschreibung zu verstehen, muss man wohl 14 Semester Englisch und Informatik studieren;-) Ich habe nichts aber auch gar nichts kapiert. Aber Hauptsache es funktioniert jetzt!
hat sich erledigt… 😉