bBcda: verschiedene Bilder für media=screen und media=handheld

Hallo!

Ich habe eine einfache Frage, komme aber nicht weiter.
Ich möchte meine Webpage (geschrieben in HTML) sowohl für "normale" Computer (media=screen) als auch für Mobilgeräte und Handys (media=handheld) programmieren und dabei verschiedene Bilder für die jeweiligen Geräte bereitstellen (kleinere Bilder für Handys, wegen der nach wie vor lahmen Übertragungsgeschwindigkeit).
Habe den halben Tag nach Möglichkeiten gegoogelt, aber bislang keine funktionierende Variante gefunden. Das Problem: ich weiß zwar, wie man per CSS für die beiden Medien das Seitenlayout gestaltet. Möchte aber die Bilder im HTML-Teil einfügen (und dabei die beiden Varianten angeben). Kann mir bitte jemand einen Link oder Beispielcode geben, der beschreibt, wie dies möglich ist? Muss doch gehen, sowas...

LG!
bb

  1. Hallo!

    Warscheinlich willst du es etwa so...

    Im HTML:

      
    <img class="screen">  
    <img class="handheld">  
    
    

    Im screen.css:

      
    img.handheld {  
     display:none;  
    }  
    
    

    Im handheld.css:

      
    img.screen {  
     display:none;  
    }  
    
    

    Und das mit fachlich hilfreich war ich und unbeabsichtigt :-)

    ciao, ww

    --
    sh:(  fo:|  ch:~  rl:(  br:>  n4:~  ie:%  mo:)  va:)  de:]  zu:)  fl:(  ss:|  ls:~  js:)
    1. Hallo wucher.

      Warscheinlich willst du es etwa so...

      Im HTML:

      <img class="screen">
      <img class="handheld">

        
      Hier fehlen sowohl das src- als auch das alt-Attribut.  
        
      
      > Im screen.css:  
      > ~~~css
        
      
      > img.handheld {  
      >  display:none;  
      > }  
      > 
      
      

      Im handheld.css:

      img.screen {
      display:none;
      }

        
      Anderer Vorschlag:  
        
      `<img src="blank.gif" alt="Wichtiger beschreibender Text" />`{:.language-html}  
        
      Diesem img-Element kann nun unabhängig für den Medientyp „screen“ und „handheld“ eine andere Hintergrundfarbe verpasst werden, welches durch das volltransparente „blank.gif“ hindurchscheint.  
        
        
      Einen schönen Sonntag noch.  
        
      Gruß, Mathias  
      
      -- 
      ie:% fl:| br:< va:) ls:& fo:) rl:( n4:~ ss:) de:] js:| mo:| zu:)  
        
      debian/rules
      
      1. Hallo nochmal.

        <img src="blank.gif" alt="Wichtiger beschreibender Text" />

        Diesem img-Element kann nun unabhängig für den Medientyp „screen“ und „handheld“ eine andere Hintergrundfarbe verpasst werden, welches durch das volltransparente „blank.gif“ hindurchscheint.

        … Hintergrundgrafik, welche …

        Einen schönen Sonntag noch.

        Gruß, Mathias

        --
        ie:% fl:| br:< va:) ls:& fo:) rl:( n4:~ ss:) de:] js:| mo:| zu:)
        debian/rules
      2. Hallo!

        Im HTML:

        <img class="screen">
        <img class="handheld">

        
        >   
        > Hier fehlen sowohl das src- als auch das alt-Attribut.  
          
        Ich weiß. Das sollte auch kein voll funktionsfähiges Beispiel sein, sondern eher ein Denkanstoss. Außerdem wären Größenangaben auch [nicht schlecht](https://forum.selfhtml.org/?t=149143&m=968320) :-)  
          
        ciao, ww
        
        -- 
        sh:(  fo:|  ch:~  rl:(  br:>  n4:~  ie:%  mo:)  va:)  de:]  zu:)  fl:(  ss:|  ls:~  js:)
        
  2. Hallo!

    Vielen Dank für die unglaublich schnelle Hilfe (auch an wichtel). Funktioniert. Wunderbar. Simpel. Perfekt! :-) Danke!

    bbcd