Bilder per CSS ausblenden, aber alt-text darstellen (HTML, CSS und Javascript)

[thread]13907[/thread]

Bilder per CSS ausblenden, aber alt-text darstellen

Leser: 21

Articles: hide open all | hide show old branches

+18 replies
pq

2009-08-20 18:52

User since
2003-08-04
12208 Artikel
Admin1

Ich überlege, wie ich smileys per css ausblenden könnte, aber stattdessen dann den alt-text sehe (Wollt ihr Smileys als Bilder?)

das geht wohl nicht so einfach, hat da jemand eine idee?
Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live. -- Damian Conway in "Perl Best Practices"
lesen: Wie frage ich & perlintro brian's Leitfaden für jedes Perl-Problem
- Gast wer
  
  2009-08-20 19:03
  
  So aus der Hüfte geschossen würde ich sagen, mach ein <div> setze da rein den Emoticon-Text. Über CSS kannst du den Text ausblenden und als Hintergrundbild das Icon setzen.
  Aber ob das nicht die Textformatierung durcheinander wirft kann nicht erstmal nicht sagen.
- +7 replies
- MartinR
  
  2009-08-21 10:15
  
  User since
  2004-06-17
  305 Artikel
  BenutzerIn
  
  Wieso per CSS? Es wird doch dem User überlassen ob er Smileys sehen will oder nicht. Dieses ja/nein wird doch sicherlich in den Userdaten gespeichert. Abhängig davon kannst Du dann entweder das Smiley oder den Text im Template anzeigen lassen.
  - +6 replies
  - pq
    
    2009-08-21 11:57
    
    User since
    2003-08-04
    12208 Artikel
    Admin1
    
    ich kann es nur per CSS machen, weil das html eines artikels fertig gerendert wird und dann gecached. bitte lies dazu den thread, den ich oben verlinkt hatte, ich möchte das nicht nochmal erklären.
    
    edit: msg #124468 ff.
    Last edited: 2009-08-21 12:00:49 +0200 (CEST)
    Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live. -- Damian Conway in "Perl Best Practices"
    lesen: Wie frage ich & perlintro brian's Leitfaden für jedes Perl-Problem
    - +5 replies
    - murphy
      
      2009-08-21 13:06
      
      User since
      2004-07-19
      1776 Artikel
      HausmeisterIn
      
      2009-08-21T09:57:18 pq
      ich kann es nur per CSS machen, weil das html eines artikels fertig gerendert wird und dann gecached. [...]
      
      Neben CSS könnte man auch XSLT verwenden und damit ließe sich das Problem sicher erschlagen ;-)
      
      Als Lösung mittels CSS hätte ich noch folgende Idee: Man legt für jeden Smiley nicht nur ein img-Element sondern auch ein span-Element an und packt diese beiden Elemente in einen gemeinsamen Container, etwa so:
      
      Code (html): (dl )
      
      <span class="smile"><img src="smile.gif" alt=":-)"/><span>:-)</span></span>
      
      Je nachdem, ob Text- oder Grafikanzeige gewünscht ist, blendet man eines der inneren Elemente per CSS aus:
      
      Code: (dl )
      
      1 2 3
      
      .smile > img { display: none; }
      
      oder
      
      Code: (dl )
      
      1 2 3
      
      .smile > span { display: none; }
      
      When C++ is your hammer, every problem looks like your thumb.
      - +3 replies
      - Linuxer
        
        2009-08-21 13:08
        
        User since
        2006-01-27
        3890 Artikel
        HausmeisterIn
        
        Hm, wird so ein Bild eigentlich vom Browser auch geladen, wenn das CSS besagt, dass es nicht dargestellt werden soll?
        meine Beiträge: I.d.R. alle Angaben ohne Gewähr und auf Linux abgestimmt!
        Die Sprache heisst Perl, nicht PERL. - Bitte Crossposts als solche kenntlich machen!
        
        +2 replies
        
        pq
        
        2009-08-21 13:25
        
        User since
        2003-08-04
        12208 Artikel
        Admin1
        
        nicht unbedingt. das login-"popup" hier hat ja auch ein bild (pfeil), und ich sehe oft, dass dieser pfeil erst nachgeladen wird, wenn ich dieses "popup" öffne.
        im gegensatz dazu kann man aber auch das laden eines bildes forcieren, auch wenn es noch nicht angezeigt wird.
        evtl. hat das was mit display none und visibility hidden zu tun - gibts da nen unterschied?
        erstrebenswert wäre natürlich, dass die smileys erst gar nicht geladen werden, wenn sie nicht angezeigt werden sollen.
        
        edit: typo
        Last edited: 2009-08-21 13:36:08 +0200 (CEST)
        Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live. -- Damian Conway in "Perl Best Practices"
        lesen: Wie frage ich & perlintro brian's Leitfaden für jedes Perl-Problem
        
        freddy
        
        2009-08-21 13:29
        
        User since
        2009-08-08
        95 Artikel
        BenutzerIn
        
        2009-08-21T11:25:16 pq
        nicht unbedingt. das login-"popup" hier hat ja auch ein bild (pfeil), und ich sehe oft, dass dieser pfeil erst nachgeladen wird, wenn ich dieses "popup" öffne.
        im gegensatz dazu kann man aber auch das laden eines bildes forcieren, auch wenn es noch nicht angezeigt wird.
        evtl. hat das was mit display none und visibility hidden zu tun - gibts da nen unterschied?
        erstrebenswert wäre natürlich, dass die simeys erst gar nicht geladen werden, wenn sie nicht angezeigt werden sollen.
        
        display arbeitet ohne Platzhalter.
        visibility reserviert den Platz im Layout.
        
        Zum Cache-Vorladen oder gänzlich unsichtbar ausblenden immer display:none verwenden.
        Last edited: 2009-08-21 13:30:38 +0200 (CEST)
      - pq
        
        2009-08-21 13:22
        
        User since
        2003-08-04
        12208 Artikel
        Admin1
        
        ja, so in etwa, also mit 2 elementen, hatte ich mir das auch gedacht.
        wäre halt cooler, wenn es ein css dafür gäbe...
        Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live. -- Damian Conway in "Perl Best Practices"
        lesen: Wie frage ich & perlintro brian's Leitfaden für jedes Perl-Problem
