Javascript oder CSS - Geschwindigkeit oder Barrierefrei??

[Thomas]

Hallo,
ich habe auf meiner Seite viele Bilder, die beim Überfahren des entsprechenden Links angezeigt werden sollen.
Die Maximale Grösse dieser Bilder beträgt 12KB, eigentlich nicht viel, aber da immer 20 Bilder pro Seite angezeigt und geladen werden, kommen pro Seite schon schnell 200KB zusammen.

Nun meine Frage, was ihr machen würdet:

Die Bilder werden momentan mit CSS geladen, vorher hab ich ein Javascript benutzt.
Beim Javascript habe ich natürlich die Gefahr, dass ein Benutzer mal kein JavaScript aktiviert hat und deshalb bestimmte Funktionen meiner Seite nicht nutzen kann.

Mit Javascript werden die Bilder aber erst geladen, wenn der Benutzer mit seiner Maus auf den Link setzt, was wiederrum für ne Menge Traffic weniger sorgt als mit CSS..

Also entweder ne Menge Traffic, dafür aber Barrierefrei, oder mit Einschränkungen, dafür aber wenig Traffic...???
Oder gibts noch eine weitere Möglichkeit???

MfG,
Thomas

[Gernot Back]

Hallo Thomas,

Mit Javascript werden die Bilder aber erst geladen, wenn der Benutzer mit seiner Maus auf den Link setzt,

mit CSS doch auch!

was wiederrum für ne Menge Traffic weniger sorgt als mit CSS..

Nicht wenn du dir eine Vorladefunktion schreibst, die die Bilder schon beim Laden der Seite auf Vorrat in den Cache lädt. Das kannst du übrigens auch machen, wenn du die Bilder nachher statt mit JS (mouseOver) mit CSS (:hover) austauschst.

Also entweder ne Menge Traffic, dafür aber Barrierefrei, oder mit Einschränkungen, dafür aber wenig Traffic...???

Da hast du eben nur die Wahl zwischen Pest und Cholera, so ist das nun mal! ;-)

Gruß Gernot

[Thomas]

Mit Javascript werden die Bilder aber erst geladen, wenn der Benutzer mit seiner Maus auf den Link setzt,

mit CSS doch auch!

und wie stelle ich das an?? bei momentanem stand werden die bilder ja schon geladen, wenn sich die seite aufbaut, allerdings werden sie halt nur noch nicht angezeigt...

Momentaner CSS-Code:

a.infobox:hover {
   background:none;
  }

a.infobox span {
   visibility:hidden;
  }

a.infobox:hover span {
   display:block;
   visibility:visible;
  }

Aufruf in HTML:
<a class='infobox' href=''>Link<span><img src=''></span></a>

Weiss hier auch zufällig jemand, warum ich bei a.infobox:hover ein background setzen muss, auch wenns none ist...ansonsten zeigt mir der IE nämlich den Span nicht an... ???  Der Firefox schon!!

Zudem habe ich das Problem, dass der IE Probleme mit dem Bild hat...ich schaffe es trotz z-index nicht, das Bild über einen Div zu bekommen..der Frefox macht auch hier wiederrum alles richtig...

MfG
Thomas

[Detlef G.]

Hallo Thomas

Weiss hier auch zufällig jemand, warum ich bei a.infobox:hover ein background setzen muss, auch wenns none ist...ansonsten zeigt mir der IE nämlich den Span nicht an... ???  Der Firefox schon!!

Weil der IE zu dumm ist. Er versteht "a.infobox:hover span" zwar, kommt aber
nicht auf den Gedanken neu zu rendern. Erst wenn sich bei "a.infobox:hover"
irgend etwas ändert (auch wenn die Änderung nicht sichtbar ist), rendert er neu
und berücksichtigt dann auch "a.infobox:hover span".

Auf Wiederlesen
Detlef

[Thomas]

Weil der IE zu dumm ist.

Ok, das reicht mir :-D

aber das war nur mein kleinstes problem, bei den andern beiden sachen bin ich selbst immer noch nicht weiter gekommen.. :-/

MfG,
Thomas

[Detlef G.]

Hallo Thomas

aber das war nur mein kleinstes problem, bei den andern beiden sachen bin ich selbst immer noch nicht weiter gekommen.. :-/

Versuche es doch mal so:

CSS:

  
  a.infobox {  
   position:relative;  
  }  
  
  a.infobox:hover {  
   background:none;  
  }  
  
  a.infobox span {  
   visibility:hidden;  
   display:none;  
  }  
  
  a.infobox:hover span {  
   display:block;  
   visibility:visible;  
   position:absolute;  
   left:0;  
   top:0;  
   height:Bildhoehe;  
   width:Bildbreite;  
   background-image:url(BildURL);  
  }  

HTML:

  
   <a class='infobox' href='BildURL'>Link<span></span></a>  

Auf Wiederlesen
Detlef

[Thomas]

Versuche es doch mal so:
...
...
  a.infobox:hover span {
   display:block;
   visibility:visible;
   position:absolute;
   left:0;
   top:0;
   height:Bildhoehe;
   width:Bildbreite;
   background-image:url(BildURL);
  }
[/code]

Das heisst ja dass ich den CSS-Code im PHP-Script einbauen muss und nicht in einer externen CSS-Datei lagern kann, da ich ja für jeden link ein anderes background-image habe...

MfG,
Thomas

[Detlef G.]

Hallo Thomas

Das heisst ja dass ich den CSS-Code im PHP-Script einbauen muss und nicht in einer externen CSS-Datei lagern kann, da ich ja für jeden link ein anderes background-image habe...

Jain, du schreibst alles das, was für alle Bilder gilt in das externe CSS und
lässt das PHP-Script in jeden Bild-Link eine ID einfügen und in einen CSS-Bereich
im Head nur die variablen Teile.

Also z.B.:

HTML:

  
   <a class='infobox' href='BildURL' id="BildID">Link<span></span></a>  

CSS:

  
  a#BildID:hover span {  
   background-image:url(BildURL);  
   height:Bildhoehe;   /* wenn die Bilder unterschiedliche Formate haben */  
   width:Bildbreite;   /* sonst zentral im externen CSS */  
  }  

Auf Wiederlesen
Detlef

[Thomas]

HTML:

<a class='infobox' href='BildURL' id="BildID">Link<span></span></a>

>   
> CSS:  
> ~~~css
  

>   a#BildID:hover span {  
>    background-image:url(BildURL);  
>    height:Bildhoehe;   /* wenn die Bilder unterschiedliche Formate haben */  
>    width:Bildbreite;   /* sonst zentral im externen CSS */  
>   }  
> 

LOL,
genauso habe ich mir das auch zusammengebaut und sogar die gleichen Variable a benutzt, ohne vorher diesen Eintrag zu lesen.. :-)

Naja...habs aber schon getestet und klappt leider trotzdem nicht...der lädt die bilder direkt beim seitenaufbau!!! :-/

MfG,
Thomas

[Detlef G.]

Hallo Thomas

Naja...habs aber schon getestet und klappt leider trotzdem nicht...der lädt die bilder direkt beim seitenaufbau!!! :-/

Dann wird wohl doch nur die Javascript-Variante bleiben.
Die könntest du dann so einbinden, dass Besucher ohne Javascript das Bild
mittels Klick aufrufen können.

In etwa so:

  
<a class='infobox' href='BildURL' onmouseover="ZeigeBild(this.href)" onmouseout="VersteckeBild()">Link</a>  

Auf Wiederlesen
Detlef