Bildwechsel bei onclick in Container

[Conny]

Hallo Leute,
ich bin der Neue (Anfänger).
Ich möchte aus einer Gallerie (Thumbs) die größeren Bilder in einem Container darstellen.
das folgende Script funktioniert prima bei mouseover.
Was muß ich ändern, dass es auch bei onclick funktionirt.
Wer kann mir helfen

Conny

``
<style type="text/css">

.gallerycontainer{
position: absolute;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid grey;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #000000;
padding: 0px;
left: -1000px;
border: none;
visibility: hidden;
color: grey;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 150;
left: 300px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

</style>

{:.language-html}

<div class="gallerycontainer">

<a class="thumbnail" href="#thumb"><img src="Bilder/Bild3.png" width="56px" height="80px" border="0" /><span><img src="Bilder/Bild3.png" width="405px" height="585px"/></span></a>

<a class="thumbnail" href="#thumb"><img src="Bilder/Bild5.png" width="56px" height="80px" border="0" /><span><img src="Bilder/Bild5.png" width="405px" height="585px"/></span></a>

<br />

</div>

[Mattes]

Ich möchte aus einer Gallerie (Thumbs) die größeren Bilder in einem Container darstellen.

Oha, das war hoffentlich ein Schreibfehler. Galerie hätte nur dann was mit Galle zu tun, wenn's um eine medizinische Ausstellung geht.

das folgende Script funktioniert prima bei mouseover.

Du hast HTML-Code und CSS-Angaben geliefert, aber leider kein Skript.

[Bobby]

Moin

Kurze Suche mit Google nach "Lightbox mit CSS" und siehe da:

http://stellatest.de/anleitungen/css/lightboxmitcss/index.html

oder

http://codepen.io/gschier/pen/HCoqh

oder

http://www.designcouch.com/home/why/2013/11/01/responsive-css3-lightbox-with-no-javascript/

oder

.
.
.
.
.

Gruß Bobby

[Camping_RIDER]

Aloha ;)

Wie an anderer Stelle schon erwähnt wurde, benutzt du kein Skript, sondern lediglich ein Stylseheet (CSS). Das ist aber auch gut so, es ist von Vorteil, Scripts nur dann zu nutzen, wenn sie unumgänglich nötig sind.

Mein Vorschlag an dieser Stelle: Du benutzt ja die Pseudoklasse :hover für Mouseover. Für Klicks gibts in CSS etwas weniger Möglichkeiten, du könntest aber vllt. die Pseudoklasse :focus nutzen. Ich weiß aktuell nicht genau, ob img-Elemente einen focus haben können, es ist dann aber eventuell möglich, das mit tabindex nachzurüsten. Näheres und Beispiele findest du z.B. unter CSS-Tricks oder StackOverflow... Oder natürlich auf erneute Nachfrage hier ;)

Grüße,

RIDER

[Matthias Apsel]

Om nah hoo pez nyeetz, Camping_RIDER!

Mein Vorschlag an dieser Stelle: Du benutzt ja die Pseudoklasse :hover für Mouseover. Für Klicks gibts in CSS etwas weniger Möglichkeiten, du könntest aber vllt. die Pseudoklasse :focus nutzen.

Eher nicht. :focus dient der Tastatursteuerung.

:active wäre denkbar, das würde aber nur für die Zeit gelten, solange die Maustaste gedrückt ist. Recht zuverlässige onclick-Imitation lässt sich hingegen mit :target erreichen.

Matthias

[Camping_RIDER]

Aloha ;)

Mein Vorschlag an dieser Stelle: Du benutzt ja die Pseudoklasse :hover für Mouseover. Für Klicks gibts in CSS etwas weniger Möglichkeiten, du könntest aber vllt. die Pseudoklasse :focus nutzen.

Eher nicht. :focus dient der Tastatursteuerung.

