Fieterich: Grafik soll aktiv bleiben (:active)

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

akzeptierte Antworten

  1. 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

    1. Hallo,

      das hat so nicht funktioniert. Leider. Vielleicht hat jemand noch eine andere Idee?

      1. Hallo Fieterich,

        das hat so nicht funktioniert. Leider. Vielleicht hat jemand noch eine andere Idee?

        target, insb. unsichtbare Anker?

        Bis demnächst
        Matthias

        --
        Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
      2. 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

        1. 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

          1. 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

            --
            Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
            - Douglas Adams, The Hitchhiker's Guide To The Galaxy
          2. 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

            1. 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

              --
              Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
              - Douglas Adams, The Hitchhiker's Guide To The Galaxy
              1. 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

                1. 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

                  --
                  Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
                  - Douglas Adams, The Hitchhiker's Guide To The Galaxy
                  1. 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

                    1. 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

                    2. 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

                      1. 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

                        --
                        Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
                    3. 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.

                      Click for Fiddle

                      Rolf

                  2. 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).

                    Nicht wegen der Leere ;-)

                    Bis demnächst
                    Matthias

                    --
                    Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
                    1. @@Matthias Apsel

                      figure?

                      Njain.

                      LLAP 🖖

                      --
                      “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
                      Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
            2. @@Martl

              <img tabindex="0" src="bild.png">
              

              Dem Bild fehlt etwas.

              Eine gute Tat hätte das sichtbar gemacht.

              LLAP 🖖

              --
              “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
              Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|