Javascript im CSS, geht das?

[Joerg]

Hi,

mag sein, dass ich da ganz was Dummes frage, aber ich frage trotzdem ;-)

Situation: Seite mit vielen Fotos (z.B. Urlaubsbilder). Fotos als Thumbnails auf der Seite, beim Draufklicken oeffnet sich das Bild dann "in gross" im selben Browserfenster. Zurueck kommt man mit der "Back"-Funktion des Browsers. Soweit kein Problem ... Beispiel der vorhandenen Seite:

<a href="img1.jpg"><img height="100" width="133" src="img1i.jpg" title="Click!"></a>

Wenn die Seite "etwas groesser" wird, kann das ewige hin-und-zurueck aber laestig sein. Ich habe nun ein Javascript (ShowImg), das mir die beim Drauflicken in einem Popup aufmacht; die urspruengliche Seite bleibt dabei offen. Der Aufruf erfolgt etwa so:

<a href="javascript:ShowImg('img1.jpg');"><img height="100" width="133" src="img1i.jpg" title="Click!"></a>

Nun die Frage: Kann - bzw. "darf" ;-) - ich diese Funktionalitaet als CSS verwirklichen (und wenn ja: wie?), oder muss ich den gesamten Seiten-code Link fuer Link umschreiben?

Gruss & Merci,

• Joerg

[Afra]

Hallo Joerg!

Das Thema CSS ist hier völlig falsch. Ich würde, um es Dir einfacher zu machen, den aufrufenden Link so gestalten:

<a href="img1.jpg" onclock="ShowImg(this.href);return false;"><img height="100" width="133" src="img1i.jpg" title="Click!"></a>

Dann kannst Du eventuell mit einem generellen replacement alle Links bearbeiten. Ein weiterer Vorteil dieser Methode ist der, dass der ANker an sich erhalten bleibt und jemand ohne Javascript wie vorher das Bild sieht und über den Backbutton zurück kommt.

Schönen Gruß

Afra

[afra]

Oh Gott! Ich meine natürlich onclick ;o)

Schönen Gruß

Afra

[Jörg Peschke]

Oh Gott! Ich meine natürlich onclick ;o)

Jammerschade, ich dachte schon, meine Gebete sein erhört worden, und es gäbe endlich ein vernünftgies Event-System für JavaScript timer :(

var myClock = new Clock(2500);

window.onClock = funktion;

Das wär doch mal was, nicht immer diese erbärmliche window-setTimeout-Quattsch.

War das jetzt getrollt?

Viele Grüße,

Jörg ( der einen Cafe braucht)

[Joerg]

Hi Afra,

Das Thema CSS ist hier völlig falsch.

Der Hintergedanke war(!), die Javascript-Funktionalitaet *im* CSS einzubinden ... daher auch der Titel des Threads und meine Frage, ob das "legal" gewesen waere ;-)

<a href="img1.jpg" onclick="ShowImg(this.href);return false;"><img height="100" width="133" src="img1i.jpg" title="Click!"></a>

Dann kannst Du eventuell mit einem generellen replacement alle Links bearbeiten. Ein weiterer Vorteil dieser Methode ist der, dass der ANker an sich erhalten bleibt und jemand ohne Javascript wie vorher das Bild sieht und über den Backbutton zurück kommt.

Die Idee gefaellt mir ... Danke! :-)

Zusatzfrage: komme ich ueber eines der 'this.*'-Attribute an die Groesse des referierten Bildes ran? Hintergrund ist, dass ShowImg() eigentlich drei Parameter braucht (url, width, heigth) - die Bildgroesse ist aber nicht im urspruenglichen HTML der Seite drin (nur die Groesse des Thumbnails).

Auf den ersten Blick beantworte ich mir diese Zusatzfrage mit "geht nicht", weil die Bildgroesse erst dann verfuegbar wird, wenn das Bild geladen ist. Aber vielleicht uebersehe ich da etwas ... ?

Merci encore,
und Gruss aus Lausanne,

• Joerg

[afra]

Hallo Joerg!

Zusatzfrage: komme ich ueber eines der 'this.*'-Attribute an die Groesse des referierten Bildes ran? Hintergrund ist, dass ShowImg() eigentlich drei Parameter braucht (url, width, heigth) - die Bildgroesse ist aber nicht im urspruenglichen HTML der Seite drin (nur die Groesse des Thumbnails).

Das this bezieht sich auf den Anker, nicht auf das Bild. Oder habe ich Deine Idee jetzt nicht verstanden. Die Größe des vom Anker umschlossenen Bildes ist ja der Thumbnail und nicht das zuladende Bild.

Wie du die Größen des zu ladenden Bildes übergibst, dazu wird Dir sicherlich was einfallen ;o)

Schönen Gruß

Afra

[Joerg]

Hallo Afra,

Zusatzfrage: komme ich ueber eines der 'this.*'-Attribute an die Groesse des referierten Bildes ran? Hintergrund ist, dass ShowImg() eigentlich drei Parameter braucht (url, width, heigth) - die Bildgroesse ist aber nicht im urspruenglichen HTML der Seite drin (nur die Groesse des Thumbnails).

