Bild soll größer werden

[zschiddi]

Hallo alle,
anhand meiner Beschreibung wird man auch erkennen, dass ich ein Neuling bin. Trotzdem versuch ich auf diesem Wege eine Lösung zu finden. Meine HP kann ich soweit auch mit dem Netobjekt Fusion 4.0 selbst erstellen. Es fehlt jedoch die Möglichkeit ein kleines Bild auf der selben Seite als Groß erscheinen zu lassen. Das heist, es sollten mehrere kleine Grafiken sein, die dann bei abwechsenden  anklicken größer erscheinen, jedoch nicht auf einer Neuen Seite sondern auf der Selben und beim Nächsten bild, das man anklickt, das vorherige Grße wieder verschwindet. Gibt es für diese Funktion einen html-Befehl? Für jede hilfreiche Antwort bin ich dankbar.

[Thomas Luethi]

Hallo,

Meine HP kann ich soweit auch mit dem Netobjekt Fusion 4.0 selbst erstellen.

Soweit ich mich erinnere, versuchte NOF frueher mit allen Mitteln,
den Autor vom HTML-Code fernzuhalten. Es war somit ein reines
"WYSIWYG"-Tool, das von HTML-Kennern deshalb belaechelt
bis verachtet wurde.

Kannst Du bei NOF 4.0 ueberhaupt selbst HTML-Code und
JavaScript-Code eingeben?

Das heist, es sollten mehrere kleine Grafiken sein, die dann bei abwechsenden anklicken größer erscheinen, jedoch nicht auf einer Neuen Seite sondern auf der Selben und beim Nächsten bild, das man anklickt, das vorherige Grße wieder verschwindet. Gibt es für diese Funktion einen html-Befehl?

HTML ist keine Programmiersprache und kennt keine Befehle.

Client-Seitig gibt es fuer Dein "Problem" Loesungen mit:
1. Frames => viele Nachteile, aber fuer eine Bildergalerie
   kann man IMHO ausnahmsweise schon mal so machen.
   Dabei bleibt der Bereich mit den kleinen Bildern fest,
   und das grosse Bild wird mit der dazugehoerigen HTML-Seite
   in einem anderen Frame neu geladen.
2. JavaScript-Bildwechsel => funktioniert aber bei einigen
    Benutzern nicht. Man koennte auch eine "Fallback-Loesung"
    machen, d.h. bei deaktiviertem JavaScript wird bei
    Klick auf den Thumbnail das grosse Bild allein angezeigt,
    und der Benutzer kommt mit der "Zurueck" Funktion des
    Browsers zurueck auf die Seite, und bei aktiviertem
    JavaScript wird das grosse Bild innerhalb der Seite
    ausgetauscht.
    <a href="grossbild.jpg" onclick="bildwechsel(this.href); return false"><img src="kleinbild.jpg" alt="..."></a>
     Die Funktion bildwechsel() musst Du natuerlich entsprechend
     programmieren.
     Als Grundlage kannst Du das JavaScript-Kapitel in SelfHTML lesen, besonders:
     http://selfhtml.teamone.de/javascript/beispiele/buttons.htm

Mit einer serverseitigen Programmiersprache (PHP, Perl, ...)
koennte man eine zuverlaessige Loesung machen, bei
der allerdings jedesmal bei Klick auf ein Thumbnail
eine vollstaendige HTML-Seite abgerufen wird,
wo bloss der HTML-Code fuer das grosse Bild jeweils
angepasst ist.

Bei allen Loesungen ist es auch moeglich, jedem grossen Bild
einen individuellen Kommentar (Text) zu geben.

Gruesse,

Thomas

[coldarchon]

jedoch nicht auf einer Neuen Seite sondern auf der Selben und beim Nächsten bild, das man anklickt, das vorherige Grße wieder verschwindet. Gibt es für diese Funktion einen html-Befehl? Für jede hilfreiche Antwort bin ich dankbar.

es gibt im Internet Explorer eine zoom Eigenschaft per script, die man einfach per onmouseover aufrufen könnte.

[Thomas Luethi]

Hallo,

es gibt im Internet Explorer eine zoom Eigenschaft per script,

Das wuerde aber voraussetzen, dass man alle grossen Bilder
schon vorlaedt, oder besser gesagt, dass die "Thumbnails"
eigentlich die grossen Bilder sind, die durch Breiten- und
Hoehenangaben in HTML/CSS "kleingeschrumpft" werden.

