zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Knowledge Base
Seite neu laden Bilder-Gallery ohne JavaScript

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 26.07.2004, 17:58
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard Bilder-Gallery ohne JavaScript

Hallo,
angeregt durch diese Gallery [url]http]][/color][/size]

Erstes Bild sollte immer zu sehen sein, die anderen mit Hover bzw. Klick

Mich würde mal interessieren auf welchen Browsern es geht !

IE6 und Firefox 0.91 auf XP Pro gehen
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 26.07.2004, 18:52
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard

IE 5.01 - geht nicht (nur das erste Bild - die anderen werden nicht in groß angezeigt)
IE 5.5 - geht ( kleiner Darstellungsfehler - Rand oben, stört aber nicht wirklich )
IE 6 - geht
Firefox 0.92 - geht
Opera 7.23 - bleibt beim anklicken nicht stehen, hovert aber problemlos

Alles unter Win 98

Hab mir die Galerie auch schon bewundernd angeguckt, weil ich sowas ähnliches ja auch auf meiner HP habe, aber mit Javascript halt. Mal schauen, ob ich´s noch mal umbastel (oder eben ganz anders, wenn ich mich wieder an die HP ranmache..... *g*). Dank Dir jedenfalls fürs umschreiben - ist gleich mal in die Trickkiste gewandert.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 26.07.2004, 20:09
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Danke Dir......erstmal

Zitat:
IE 5.5 - geht ( kleiner Darstellungsfehler - Rand oben, stört aber nicht wirklich )
Wo oben, könnte evtl. mit den WHITE-SPACES zu tun haben :!][/color][/size]

Bei der Gelegenheit auch gleich mal über 100, man weiß ja nie wieviele Ebenen in einem Projekt schon entstanden sind.


Hat jemand noch einen MAC, AOL, T-Online zur Verfügung

Übrigens geht die Gallery auch mit TABS (Barrierefrei ?!)
__________________
</ulle>
Mit Zitat antworten
  #4 (permalink)  
Alt 26.07.2004, 20:48
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von ulle
Danke Dir......erstmal

Zitat:
IE 5.5 - geht ( kleiner Darstellungsfehler - Rand oben, stört aber nicht wirklich )
Wo oben, könnte evtl. mit den WHITE-SPACES zu tun haben
Direkt über dem großen Bild - da bleibt ein schmaler Rand vom ersten Bild übrig - ca. 1-2 pixel, mehr nicht. Sonst ist alles o.k. - kann man mit leben, denke ich. - > werden die 2 pixel für die border sein, von wegen boxmodel und so.....

Nur der IE 5 macht halt gar nix, auch nicht nach Korrektur des Codes (ist eh kein Unterschied ) - der wird doch hoffentlich nicht mehr viel benutzt, oder ?.......
Mit Zitat antworten
  #5 (permalink)  
Alt 26.07.2004, 21:30
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Nur der IE 5 macht halt gar nix, auch nicht nach Korrektur des Codes (ist eh kein Unterschied ) - der wird doch hoffentlich nicht mehr viel benutzt, oder ?.......
Wird wohl immer weniger........

Trotzdem wäre es interessant zu sehen ob die orginale Gallerie, die vom LINK oben, mit dem IE5 funktioniert. Der Ursprungscode war nämlich mehr als seltsam, und ich hatte mich schon gefragt warum ER das wohl so geschrieben hatte.

Boxmodel-Fehler beim IE5.5 , ich dachte der hat nicht das Problem. Da es ja wohl ein Fehler im Startpunkt (Viewport ?!), 2px tiefer........hmmm