Das this bezieht sich auf den Anker, nicht auf das Bild.

Yep. Das was das, was ich ahnte aber nicht hoeren wollte ;-)

Oder habe ich Deine Idee jetzt nicht verstanden. Die Größe des vom Anker umschlossenen Bildes ist ja der Thumbnail und nicht das zuladende Bild.

Hmm, jetzt hab ich Dich wiederum nicht verstanden ... wenn ich folgenden Code habe (wie oben, nur ultrakurz und mit "klaren" filenamen):

<a href="fullimage.jpg" onclick="ShowImg(this.href);return false;"><img height="100" width="133" src="thumbnail.jpg"></a>

... dann ist das vom Anker *umschlossene* Bild in der Tat "thumbnail.jpg". Allerdings bezieht sich 'this' auf den Anker mit "fullimage.jpg" (und beim Draufhauen will der Browser in der Tat "fullimage.jpg" laden, so wie beabsichtigt).

Wie du die Größen des zu ladenden Bildes übergibst, dazu wird Dir sicherlich was einfallen ;o)

Ja und Nein ... ich hab die Groesse zwar durch das Bild selbst "zur Hand", aber der Hintergedanke war, das ebenfalls "irgendwie" ueber JS auszulesen statt fuer jedes Bild - und bei Urlaubsfotos koennen das recht viele sein - einzeln zu codieren. Bin halt faul, soll doch der Computer rechnen ;-)

... oder uebersehe ich gerade den Baum vor lauter Waeldern?

Gruß aus Lausanne,

• Joerg

[Detlef G.]

Hallo Joerg

Ja und Nein ... ich hab die Groesse zwar durch das Bild selbst "zur Hand", aber der Hintergedanke war, das ebenfalls "irgendwie" ueber JS auszulesen statt fuer jedes Bild - und bei Urlaubsfotos koennen das recht viele sein - einzeln zu codieren. Bin halt faul, soll doch der Computer rechnen ;-)

Überleg mal.
Deine Funktion öffnet ein neues Fenster, dieses Fenster lädt dann das Bild.
Beim öffnen des Fensters kann der Browser die Größe des Bildes noch nicht
kennen.

... oder uebersehe ich gerade den Baum vor lauter Waeldern?

Du könntest evwentuell, das Popup mit dem Bild öffnen, und dann wenn das
Bild geladen ist, der Browser also die Größe kennt, die Fenstergröße
anpassen.

Suche mal im Archiv, ich denke mich daran zu erinnern, das dort schon
entsprechende Scripte verlinkt wurden.

Eine andere Möglichkeit wäre, nicht das Bild allein, sondern im Popup
eine Seite entsprechend des grösten Bildes aufzurufen. In diese wird
mittels Javascript das jeweilige Bild aus dem href einfügt.

Auf Wiederlesen
Detlef

[Cybaer]

Hi,

Der Hintergedanke war(!), die Javascript-Funktionalitaet *im* CSS einzubinden ... daher auch der Titel des Threads und meine Frage, ob das "legal" gewesen waere ;-)

Das kann nur der IE (natürlich mit JScript ;-)).

Gruß, Cybaer

[Christoph Zurnieden]

Hi,

tja, da war ich mal wieder zu langsam, aber egal ;-)

<a href="img1.jpg"><img height="100" width="133" src="img1i.jpg" title="Click!"></a>

title="Click!" ist kein wirklich aussagekräftiger Titel und außerdem fehlt noch das "alt"-Attribut.

Wenn die Seite "etwas groesser" wird, kann das ewige hin-und-zurueck aber laestig sein.

Deshalb gibt es Leute, die laden sowas in ein eigenes Fenster/Tab. Gerne auch mit der mittleren Maustaste, also sehr schnell und direkt.

<a href="javascript:ShowImg('img1.jpg');"><img height="100" width="133" src="img1i.jpg" title="Click!"></a>

title="Click!" ist immer noch kein wirklich aussagekräftiger Titel und außerdem fehlt weiterhin das "alt"-Attribut. Auch kommt man jetzt mit ausgeschaltetem Javascript nur noch schwer an das Bild. Besser wäre sowas Ähnliches, wie hier:

<a href="img1.jpg" onclick="ShowImg('img1.jpg');return false;"><img height="100" width="133" alt="Bild von grünem Apfel (Cox)" src="img1i.jpg" title="Aus unserem Sonderangebot: nur 19,95 EUR der Zentner!"></a>

Nun die Frage: Kann - bzw. "darf" ;-) - ich diese Funktionalitaet als CSS verwirklichen (und wenn ja: wie?), oder muss ich den gesamten Seiten-code Link fuer Link umschreiben?

Du kannst mit CSS keine Fenster öffnen und Du mußt nicht alles umschreiben.

Aber obiges Beispiel gibt ja schon eine Hinweis: Du kannst den Event "onclick" überwachen und wenn er im Element 'a' (Kinder nicht vergessen!) vorkommt den Wert des Attributes "href" auslesen und daraus den Fensteröffner zusammenbasteln. Ist nicht unbedingt einfach, aber bei Problemen sind wir gerne behilflich.

so short

Christoph Zurnieden