Das macht den Seitenaufbau sehr langsam und ist IMHO ungeeignet.

die man einfach per onmouseover aufrufen könnte.

^^^^^^^^^^^
Er wollte, dass es sich bei einem Klick aendert, nicht
schon beim Hovern. Also bei onclick.

Gruesse,

Thomas

[Thomas Luethi]

Hallo - kleiner Nachtrag:

es gibt im Internet Explorer eine zoom Eigenschaft per script,

Davon wuerde ich natuerlich abraten.
Eine Loesung, die nur im MS IE "funktioniert", ist keine Loesung.

Mit JavaScript gibt es auch genuegend Loesungen, die
in allen JavaScript-faehigen Browsern funktionieren.

Und fuer die Benutzer ohne JavaScript sollte man
(wie bereits erwaehnt) sowieso einen anderen Weg
waehlen, damit auch sie an die grossen Bilder rankommen.

Gruesse,

Thomas

[coldarchon]

Das wuerde aber voraussetzen, dass man alle grossen Bilder
schon vorlaedt

falsch, denn diese funktioniert wie eine Lupe. Man kann den Faktor einstellen.
Hier findet man 3 div tags mit derselben Schriftgröße, aber unterschiedlicher Größe: http://webreference.com/js/tips/011002.html oder auch http://www.webreference.com/js/tips/011005.html
Wenn man nun die Bilder lädt kann man per mouseover den Zoomfaktor evrgrößern, per mouseout verkleinern. Alternativ lassen sich so auch direkt "thumbnails" erstellen ...

Allerdings wäre dies auch eine gute Alternative:
http://www.simplebits.com/tips/photo_zoom.html

[Thomas Luethi]

Hallo,

Das wuerde aber voraussetzen, dass man alle grossen Bilder
schon vorlaedt

falsch, denn diese funktioniert wie eine Lupe. Man kann den Faktor einstellen.

Selbst falsch! ;-)

Wenn Du ein kleines Thumbnail mit der Lupe anguckst, siehst Du die Pixel.
Das ist nicht der Sinn der Sache und wohl nicht das, was zschiddi wollte.

Wenn Du mit diesem Zoom-Zeugs das grosse Bild in anstaendiger Qualitaet
anzeigen willst, musst Du eben von Anfang an das grosse Bild geladen haben
und es zu einem Thumbnail machen, indem Du es runterskalierst.

Das Pseudo-CSS "zoom: ..." des MS IE sollte man sowieso
nicht verwenden. Wenn schon mit CSS skalieren, dann
ueber eine ID/Klasse mit Groessen-Angabe in px.
Oder mit den HTML-Attributen width und heigth
direkt im IMG-Tag.

Allerdings wäre dies auch eine gute Alternative:
http://www.simplebits.com/tips/photo_zoom.html

Wie Du aus einer URL einen klickbaren Link machen kannst,
steht in der FAQ: </faq/#Q-19>

=> http://www.simplebits.com/tips/photo_zoom.html

Die dort vorgeschlagene "Loesung" finde ich ziemlich doof.
Das Bild enthaelt sowohl das kleine als auch das
grosse Bild, und es wird als Hintergrundbild eines
Links, der mit CSS auf zwei verschiedene Groessen
"gezoomt" wird, zweimal verschieden positioniert.
Ohne CSS sieht man bei dieser "Loesung" einen
Text-Link, der auf das "doppelte" Bild zeigt:
http://www.simplebits.com/images/zoom.jpg

Auch hier wird also das grosse Bild schon "vorgeladen",
und es enthaelt zudem auch noch das kleine.
Von der Ladezeit her ist also sogar eine Variante,
wo nur das grosse Bild geladen und zum Thumbnail
verkleinert wird, besser.

Gruesse,

Thomas

[coldarchon]

musst Du eben von Anfang an das grosse Bild geladen haben
und es zu einem Thumbnail machen, indem Du es runterskalierst.

"Alternativ lassen sich so auch direkt "thumbnails" erstellen ..."

wie bereits gesagt ...

Sollte es doch mit ´nem Klick funktionieren müssen, einfach mit getelementbyid die anderen Bilder verkleinern und das angeklickte vergrößern.