- +4 replies
- GwenDragon
  
  2009-08-21 10:42
  
  User since
  2005-01-17
  14754 Artikel
  Admin1
  
  Ausblenden per CSS? Geht nicht. Du kannst nicht das alt-Attribut eines Elements (Bildes) anzeigen und das Element gleichzeitig ausblenden.
  die Drachin Gwen
  
  Meine Perl-Artikel · perldev – verschiedene Perl-Versionen unter Windows starten
  - +3 replies
  - pq
    
    2009-08-21 11:59
    
    User since
    2003-08-04
    12208 Artikel
    Admin1
    
    ja, aber das wäre doch wirklich praktisch, wenn es so ein css-feature gäbe, dann könnte man generell bei webseiten manche bilderklassen einfach nicht mehr anzeigen, sondern nur noch den alt-text.
    Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live. -- Damian Conway in "Perl Best Practices"
    lesen: Wie frage ich & perlintro brian's Leitfaden für jedes Perl-Problem
    - +2 replies
    - scriptor
      
      2009-08-21 13:43
      
      User since
      2008-05-07
      69 Artikel
      BenutzerIn
      
      Quote
      ja, aber das wäre doch wirklich praktisch, wenn es so ein css-feature gäbe, dann könnte man generell bei webseiten manche bilderklassen einfach nicht mehr anzeigen, sondern nur noch den alt-text.
      Das ist Sache der Browser, Einstellung "Bilder laden".
      
      Das grundsätzliche Problem hat der Browser, weil er erst das HTML liest und versucht darzustellen. Dazu gehört eben auch, plazierte Bilder zu laden. Und irgendwann kommt dann ein CSS mit display:none!
      Der Weg müßte andersherum gehen: Die Bilder-URLs sind ungültig und mit JS werden sie auf Wunsch richtig zugewiesen; Die Pfadinformation würde zum Beispiel im TITLE-Attribut stehen.
      - pq
        
        2009-08-21 14:31
        
        User since
        2003-08-04
        12208 Artikel
        Admin1
        
        javascript möchte ich für sowas nicht benutzen. das sollte ohne javascript gehn. manche benutzen kein javascript, möchten aber trotzdem gern smileys sehen.
        Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live. -- Damian Conway in "Perl Best Practices"
        lesen: Wie frage ich & perlintro brian's Leitfaden für jedes Perl-Problem