Jein. Das ist die Umsetzung. Rein effektiv und auf semantischer Ebene verstehe ich :focus aber auch wörtlich, als Element, das im Fokus steht - und dieser Fokus kann in meinem Empfinden auch anders als durch die Tabtaste erteilt werden... Also insbesondere durch einen Mausklick. Und insofern - wenn es sich durch :focus machen lässt, würde ich darin keinen Nachteil, sondern eher noch einen Vorteil sehen, da man auch mit tab durch die Bilder wechseln kann, wenn man möchte.

:active wäre denkbar, das würde aber nur für die Zeit gelten, solange die Maustaste gedrückt ist. Recht zuverlässige onclick-Imitation lässt sich hingegen mit :target erreichen.

Damit hast du natürlich vollkommen Recht.

Vielleicht ist ja auch eine Kombination von :target und :focus das quasi-Nonplusultra?

Grüße,

RIDER

[Auge]

Hallo

Mein Vorschlag an dieser Stelle: Du benutzt ja die Pseudoklasse :hover für Mouseover. Für Klicks gibts in CSS etwas weniger Möglichkeiten, du könntest aber vllt. die Pseudoklasse :focus nutzen.

Eher nicht. :focus dient der Tastatursteuerung.

Jein. Das ist die Umsetzung. Rein effektiv und auf semantischer Ebene verstehe ich :focus aber auch wörtlich, als Element, das im Fokus steht - und dieser Fokus kann in meinem Empfinden auch anders als durch die Tabtaste erteilt werden... Also insbesondere durch einen Mausklick. Und insofern - wenn es sich durch :focus machen lässt, würde ich darin keinen Nachteil, sondern eher noch einen Vorteil sehen, da man auch mit tab durch die Bilder wechseln kann, wenn man möchte.

Nix für ungut, aber was nutzt dir deine theoretische Abhandlung in Semantik, wenn die technische Umsetzung von :focus eben doch nur für die Tastatursteuerung wirkt?

Tschö, Auge

[Camping_RIDER]

Aloha ;)

Nix für ungut, aber was nutzt dir deine theoretische Abhandlung in Semantik, wenn die technische Umsetzung von :focus eben doch nur für die Tastatursteuerung wirkt?

Wie die von mir verlinkten Seiten zeigen, stimmt das nur bedingt, da offenbar auch ein Mausklick das Setzen des :focus auslösen kann. Insofern ist diese Abhandlung tatsächlich _nicht_ rein theoretischer Natur. Ansonsten würde ich dir ja zustimmen...

Grüße,

RIDER

[Auge]

Hallo

Nix für ungut, aber was nutzt dir deine theoretische Abhandlung in Semantik, wenn die technische Umsetzung von :focus eben doch nur für die Tastatursteuerung wirkt?

Wie die von mir verlinkten Seiten zeigen, stimmt das nur bedingt, da offenbar auch ein Mausklick das Setzen des :focus auslösen kann.

Entschuldige, ich bin da zu sehr vom altbekannten Anwendungsfall „Link“ ausgegangen. Dort begründen wir™ ja :focus für die Tastaturnavigation vor :hover für den über dem Link befindlichen Mauscursor zu nutzen, womit sich diese gedankliche Trennung (auch wenn :focus und :hover per se verschiedene Zwecke haben) in meinem Kopf festgesetzt hat. Hinzu kommt, dass es einen per Maus fokussierten Link nur sehr kurzzeitig gibt, schließlich löst das Fokussieren (der Mausklick) ja das Laden der verlinkten Ressource aus.

Grundsätzlich ergibt sich – ohne es getestet zu haben – durch die Lektüre der in deinem ersten Posting verlinkten Seiten und von Gunnars Posting für mich das Bild, dass das Fokussieren mit der Maus nur bei den wenigen Elementen, die man per Klick „am Stück“ markieren kann, funktionieren wird. <img> gehört dazu.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge:

nuqneH

dass das Fokussieren mit der Maus nur bei den wenigen Elementen, die man per Klick „am Stück“ markieren kann, funktionieren wird. <img> gehört dazu.

