nicht angemeldet
Thumb per get.Element in Table anzeigen!
Moinsen :)
Ich hoffe mir kann jemand etwas Hilfestellung leisten, da ich Layouter bin, aber kein Coder, und somit auch kein Crack in Sachen Javascript (könnte etwas länger ausfallen jetzt;)
Folgendes:
Ich layoute gerade die Seite für eine Künstlerin, Design und Grundgerüst stehen bereits. Damit das alles schön "stylisch" wirkt ^^ habe ich das Design in JPEG gehalten, das Gerüst besteht also aus einer ziemlich komplexen Ansammlung von Tables mit einer Vielzahl von Bildern (bitte jetzt keine Kommentare zur Ladezeit ;)
Neben diversen Zellen die jetzt unwichtig sind gibt es mittig eine Hauptzelle, rechts eine für den Content der zweigeteilt ist (obere Hälfte für das Contentmenü, untere Hälfte scrollbar als iframe für die Thumbnails). Gewünscht ist dass, wenn ein Thumbnail rechts angeklickt wird das Bild in Originalgrösse in der Hauptzelle angezeigt wird. Dafür habe ich folgendes, ganz simples, Script verwendet:
---+++---
<script type="text/JavaScript">
<!--
function fotos(url){document.getElementById("bild").src = url;}
//-->
</script>
---+++---
Für die Id habe ich sinnvollerweise ein Blankobild genommen welches in der Hauptzelle sitzt und das durch klicken des Thumbs ersetzt wird.
Die Funktion dafür sieht wie folgt aus:
---+++---
<a href="#"
onclick="fotos('../images/artwork/dark-diva/angel.jpg');"> <img
style="border: 0px solid ; width: 118px; height: 190px;" alt=""
src="../images/artwork/dark-diva/angel-thumb.jpg"></a>
---+++---
Bisher alles kein Problem, die Bilder werden bis zu einer 32bit Bildschirmauflösung 1024x968px problemlos ersetzt und angezeigt (alles darüber verzerrt komischerweise ein wenig, aber Bildschirmauflösungen sind ja auch nicht pixelgetreu synchron).
MEIN PROBLEM, und somit auch meine Frage:
Jetzt kommen Bilder hinzu die nicht vertikal sondern horizontal ausgerichtet sind, sprich im Querformat. Würde ich also ein querformatiges Bild mit dieser Funktion versehen wäre es bis zur Unkenntlichkeit verzerrt, da Höhe und Breite der ID ja fix sind.
Erst dachte ich an eine zweite Funktion (also 'foto2' 'bild2') um das Thumb bei einem anderen Format einfach auf ein querformatiges ID zu lenken. ABER - da die ID ein Bild ist, und zwei Bilder nicht übereinander gelegt werden können, geht das natürlich nicht.
Hat da jemand einen Vorschlag ohne das Script auszutauschen (ist schon auf unzähligen Seiten eingebettet)!?
Ausprobiert habe ich schon:
- die Id´s nicht auf Bilder zu setzen sondern auf den Table selbst, wurde aber nicht angenommen (auch nicht als Background)
- die Id´s auf einen iframe zu setzen
- die Id´s auf iLayer setzen, aber die bleiben beim Ändern der Bildschirmauflösung nicht fix an ihrem Ort wie der iframe
- die Id 1 auf ein Bild im Table, die ID 2 auf ein Bild in einem darüber liegenden iLayer zu lenken, aber siehe oben, klappt nicht mit allen Auflösungen.
Gibt es eine Möglichkeit die Anzeige flexibel zu halten, so dass das Original unabhängig von der Formatierung einer ID in seiner tatsächlichen Grösse angezeigt wird, oder versagt da Javascript grundsätzlich!? Ich möchte nicht auf simple Bilderlinks und/oder Popups zurück greifen, sondern wirklich möglichst versuchen die Thumbs in ihrer Zelle mit dem Original in der Hauptzelle anzuzeigen.
Danke schon mal.
MfG
der traumgaertner
-
Boah, wie wärs wenn du die Zelle mit einer Fixen breite und höhe per css beschreibst und nicht das <img-element> ?? (ich weiss, hässlich oder gar unmöglich).
Vielleicht kannst du auch mit den Werten: "Auto" bei der Breite oder bei der Höhe hantieren. Oder aber du versuchst es mit Overflow: hidden.
Bin mir bewusst, dass das nur wage lösungsvorschläge sind.
Würde auch mal probieren die width / height Angaben per Attribute im img-tag zu setzen und nicht als CSS inline.
Das Ganze hat kaum mit JS zu tun, also am besten einfach mal direkt das 'ersetzungsbild' laden lassen und schauen, wie es dann angezeigt wird.
-
"wie wärs wenn du die Zelle mit einer Fixen breite und höhe per css beschreibst und nicht das <img-element>"
Naja - die Zelle ansich ist ja fix. Das Problem ist die fixe Breite/Höhe des img das ersetzt wird. Wie gesagt, es funktioniert ja, bis sich die Breite/Höhe des Originals verändert und nicht mehr der ID entspricht.
Ist der Wert "auto" nicht eigentlich ein HTML-Tag!? Funktioniert der in Javascript überhaupt?
-