usability: JS-Alternative für JS-lose

[ad]

Hallo zusammen,
ich arbeite gerade an einem Projekt, in dem vorgesehen ist, per Mausklick bestimmte Informationen als "overlay" über ein Bild zu legen.
Also ich habe meinetwegen ein Bild von einem Hund und per Klick erscheint auf dem Bild Rasse, Alter, Herkunfts etc. Der Text steht dabei auf einer halbtransp. Farbfläche, sodass er gut lesbar ist.

Lässt sich mit JS ja super machen. Nur wie krieg ich die JS-losen mit ins Boot? Soll sich da per Klick ne neue Seite öffnen? Oder was wäre hier "guter Stil"?

Danke und schönen Freitag!
ad

[ChrisB]

Hi,

Also ich habe meinetwegen ein Bild von einem Hund und per Klick erscheint auf dem Bild Rasse, Alter, Herkunfts etc. Der Text steht dabei auf einer halbtransp. Farbfläche, sodass er gut lesbar ist.

Lässt sich mit JS ja super machen. Nur wie krieg ich die JS-losen mit ins Boot? Soll sich da per Klick ne neue Seite öffnen?

Kommt drauf an, wie umfangreich die Informationen sind - vielleicht lassen sie sich ja auch innerhalb der Seite mit unterbringen, nur ohne JS dann nicht als „Overlay“.

Und vielleicht reicht auch schon eine reine CSS-Alternative, die das ganze per Hover einblendet.

Oder was wäre hier "guter Stil"?

Guter Stil ist, genau andersherum vorzugehen, als du es in der Überschrift erfragst:
Normale Seite erstellen, die ohne JavaScript nutzbar ist und die gewünschten Informationen zugänglich präsentiert.
Anschließend JavaScript als „Bonus“ oben drauf setzen.

Stichwort: Unobtrusive JavaScript

MfG ChrisB

[suit]

Und vielleicht reicht auch schon eine reine CSS-Alternative, die das ganze per Hover einblendet.

Oder per :focus oder :active wenn man so will.

[dave]

Hi,

Oder per :focus oder :active wenn man so will.

könntest du mir ein Beispiel zeigen wie das mit :focus oder :active geht?

Das hier funktioniert z.B. in keinem Browser der die Webkit-Engine verwendet.

~dave

[Der Martin]

Hallo,

Oder per :focus oder :active wenn man so will.
könntest du mir ein Beispiel zeigen wie das mit :focus oder :active geht?

Beispiel nicht, aber eine Kurzbeschreibung.
Damit ein Element focussierbar ist, muss es ein Formularelement oder ein Link sein - oder ein tabindex-Attribut haben. Und wenn es dann focussierbar ist, sollte es auch auf die Pseudoklasse :focus ansprechen (mit :active bin ich mir nicht so sicher).

Das hier funktioniert z.B. in keinem Browser der die Webkit-Engine verwendet.

Ein Problem, das schon an der richtigen Stelle als Bug gemeldet ist, würde ich nicht als Indiz für "geht nicht" sehen. Es ist zwar dumm, dass Webkit-Nutzer ausgesperrt werden. Aber wenn man um diese Schwäche weiß, kann man die Sichtbarkeit des eingeblendeten Texts ja sowohl über :hover als auch über :focus steuern. Für Webkit-Nutzer ist die Info dann eben nur beim Hovern sichtbar, andere können zusätzlich auch klicken und haben die Info dann quasi-statisch.

So long,
 Martin

[dave]

Hi,

Ein Problem, das schon an der richtigen Stelle als Bug gemeldet ist, würde ich nicht als Indiz für "geht nicht" sehen.

Ein Bug der seit fast 2 Jahren gemeldet ist.
Und für mich ist das kein "Indiz".
Es geht nicht. Punkt.

Es ist zwar dumm, dass Webkit-Nutzer ausgesperrt werden.

Dann kann man gleich nur auf die JS-Lösung setzen, ist zwar dumm das die ohne JS ausgesperrt werden...

Aber wenn man um diese Schwäche weiß, kann man die Sichtbarkeit des eingeblendeten Texts ja sowohl über :hover als auch über :focus steuern.

Hängt von den konkreten Anforderungen ab, wenn :hover reicht schon.
Der OP wollte ursprünglich etwas anderes.

~dave

[ad]

Hallo

Und vielleicht reicht auch schon eine reine CSS-Alternative, die das ganze per Hover einblendet.

Ja, das wäre eine gute Möglichkeit. Stimmt, danke!

Stichwort: Unobtrusive JavaScript

ok, danke :)

[ad]

Hi,
jetzt muss ich doch nochmal nachfragen, weil ich bislang gescheitert bin.

Und vielleicht reicht auch schon eine reine CSS-Alternative, die das ganze per Hover einblendet.

Ich hab also z.B. ein DIV mit den entspr. Infos. Dieses DIV ist erstmal display:none.
Wie kriegt ich das nun auf display:block, mittels eines :hover eines anderen Elementes? (ohne JS!)

Steh grad auf de Schlauch und das verlinkte Bsp. im anderen Ast hat mich auch nicht schlauer gemacht :-/

[dave]

Hi,

Ich hab also z.B. ein DIV mit den entspr. Infos. Dieses DIV ist erstmal display:none.
Wie kriegt ich das nun auf display:block, mittels eines :hover eines anderen Elementes? (ohne JS!)

Die beiden Elemente müssen irgendwie in einer Beziehung stehen die durch CSS-Kombinatoren abgebildet werden kann.
Am besten eignen sich wohl der Descendant combinator (Leerzeichen) oder der Adjacent sibling combinator (Pluszeichen).

Z.B.

<img src="" alt=""/>  
<div>  
  foo  
</div>

img + div {  
  display:none;  
}  
img:hover + div {  
  display:block;  
}

~dave

[dave]

Hi,

ich denke da kann man was mit :target basteln.
Das Bild muss dann halt ein Link sein der zu einem Anker springt und die Zusatzinfos müssen bereits im html sein.
Etwas in dieser Art:

<figure>  
  <a href="moreInfos">  
    <img src="" alt=""/>  
  </a>  
  <figcaption id="moreInfos">  
    foo  
  </figcaption>  
</figure>

figcaption {  
  display:none;  
}  
figcaption:target {  
  display:block;  
}

~dave