Man könnte den [Viewport], da wo [position: relative;] gesetzt wird, ja in der [#gallery_position] setzen, dieser Container ist sowieso Sinnfrei bzw. zum positionieren gedacht, und BOX-Model definitionen ausschliesslich in der [#gallery].

Leider kann ich weder den IE5 noch den IE5.5 testen


Der Opera kennt wohl weder die Pseudo-Class :focus noch :active


Außerdem war auch noch im orginalen Code eine Pseudo-Class :unknown statt :focus, wozu ist mir auch ein Rätzel
__________________
</ulle>
Mit Zitat antworten
  #6 (permalink)  
Alt 26.07.2004, 21:49
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von ulle
Trotzdem wäre es interessant zu sehen ob die orginale Gallerie, die vom LINK oben, mit dem IE5 funktioniert. Der Ursprungscode war nämlich mehr als seltsam, und ich hatte mich schon gefragt warum ER das wohl so geschrieben hatte.
Das Original funktioniert mit dem IE 5 auch nicht, mit dem IE 5.5 ohne Probleme (ohne Rand - da das erste Bild nicht drunter liegt).

Zitat:
Boxmodel-Fehler beim IE5.5 , ich dachte der hat nicht das Problem.
Doch, doch, der auch! Der kann noch keinen Standard-Modus, hat aber doch einige Bugs weniger als der 5er.

Zitat:
Leider kann ich weder den IE5 noch den IE5.5 testen
Kannst Du Dir hier runterladen: http://blog.grochtdreis.de/more.php?id=154_0_1_0_M
einfach in irgendein Verzeichnis entpacken und starten.... - fertig! Und wenn Du sie besser unterscheiden willst, dann nimm Dir noch die Brand-Bitmaps von hier mit: http://blech.home.pages.at/iepara.html

Zitat:
Der Opera kennt wohl weder die Pseudo-Class :focus noch :active
vielleicht der ganz neue? oder zukünftige?
Mit Zitat antworten
  #7 (permalink)  
Alt 27.07.2004, 13:38
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Ohne Preload weniger Traffic

Oben gezeigtes Beispiel ist ja schon ganz fein, aber nicht immer sinnvoll. Dadurch das die "Voll"-Bilder in img-Tags stehen werden auch alle beim Laden der Site "gezogen".

Als CSS (background-image) werden diese aber erst während der "Laufzeit", also wenn der Layer angezeigt wird, geladen.

Natürlich ist dann auch der HOVER-Effekt nicht erwünscht, deshalb ohne. Zusätzlich habe ich einen Layer mit der Anzeige (loading....) hinein gelegt. Geht natürlich nur beim ersten Laden, dann ist diese Datei im Browser-Cache und immer sofort sichtbar (logisch).

:arrow]][/color][/size]

Und nochmal die Frage nach den Browsern die es können....

Opera wird wohl nicht gehen

IE6 / Firefox 0.91 auf XP pro funktionieren
__________________
</ulle>
Mit Zitat antworten
  #8 (permalink)  
Alt 27.07.2004, 13:49
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard

und noch mal die Browserantwort:

IE5.5 - geht nicht - nur das erste Bild wird angezeigt, kein weiteres(den 5er hab ich gar nicht erst versucht)

Opera 7.23 - bei Klicken auf die Vorschaubilder kommen die Bilder, auch das Einblenden von loading klappt - aber eben nur auf Klick - und die Maustaste muss gedrückt bleiben, sonst ist das Bild sofort wieder weg.

IE 6, Firefox o.k., wie bei Dir auch.
Mit Zitat antworten
  #9 (permalink)  
Alt 27.07.2004, 14:25
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
IE5.5 - geht nicht
hmm... das könnte wiederum an der Reihenfolge der Pseudo-Classes liegen. Schliesslich hatte ich ja HOVER herausgenommen

Code:
:link
:visited
:hover
:focus
:active
Deshalb müßte es dann so gehen

Code:
:
:
#gallery a:hover, #gallery a:focus, #gallery a:activ  {
	border: 1px solid #666666;
}

#gallery a:hover strong, #gallery a:hover span {
	color: #000001; 
}

#gallery a:focus span, #gallery a:active span  {
:
:
@terrikay , Entschuldige mein "nerven" aber könntest Du für den IE5.5 noch mal Hand anlegen.

Und das mit dem Opera müßte aber dann mit TABS gehen - oder ?


Schade das sich keine MAC-User findet
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 27.07.2004, 15:02
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard

Ulle, das ist absolut heiß, das Beispiel!

Vor allem die IEs sind wirklich lustig!

Folgendes Beispiel geht (ich schreibs noch mal ganz auf, weil es auf einen Schreibfehler ankommt - der ist wichtig!)
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xxxx</title>
<style type="text/css">   
/*<![CDATA[*/

html,body   {
   margin: 0;
   padding: 0;
   background-color: #FF9933;
   color: #000000;
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 100.01%;
}

#gallery_position { /*im Textfluss*/
   margin: 3em;
}

#gallery {
   position: relative;
   width: 422px;
   height: 380px;
   border: 1px solid #000000;
   background-color: #EFEDEC;
   
}

#gallery img {
   width: 400px;
   height: 250px;
   margin: 9px;
   border: 1px solid #000000;
}