?? Welche sollten nicht dazugehören?

Qapla'

[Auge]

Hallo

dass das Fokussieren mit der Maus nur bei den wenigen Elementen, die man per Klick „am Stück“ markieren kann, funktionieren wird. <img> gehört dazu.

?? Welche sollten nicht dazugehören?

Öhhm, ich habe mich verdacht. Wenn p odcer li auf :hover reagieren, warum sollten sie das nicht auch bei :focus tun.

Tschö, Auge

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

du könntest aber vllt. die Pseudoklasse :focus nutzen.
Eher nicht. :focus dient der Tastatursteuerung.

Eher doch. :focus selektiert auch <img tabindex="0" …/>, nachdem drauf geclickt wurde (getestet in Firefox und Chrome).

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Conny!

ich bin der Neue (Anfänger).

Ich finde es gut, dass du dein Markup bzw. deinen CSS-Code entsprechend auszeichnen wolltest und dich ebenso um eine umfängliche Darstellung deines Problems bemühst.

Kleiner Tipp: markiere zunächst den Text, der als Code ausgezeichnet werden soll und drücke dann den entsprechenden Button. In der Vorschaufunktion hättest du auch sehen können, dass die Formatierung nicht wie gewünscht erfolgt ist. Aber vielleicht hast du dies sogar getan und nur die entsprechende Lösung nicht gefunden.

.gallerycontainer{

position: absolute;
/Add a height attribute and set to largest image's height to prevent overlaying/
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid grey;
}

.thumbnail span{ /CSS for enlarged image/
position: absolute;
background-color: #000000;
padding: 0px;
left: -1000px;
border: none;
visibility: hidden;
color: grey;
text-decoration: none;
}

