Bild info öffnen
0 
Gunnar Bittersmann
0 
Patrick Andrieu
0 0 Gunnar Bittersmann
0 0
Bild info öffnen
Hi
ich bin mit der Überarbeitung meiner HP schon ganz gut voran gekommen, dabei kam aber noch der Wunsch auf neben einzelne Bilder einen info-Knopf zumachen, und wenn man diesen anklickt sollen die jeweiligen informationen angezeigt werden.
Ich habe das im Moment so gelöst das es zwei fast gleiche HTML Dateien gibt und bei anklicken des Knopfes die gleiche HtmlDatei mit eingefügter infoBox aufgerufen wird. Nun würde ich gerne wissen ob dies noch einfacher bzw. eleganter zulösen ist, da so ja z.b. das Bild zweimal geladen werden muss.
Hier mal die Adresse wo ihr die Beispielseite findet, rechts neben dem Bild ist das infoKästchen.
http://www.sebastianbruell.de/testhp/gallery/animals/zoo/sb071250.html
Achja könnt ihr den Text vollständig lesen, mir hat heute jemand gesagt (an einem rechner mit Linux + Firefox) das der Text nur bis zur Hälfte zu lesen sei, keine Ahnung wieso.
Viele Grüße
Sebastian
-
Hello out there!
Ich habe das im Moment so gelöst das es zwei fast gleiche HTML Dateien gibt und bei anklicken des Knopfes die gleiche HtmlDatei mit eingefügter infoBox aufgerufen wird. Nun würde ich gerne wissen ob dies noch einfacher bzw. eleganter zulösen ist,
Mit JavaScript(!!) versteckst du den Text (
foo.style.display = "none") und schaltest in 'onclick' ein/aus.Oder CSS: Ingo Turskis Infobox
da so ja z.b. das Bild zweimal geladen werden muss.
Nein, muss es nicht; es ist im Browsercache.
http://www.sebastianbruell.de/testhp/gallery/animals/zoo/sb071250.html
</hilfe/bedienung.htm#verweise-einbinden>
Achja könnt ihr den Text vollständig lesen
Woher sollen wir wissen, was vollständig ist? Bei mir hört’s mit „ganz selten auch von Insekten“ auf.
See ya up the road,
Gunnar--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)-
Mit JavaScript(!!) versteckst du den Text (
foo.style.display = "none") und schaltest in 'onclick' ein/aus.Oder CSS: Ingo Turskis Infobox
Danke für den Tipp werde ich mir mal anschauen.
Woher sollen wir wissen, was vollständig ist? Bei mir hört’s mit „ganz selten auch von Insekten“ auf.
Ja danke das war das Ende :)
-
-
Hallo Sebastian!
ich bin mit der Überarbeitung meiner HP schon ganz gut voran gekommen,
Hoffentlich liest Du auch die Tipps, die man Dir gibt: "Sebastian Brüll" ist immer noch als Grafik eingebunden... Auch hast Du immer noch nicht in die FAQ geschaut, wie man hier anklickbare Verweise einbindet. Hole dies bitte also schleunigst nach, denn es ist auf Dauer nervig, ständig copy&paste, neues Fenster öffnen usw zu benutzen. Ein hier eingebundener Link geht bei mir dagegen sofort in einem neuen Fenster auf, ich habe die Forum-my-Ansicht dementsprechend konfiguriert.
http://www.sebastianbruell.de/testhp/gallery/animals/zoo/sb071250.html
dabei kam aber noch der Wunsch auf neben einzelne Bilder einen info-Knopf zumachen, und wenn man diesen anklickt sollen die jeweiligen informationen angezeigt werden.
Ich habe das im Moment so gelöst das es zwei fast gleiche HTML Dateien gibt und bei anklicken des Knopfes die gleiche HtmlDatei mit eingefügter infoBox aufgerufen wird. Nun würde ich gerne wissen ob dies noch einfacher bzw. eleganter zulösen ist, da so ja z.b. das Bild zweimal geladen werden muss.Das ist aber eine sehr umständliche Variante. Du kannst doch Bereiche sichtbar und unsichtbar machen. Siehe Infobox. Auch JavaScript-Lösungen (onclick, onmouseover/-out) sind hier denkbar (für Besucher ohne JavaScript ist die Infobox dann dauerhaft eingeblendet)...
Achja könnt ihr den Text vollständig lesen, mir hat heute jemand gesagt (an einem rechner mit Linux + Firefox) das der Text nur bis zur Hälfte zu lesen sei, keine Ahnung wieso.
Den Text der Info konnte ich lesen (Windows, IE6, FF, Opera) - vorausgesetzt, das Ende des Textes ist wirklich: "...ganz selten auch von Insekten.".
Viele Grüße aus Frankfurt/Main,
Patrick--
_ - jenseits vom delirium - _
<hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash>
Nichts ist unmöglich? Doch!-
Hallo Patrick
Hoffentlich liest Du auch die Tipps, die man Dir gibt: "Sebastian Brüll" ist immer noch als Grafik eingebunden...
Tja da hast du recht das habe ich noch nicht gemacht, weil ich noch zuviel mit anderm beschäfftigt war und ich eigentlich recht froh über die zentrale Steuerung des "Logos" als background image bin, wenn ich es austauschen will muss ich nicht in jedem HTML dokument den Text ändern.
Aber ich denke doch das ich für die Suchmaschinen, das noch ändern werde auch wenns etwas umständlicher ist.Auch hast Du immer noch nicht in die FAQ geschaut, wie man hier anklickbare Verweise einbindet.
Sorry wird hoffentlich nicht mehr vorkommen.
Das ist aber eine sehr umständliche Variante.
Habe ich mir schon gedacht darum frage ich ja wies einfacher klappen könnte :)
Du kannst doch Bereiche sichtbar und unsichtbar machen. Siehe Infobox. Auch JavaScript-Lösungen (onclick, onmouseover/-out) sind hier denkbar (für Besucher ohne JavaScript ist die Infobox dann dauerhaft eingeblendet)...
Okay danke ich werde es mir anschauen, ich bin noch nicht wirklich vertraut mit java, aber es wird schon irgendwie klappen
Den Text der Info konnte ich lesen (Windows, IE6, FF, Opera) - vorausgesetzt, das Ende des Textes ist wirklich: "...ganz selten auch von Insekten.".
Ja das ist das Ende, danke
-
Hello out there!
Hoffentlich liest Du auch die Tipps, die man Dir gibt: "Sebastian Brüll" ist immer noch als Grafik eingebunden...
Wo steht da was von "Sebastian Brüll"? Bei schmalen Viewports ist davon nichts zu sehen. Schlimmer noch: von dem Menü links auch nichts; und es gibt keine Möglichkeit, wenigstens horizontal dorthin zu scrollen.
Die Seite ist damit für etliche Leute unbenutzbar. Hilft nur: neu machen. Speziell: die gewünschte Zentrierung anders realisieren.
Mehrspaltige CSS-basierte Layouts sollte da Brauchbares liefern.
See ya up the road,
Gunnar--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)-
Hello out there!
Hoffentlich liest Du auch die Tipps, die man Dir gibt: "Sebastian Brüll" ist immer noch als Grafik eingebunden...
Wo steht da was von "Sebastian Brüll"? Bei schmalen Viewports ist davon nichts zu sehen. Schlimmer noch: von dem Menü links auch nichts; und es gibt keine Möglichkeit, wenigstens horizontal dorthin zu scrollen.
Was verstehst du unter schmale Viewports?? mit 1024px breite sollte noch einiges an Platz links und rechts sein, wenn ich sie im IE oder FF bei 1024px öffne sieht man links unter Gallery die zusätzliche Navi leiste. Und wenn ich mir die HP bei 800px anschaue gibt es auch eine Scrolleite und teile der navi sind auch noch ohne scrollen sichtbar.
Vlt. hast du ja genau im falschen Moment vorbeigeschaut? Während ich etwas neues gestern ausprobiert habe? aber das war nur kurz, oder kannst du es immer noch nicht sehen??Viele Grüße
Sebastian-
Hallo Sebastian!
Was verstehst du unter schmale Viewports?? mit 1024px breite sollte noch einiges an Platz links und rechts sein, wenn ich sie im IE oder FF bei 1024px öffne sieht man links unter Gallery die zusätzliche Navi leiste. Und wenn ich mir die HP bei 800px anschaue gibt es auch eine Scrolleite und teile der navi sind auch noch ohne scrollen sichtbar.
Der Viewport ist das, was innerhalb des Fensters angezeigt wird, also der sichtbare Bereich eines Fensters. Stell Dir vor, ein Fenster hätte weder Ränder, noch Titel-, Symbol-, Menü-, Googleleisten und auch keine Statusleiste. Dann wäre ein Fenster auf den Viewport reduziert.
Gunnar meint, dass Du nicht wissen, nich voraussetzen kann, wie groß ein Webseiten-Besucher seine Fenster eingestellt hat. Ich hatte in einer unseren letzten Diskussionen erwähnt, dass ich ein 19-Zöller mit der Auflösung 1280*1064 fahre. Zur besseren Verdeutlichung bringe ich heute Bilder mit. Ein maximiertes Fenster sieht dann so aus:
Maximiertes Fenster, GIF 140 KB
Da ich aber nicht nur surfe, sondern nebenher Fernsehnachrichten sehe, Bildbearbeitungsprogramm ist oft offen usw, habe ich meine Fenster in einer Größe geöffnet, die dem entspricht, was ich in dem Viewport auf meinem Laptop (1024*768) bei maximierten Fenstern sehe. Achte darauf, dass obwohl ich das gleiche sehe, wie auf dem Laptop, die Fenster hier nur 911px breit sind:
Ein normales Fenster bei Andrieus, GIF 98KB
Solele. Und wie sieht jetzt Deine Seite aus, wenn man die Breite geringfügig verändert?
Du siehst, Dein weißer Anzeigebereich ist zu breit. Schau mal auf die horiz. Scrollleiste: sie ist bereich ganz links, so dass ein Besucher mit diesen Fensterbreiten alles, was weiter Links ist, nicht "erreichen" kann.
Viele Grüße aus Frankfurt/Main,
Patrick--
_ - jenseits vom delirium - _
<hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash>
Nichts ist unmöglich? Doch!-
Ich danke dir für deine Ausführliche information, jetzt habe auch ich kappiert was ihr meint :)
Ich habe da mal was probiert und bei mir bleibt so aufjedenfall der Name und die linke Menüleiste am linken Rand stehen, wenn man das Fenster verkleinert.
http://www.sebastianbruell.de/testhp/index.html
(ich hoffe der Link funktioniert :) )
Ist es so besser?
Viele Grüße und vielen Dank für eure Hilfe bisher.
Sebastian-
Hallo Sebastian!
http://www.sebastianbruell.de/testhp/index.html
(ich hoffe der Link funktioniert :) )Tut er, und es ist für alle auch besser so, oder?
Ist es so besser?
Eben getestet: Ja. Der Name bleibt sichtbar. Na, aus der Seite wird langsam was! Grats!
Viele Grüße aus Frankfurt/Main,
Patrick
-
-
-
-
-
-
Hallo Sebastian,
mach nur eine Seite auf der die Infos eingebunden sind und verwende ein Javascript, um sie anzeigen zu lassen.
So würde ich den HTML-Code machen:
<div id="picture_info">
<img id="picture_info_button" src="../../../stuff/infobutton.jpg" width="15px" height="15px" alt="Info-Button" onclick="infoToggle();">
<div id="info">
<b>Katta - <i>Lemur catta</i></b><br><br>
Der Katta gehört zu der Familie der Lemuren, er lebt nur auf Madagaskar,
vorallem in offenen Buschzonen und steinigen Arealen.
Er ernährt sich hauptsächlich von Früchten, aber auch von Blättern und
Gräsern, ganz selten auch von Insekten.
</div>
</div>Jetzt schreibst du dir
1. ein kleines Javascript, das die Infos direkt nach dem Laden des <div id="info">-Containers ausblendet und
2. dem Bildchen (vielleicht) das CSS-Attribut "cursor: pointer;" zuweist, sodass diejenigen, die JavaScript aktiviert haben, es als Link erkennen, und
3. die Javascript-Funktion infoToggle(), die die Infos nach Klick auf das Bildchen anzeigt oder ausblendet.
So sehen alle ohne Javascript die Infos immer. Und diejenigen, die Javascript haben, können sie einblenden.Noch zwei kleine Anmerkungen zu deinem Quelltext:
onfocus="if (this.blur) this.blur()"
Das würde ich vermeiden, denn du unterdrückst dadurch eine Funktion, die für alle, die ohne Maus surfen müssen oder wollen, sehr wichtig ist.
<img id="picture_info_button" src="../../../stuff/infobutton.jpg" width="15px" height="15px" alt="info_button">
Den Alternativtext würde ich so nicht verwenden. Ich zweifle nämlich, ob das ein Screen-Reader, der den Text einem Blinden vorliest so lesen kann, dass es für den Hörer Sinn macht. Schreib doch einfach "Info-Button".
Schließlich hast du keine Dokumenttypdeklaration in der ersten Zeile deiner Seite. Die solltest du auf jeden Fall einfügen.
Achja könnt ihr den Text vollständig lesen, mir hat heute jemand gesagt (an einem rechner mit Linux + Firefox) das der Text nur bis zur Hälfte zu lesen sei, keine Ahnung wieso.
Kein Problem (FF, Windows XP).
Grüße
Nico
-
neben einzelne Bilder einen info-Knopf zumachen, und wenn man diesen anklickt sollen die jeweiligen informationen angezeigt werden.
Hallo,
eine reine CSS-Vaiante, die in allen Browsern geht, findest du auf meiner HP. Meine Infokästen öffnen sich beim Hovern, Klick ist nicht nötig. Statt Text als Hoverbereich geht auch eine Grafik.
Im Infokasten selbst kann Text und/oder Bilder gezeigt werden.
Er geht natürlich zu, wenn man den Mauszeiger wieder rausnimmt.Gruß
Michael