#gallery a, #gallery a:visited {
   display: block;
   float: left;
   width: 75px;
   height: 47px;
   margin: 3px;
   border: 1px solid #000000;
   text-decoration: none;   
}
#gallery a:hover, #gallery a:activ, #gallery a:focus  {         /*hier muß activ stehen - nicht active! */
   border: 1px solid #666666;
}


#gallery a span {
   display: none;
}

#gallery a strong { /* loading-Block */
   display: none;
}

#gallery a:hover strong, #gallery a:hover span {
   display: none;
} 

#gallery a span em {
   display: block;
   
   width: 400px;
   height: 250px;
   margin: 0;
   border: 1px solid #000000;
}


#gallery a:active span, #gallery a:focus span { 
   position: absolute;
   display: block;
   z-index: 100;
   left: 9px;
   top: 64px;
   width: 402px;
   font-size: 0.8em;
   color: #000000;
}


#gallery a:active strong, #gallery a:focus strong   { /* loading-Block */
   position: absolute;
   display: block;
   z-index: 100;
   left: 4px;
   top: 60px;
   width: 375px;
   height: 275px;
   padding: 20px;
   background-color: #EFEDEC;
   color: #1199FF;
   font-size: 0.8em;   
}


/*]]>*/
</style>


</head><body>



<div id="gallery_position">

<div id="gallery">
<a title="loading" style="background-image: url(http://www.stunicholls.myby.co.uk/menu/thumb2.jpg)" href="#">
   Loading......
   <span>
      <em style="background-image: url(http://www.stunicholls.myby.co.uk/menu/pic2.jpg)">[/i]
      Photographs courtesy of morgueFile.com
   </span>
</a>
<a title="loading" style="background-image: url(http://www.stunicholls.myby.co.uk/menu/thumb3.jpg)" href="#">
   Loading......
   <span>
      <em style="background-image: url(http://www.wetteronline.de/daten/sat/2004/07/27/pneI0930.jpg?1090920600)">[/i]
      Photographs courtesy of morgueFile.com
   </span>
</a>
<a title="loading" style="background-image: url(http://www.stunicholls.myby.co.uk/menu/thumb4.jpg)" href="#">
   Loading......
   <span>
      <em style="background-image: url(http://www.stunicholls.myby.co.uk/menu/pic4.jpg)">[/i]
      Photographs courtesy of morgueFile.com
   </span>
</a>
<a title="loading" style="background-image: url(http://www.stunicholls.myby.co.uk/menu/thumb5.jpg)" href="#">
   Loading......
   <span>
      <em style="background-image: url(http://www.stunicholls.myby.co.uk/menu/pic5.jpg)">[/i]
      Photographs courtesy of morgueFile.com
   </span>
</a>
<a title="loading" style="background-image: url(http://www.stunicholls.myby.co.uk/menu/thumb6.jpg)" href="#">
   Loading......
   <span>
      <em style="background-image: url(http://www.stunicholls.myby.co.uk/menu/pic6.jpg)">[/i]
      Photographs courtesy of morgueFile.com
   </span>
</a>
[img]http://www.stunicholls.myby.co.uk/menu/pic2.jpg[/img]
</div>
</div>
</body></html>
Dann passiert folgendes:
Firefox - o.k. - einfach klicken, Bild lädt dann und wird angezeigt
IE6 - so auch o.k. - wenn man #gallery a:active ganz streicht, geht nix mehr, schreibt man es richtig hin, gehts - schreibt man a:activ hin, gehts auch.
IE5.5 - mit #gallery a:active geht nix - nimmt man es weg, dann gehts, schreibt man es mit Schreibfehler hin, gehts auch.
Aber: man muss klicken und dann mit der Maus vom Thumbnail zwingend runter - dann kommt das Bild - bleibt man über dem Thumbnail, passiert nix..........

Opera: bei allen Varianten wie oben beschrieben! - Klicken und Maustaste über Thumbnail gedrückt halten.

Schon echt witzig, diese Galerie! Sollten wir in eine Kuriositätensammlung aufnehmen!
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Hintergrund wird nicht angezeigt maxx CSS 6 14.10.2012 18:27
Hilfe!!! mein Homepagelayout funktioniert nicht! maxx CSS 5 14.10.2012 07:21
Bilder in Javascript Datei verlinken? celine@23 Javascript & Ajax 14 20.10.2011 14:15
Bilder aus image gallery mit Bildüberschrift - nur wie? fossy CSS 0 05.11.2008 16:17
Bilder durch JavaScript laden Stalafin Javascript & Ajax 1 06.10.2006 11:17


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:50 Uhr.