nicht angemeldet
Rolf b
Matthias Apsel
Rolf b
Der Martin
Der Martin
Der Martin
Rolf b
Matthias Apsel
Gunnar Bittersmann
Hallo,
ich erstelle gerade eine Dokumentation, die mit einem Übersichtsbild beginnt. Auf dieser Übersicht befinden sich etliche Schaltflächen, welche durch
<img class="bild" src="bild.png" width="1610" height="569" alt="bild" usemap="#bild">
<map name="bild">
<area shape="rect" coords="1310,49,1337,76" href="#beispiel" alt="beispiel" title="beispiel">
</map>
sozusagen interaktiv anklickbar sind und auf die entsprechenden Bereiche verweisen.
Das funktioniert auch wie es soll. Leider ist das Bild ziemlich breit, daher wird das Bild zunächst verkleinert dargestellt:
CSS-Teil: (derzeit noch im HTML-Code)
<style>
.bild {
-webkit-transform:scale(0.5);
transform:scale(0.5);
}
.bild:active {
-webkit-transform:scale(1.0);
transform:scale(1.0);
}
.bild {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
</style>
Nun zu meinem Problem, was nicht neu sein dürfte. Wie erzwinge ich, dass das Bild mit :active nicht wieder verkleinert wird, sobald ich die Maustaste loslasse (mir ist klar, dass genau das mit :active bezweckt werden soll)? Das Bild musste also vergrößert bleiben (bis zum nächsten Klick ins Bild) und darüber hinaus müssen die "Schaltflächen" und "Icons" weiterhin anklickbar bleiben?
Ich habe das Ganze schon mit :hover probiert, aber sobald ich mit dem Mauszeiger über ein Icon fahre, wird es wieder verkleinert.
Mir fällt keine Lösung ein. Vielleicht finde ich ja hier im Forum Hilfe. HTML/CSS bevorzugt, aber wenn es nicht anders geht zur Not auch mit Javascript.
Gruß
Fieterich
Rolf b
Weiß nicht ob sich das mit anderen Teilen deines Layouts beißt, aber Du könntest dem Bild einen tabindex geben, was es fokussierbar macht, und das :focus Pseudoelement benutzen. Klickst Du dann drauf, bekommt es den Fokus und wird transformiert. Klickst Du woanders hin, geht der Fokus weg und die transformation entfällt.
Was damit nicht geht, ist der von Dir genannte Toggle-Click; dafür weiß ich keine CSS Idee. Die CSS Gurus hier können dazu bestimmt mehr sagen.
Rolf
Hallo,
das hat so nicht funktioniert. Leider. Vielleicht hat jemand noch eine andere Idee?
Hallo Fieterich,
das hat so nicht funktioniert. Leider. Vielleicht hat jemand noch eine andere Idee?
target, insb. unsichtbare Anker?
Bis demnächst
Matthias
Grundsätzlich funktioniert das schon. Habe es in jsfiddle ausprobiert. Wenn das, was dabei rauskommt, nicht zu deinen Anforderungen passt, ok, schade.
Im Moment habe ich keine bessere Idee.
Rolf
Hallo Rolf,
soweit mir bekannt ist, ist "tabindex" kein Attribut von IMG. Also wie gebe ich dem Bild in diesem Fall einen Tabindex?
Ich müsste das Bild anklicken können, welches daraufhin den Fokus erhält und transformiert wird. Vielleicht kannst Du mir einen Beispielcode schicken? Das wäre super!
Gruß
Fieterich
Hallo,
soweit mir bekannt ist, ist "tabindex" kein Attribut von IMG.
erweitere dein Wissen. ;-)
Das Attribut tabindex ist ein Universalattribut, mit dem jedes Element focussierbar und mit der Tab-Taste auswählbar gemacht werden kann, also auch ein img.
Also wie gebe ich dem Bild in diesem Fall einen Tabindex?
Indem du ihm einfach das Attribut tabindex="0" mitgibst.
Ich müsste das Bild anklicken können, welches daraufhin den Fokus erhält und transformiert wird.
Genau das wäre dann die Auswirkung.
So long,
Martin
Hallo Fieterich,
das Bild:
<img tabindex="0" src="bild.png">
0 - Index zuweisen ohne die Tabulatorreihenfolge zu ändern.
das CSS:
img:focus {
/*deine CSS-Formate*/
}
Funktioniert sowohl mit Mausklick als auch mit Tabulator.
Gruß, Martl
Hi,
<img tabindex="0" src="bild.png">Funktioniert sowohl mit Mausklick als auch mit Tabulator.
ja, das einzige, was nicht funktioniert, ist das De-Focussieren durch nochmaliges Anklicken; man muss stattdessen irgendwo außerhalb des Elements klicken. Aber das hat Rolf ja schon erwähnt; dafür scheint es auch keine CSS-Lösung zu geben.
So long,
Martin
Hallo Der Martin,
dafür scheint es auch keine CSS-Lösung zu geben.
Eine direkte nicht, aber vielleicht mit :focus gleichzeitig ein transparentes Element über das Bild legen; dann dürfte beim nächsten Klick der Fokus verloren gehen. (Theorie, nicht getestet)
Gruß, Martl
Hi,
dafür scheint es auch keine CSS-Lösung zu geben.
Eine direkte nicht, aber vielleicht mit :focus gleichzeitig ein transparentes Element über das Bild legen; dann dürfte beim nächsten Klick der Fokus verloren gehen. (Theorie, nicht getestet)
die Idee ist gut! Allerdings muss man dann das Bild in ein ansonsten sinnfreies div-Containerelement stecken, denn ::before oder ::after lassen sich ja nicht auf img anwenden, weil img per definitionem ein leeres Element ist und keinen Inhalt haben darf (auch keinen generierten).
Dann dem Container tabindex="0" geben, nicht dem Bild selbst, und ein transparentes Blind-Image als generierten Inhalt an div:focus zuweisen. Absolut im Containerelement positioniert, auf dessen volle Größe gestreckt. Könnte tatsächlich funktionieren ...
So long,
Martin
Hallo Der Martin,
Könnte tatsächlich funktionieren ...
jetzt habe ich es doch probiert:
<span class="imgbttn" tabindex="0"><img tabindex="0" src="msffvtt.png"></span>
img:focus {
...
position: relative;
z-index:-10;
...
}
Mehr braucht das tatsächlich nicht.
Gruß Martl
Hallo,
die Lösung mit Tabindex="0" funktioniert tatsächlich, aber nur wenn ich diesen Teil...
<map name="Einzelansicht2">
<area shape="rect" coords="1310,49,1337,76" href="#Beispiel" alt="Beispiel" title="Beispiel">
</map>
weglasse. Aber gerade darauf kommt es an! Hoffentlich wisst Ihr da was, das wäre dann die Lösung!
Gruß
Fieterich
Hallo,
und hier ein Demo - ohne weiteren Firlefanz - dazu
<!DOCTYPE HTML>
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>
</title>
<style>
img {
transition: all 1s;
display: block;
width: 10vw;
height: 10vh;
background: lightgrey;
margin:auto;
cursor:pointer;
}
img:focus {
transition: all 1s;
width: 90vw;
height: 90vh;
position: relative;
z-index: -10;
}
</style>
</head>
<body>
<img tabindex="0" src="#" alt="größer | kleiner mit Klick oder Tabulator">
</body>
</html>
... to whom it may concern.
Gruß Martl
Hallo Martl,
und hier ein Demo - ohne weiteren Firlefanz - dazu
Und von mir eine Korinthe ;-)
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta charset="utf-8">!
Bis demnächst
Matthias
Habe auch etwas gespielt. Das Ding, das den Fokus bekommt, sollte noch folgende Styles bekommen:
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
Sonst wird es selektiert (mit der entsprechenden Verfärbung), wenn man zu schnell hintereinander draufklickt.
Die Kombination mit der map ist dagegen knifflig, das habe ich überhaupt nicht berücksichtigt. Die liegt ja logisch über dem Image und deshalb kann ich dort, wo Map-Areas sind, das Image nicht anklicken und damit vergrößern.
Aber vielleicht hätte ich den einleitenden Satz von Fieterich, dass :hover nicht tut, nicht so ernst nehmen sollen. Natürlich tut :hover, man muss es nur richtig tun. Als Image hatte ich das SelfHTML Logo drin und die map dafür ausgelegt, das wollte ich nur nicht dauerhaft drinlassen.
Rolf
Hallo Der Martin,
die Idee ist gut! Allerdings muss man dann das Bild in ein ansonsten sinnfreies div-Containerelement stecken,
figure?
denn ::before oder ::after lassen sich ja nicht auf img anwenden, weil img per definitionem ein leeres Element ist und keinen Inhalt haben darf (auch keinen generierten).
Bis demnächst
Matthias
@@Martl
<img tabindex="0" src="bild.png">
Dem Bild fehlt etwas.
Eine gute Tat hätte das sichtbar gemacht.
LLAP 🖖
sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|