.thumbnail span img{ /CSS for enlarged image/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /CSS for enlarged image/
visibility: visible;
top: 150;
left: 300px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

  
So zum Beispiel.  
  
Ich empfehle außerdem konsequent mit HTML5 zu arbeiten. So kannst du die Angabe  
  
`<style type="text/css">`{:.language-html} zu `<style>`{:.language-html} verkürzen.  
  
  
Matthias

-- 
Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [Lot und Lotion](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=L#lot).  
![](http://www.billiger-im-urlaub.de/kreis_sw.gif)  

[Conny]

Hallo Freunde,
ich finde es ganz toll, dass ich so schnell so viele Anregungen bekommen habe.

Ich habe den Vorschlag mit "focus" gleich ausprobiert.
Mit Firefox und Opera klappt das prima. Mit IE und Safari leider nicht.
Warum nicht ??

Om nah hoo pez nyeetz, Conny!

ich bin der Neue (Anfänger).

Ich finde es gut, dass du dein Markup bzw. deinen CSS-Code entsprechend auszeichnen wolltest und dich ebenso um eine umfängliche Darstellung deines Problems bemühst.

Kleiner Tipp: markiere zunächst den Text, der als Code ausgezeichnet werden soll und drücke dann den entsprechenden Button. In der Vorschaufunktion hättest du auch sehen können, dass die Formatierung nicht wie gewünscht erfolgt ist. Aber vielleicht hast du dies sogar getan und nur die entsprechende Lösung nicht gefunden.

.gallerycontainer{

position: absolute;
/Add a height attribute and set to largest image's height to prevent overlaying/
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid grey;
}

.thumbnail span{ /CSS for enlarged image/
position: absolute;
background-color: #000000;
padding: 0px;
left: -1000px;
border: none;
visibility: hidden;
color: grey;
text-decoration: none;
}

.thumbnail span img{ /CSS for enlarged image/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /CSS for enlarged image/
visibility: visible;
top: 150;
left: 300px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

>   
> So zum Beispiel.  
>   
> Ich empfehle außerdem konsequent mit HTML5 zu arbeiten. So kannst du die Angabe  
>   
> `<style type="text/css">`{:.language-html} zu `<style>`{:.language-html} verkürzen.  
>   
>   
> Matthias

[Matthias Apsel]

Om nah hoo pez nyeetz, Conny!

Hallo Freunde,
ich finde es ganz toll, dass ich so schnell so viele Anregungen bekommen habe.

Noch ein paar weitere:

• Du kannst Themenbereich und Betreff ändern und an deine neue Frage anpassen
• Bitte vermeide Vollzitate. Zitiere nur das, worauf du dich konkret beziehst. In diesem Fall also garnichts.

Ich habe den Vorschlag mit "focus" gleich ausprobiert.
Mit Firefox und Opera klappt das prima. Mit IE und Safari leider nicht.
Warum nicht ??

Weiß ich nicht.
Welcher IE, welcher Safari?
Vielleicht ist dein Dokument fehlerhaft, vielleicht arbeiten die Browser nicht korrekt.

Matthias

[Conny]

Om nah hoo pez nyeetz, Conny!

Hallo Freunde,
ich finde es ganz toll, dass ich so schnell so viele Anregungen bekommen habe.

Noch ein paar weitere:

• Du kannst Themenbereich und Betreff ändern und an deine neue Frage anpassen
• Bitte vermeide Vollzitate. Zitiere nur das, worauf du dich konkret beziehst. In diesem Fall also garnichts.

Ich habe den Vorschlag mit "focus" gleich ausprobiert.
Mit Firefox und Opera klappt das prima. Mit IE und Safari leider nicht.
Warum nicht ??

Weiß ich nicht.
Welcher IE, welcher Safari?
Vielleicht ist dein Dokument fehlerhaft, vielleicht arbeiten die Browser nicht korrekt.

Matthias

Das Prpblem mit IE ist gekärt (ältere Version auf einem meiner PCs)
Safari geht nicht Version 5.1.7(7534,57,2) Windows 7

Conny

[Matthias Apsel]

Om nah hoo pez nyeetz, Conny!

Was hast du an

• Bitte vermeide Vollzitate. Zitiere nur das, worauf du dich konkret beziehst.

nicht verstanden?

Safari geht nicht Version 5.1.7(7534,57,2) Windows 7

Safari unter Windows wird nicht mehr weiterentwickelt. Diesen Browser kannst du imho getrost ignorieren.

Matthias

[Camping_RIDER]

Aloha ;)

Ich habe den Vorschlag mit "focus" gleich ausprobiert.
Mit Firefox und Opera klappt das prima. Mit IE und Safari leider nicht.
Warum nicht ??

Schuss ins Blaue: Hast du, wie empfohlen, bei den Bildern das tabindex-Attribut gesetzt? Das sollte das Funktionieren von :focus eigentlich sicherstellen. Eigentlich, weil Browser auch nicht immer richtig arbeiten...

Grüße,

RIDER

[Conny]

Hallo Freunde,

vielen Dank für die Unterstüzung,
mein Problem ist gelöst

Conny

Hallo Leute,
ich bin der Neue (Anfänger).
Ich möchte aus einer Gallerie (Thumbs) die größeren Bilder in einem Container darstellen.
das folgende Script funktioniert prima bei mouseover.
Was muß ich ändern, dass es auch bei onclick funktionirt.
Wer kann mir helfen

Conny

``
<style type="text/css">

.gallerycontainer{
position: absolute;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid grey;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #000000;
padding: 0px;
left: -1000px;
border: none;
visibility: hidden;
color: grey;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 150;
left: 300px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

</style>

{:.language-html}

<div class="gallerycontainer">

<a class="thumbnail" href="#thumb"><img src="Bilder/Bild3.png" width="56px" height="80px" border="0" /><span><img src="Bilder/Bild3.png" width="405px" height="585px"/></span></a>

<a class="thumbnail" href="#thumb"><img src="Bilder/Bild5.png" width="56px" height="80px" border="0" /><span><img src="Bilder/Bild5.png" width="405px" height="585px"/></span></a>

<br />

</div>