- +5 replies
- murphy
  
  2009-08-21 15:30
  User since
  2004-07-19
  1776 Artikel
  HausmeisterIn
  Aha, eigentlich sollte das Gewünschte doch mit CSS gehen:
  
  Code (html): (dl )
  
  <img class="smile" src="smile.gif" alt=":-)"/>
  
  Code: (dl )
  
  1 2 3 4
  
  .smile { display: inline; content: attr(alt); }
  
  Funktioniert bei mir mit Opera, aber nicht mit Firefox. Da sich der Firefox auch bei anderen CSS-Angaben, die Inhalt generieren oder verändern, merkwürdig verhält, befürchte ich, dass man da nicht so einfach eine portable Lösung zustande bekommt :-/
  
  edit: Tippfehlerkorrektur, vergessene Styleklasse ergänzt
  Last edited: 2009-08-21 15:39:26 +0200 (CEST)
  When C++ is your hammer, every problem looks like your thumb.
  - +3 replies
  - pq
    
    2009-08-21 16:00
    
    User since
    2003-08-04
    12208 Artikel
    Admin1
    
    ah interessant.
    wenn es css-standard ist, würde ich mich damit zufriedengeben, dann sollte FF das irgendwann mal fixen. wo les ich das am besten nach, das mit :content?
    Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live. -- Damian Conway in "Perl Best Practices"
    lesen: Wie frage ich & perlintro brian's Leitfaden für jedes Perl-Problem
    - murphy
      
      2009-08-21 16:24
      
      User since
      2004-07-19
      1776 Artikel
      HausmeisterIn
      
      http://www.w3.org/TR/CSS21/generate.html#propdef-content
      http://www.w3.org/TR/css3-content/#inserting3
      
      Ich verstehe den CSS 2.1 Standard da bereits so, dass die content-Property zwar primär für die Pseudoelemente :before und :after gedacht ist, eigentlich aber auch für jedes andere Element gesetzt werden darf. Der Entwurf des CSS 3.0 Standards bestätigt, denke ich, meine Auffassung.
      
      Unabhängig davon würde es mich als Firefoxbenutzer allerdings ziemlich nerven, wenn ich gezwungen würde, hier im Forum Emoticons in Grafikdarstellung zu ertragen, egal ob das an Fehlern im Firefox oder etwas anderem liegt ;-)
      When C++ is your hammer, every problem looks like your thumb.
    - Linuxer
      
      2009-08-21 16:39
      
      User since
      2006-01-27
      3890 Artikel
      HausmeisterIn
      
      [edit]vielleicht auch ganz hilfreich:[/edit]
      
      http://de.selfhtml.org/css/eigenschaften/pseudofor...
      Last edited: 2009-08-21 17:12:48 +0200 (CEST)
      meine Beiträge: I.d.R. alle Angaben ohne Gewähr und auf Linux abgestimmt!
      Die Sprache heisst Perl, nicht PERL. - Bitte Crossposts als solche kenntlich machen!
  - murphy
    
    2009-08-21 16:37
    
    User since
    2004-07-19
    1776 Artikel
    HausmeisterIn
    
    Ich habe im Netz noch eine andere halbwegs vernünftige Methode gefunden, Text per CSS durch ein Bild zu ersetzen: http://moronicbajebus.com/playground/cssplay/image-replacement/files/
    
    Diese Variante scheint mir portabler als meine eigene Idee zu sein.
    When C++ is your hammer, every problem looks like your thumb.

View all threads created 2009-08-20 18:52.