Imagemap an div und Fenstergrösse anpassen
j0nas
- html
Hallo zusammen
Ich mache für einen bekannten eine Homepage. Dieser hat leider etwas hohe Ansprüche.
Mein Problem ist folgendes:
Kann mir hier jemand weiterhelfen? Habe im Netzt nichts brauchbares gefunden.
Danke schonmal für eure Antworten :)
Gruss
http://suit.rebell.at/artikel/horizontal-und-vertikal-zentrieren-mit-xhtml-und-css
- Dieses DIV wird von einem Bild ausgefüllt. Das Bild (und das DIV) sollten die Proportionen des Bildes beibehalten wenn die Fenstergrösse verändert wird.
Die Proportionsänderung musst du vermutlich mit JavaScript machen sofern du Hoch- und Breiformatige Bilder hast.
@@j0nas:
nuqneH
- Dieses DIV sollte sich in Höhe und Breite am Browserfenster anpassen. (Mit rand zum Broswerfenster)
Wie genau?
- Dieses DIV wird von einem Bild ausgefüllt. Das Bild (und das DIV) sollten die Proportionen des Bildes beibehalten wenn die Fenstergrösse verändert wird.
max-width und max-height fürs Bild.
Und was hat das mit Imagemap zu tun?
Qapla'
Danke @suit, gute Seite. Allerdings habe ich mit den Proportionen so meine Mühe...
@Gunnar
Da die Proportionen des Bildes bei Änderung der Fenstergrösse beibehalten werden, sollte der Abstand des Divs zum oberen und unteren Fensterrand fest sein. Beispielsweise 100px. Der Abstand des Divs zum linken und rechten Fensterrand ändert sich je nach fenstergrösse Proportional zum Bild.
Also:
Das Bild ist immer im Fenster zentriert, behält seine Proportionen und passt sich der Fenstergrösse an.
Über Codebeispiele wäre ich echt dankbar...
Über Codebeispiele wäre ich echt dankbar...
MIt JavaScript beim resize-Event die Größen abfragen und ausrechnen - Mathematikgrundlagen 4. Klasse.
@@j0nas:
nuqneH
Da die Proportionen des Bildes bei Änderung der Fenstergrösse beibehalten werden, sollte der Abstand des Divs zum oberen und unteren Fensterrand fest sein. Beispielsweise 100px.
Und wenn der Viewport weniger oder nur wenig höher als 200 Pixel ist?
Und die alles entscheidende Frage: Um was für ein Bild handelt es sich? Ist es Inhalt oder Verzierung?
Qapla'
Und wenn der Viewport weniger oder nur wenig höher als 200 Pixel ist?
Dann muss halt das Fenster gescrollt werden. Das Bild solle schon eine Midnestgrösse haben
Und die alles entscheidende Frage: Um was für ein Bild handelt es sich? Ist es Inhalt oder Verzierung?
Es handelt sich um ein Foto von einem Gemälde. Auf dieses wird eine Imagemap gelegt und dient dann als Menü.
hallo j0nas,
Es handelt sich um ein Foto von einem Gemälde. Auf dieses wird eine Imagemap gelegt und dient dann als Menü.
blöd, wenn das bild nicht geladen wird. dann ist das Menü nicht wirklich benutzbar
grüße,
henman
@@henman:
nuqneH
blöd, wenn das bild nicht geladen wird. dann ist das Menü nicht wirklich benutzbar
Auch 'area'-Elemente sollten Alternativtexte (@alt) haben.
Qapla'
blöd, wenn das bild nicht geladen wird. dann ist das Menü nicht wirklich benutzbar
Wie meinst du? Warum sollte das Bild nicht geladen werden?
Dass du dann die Koordinaten der 'area'-Elemente auch ändern musst, ist dir klar?
Ok, dass ist natürlich blöd. Hast du eine andere Idee? Eine Fixe grösse fürs Bild ist keine Lösung und Flash kann ich nicht :-S
@@j0nas:
nuqneH
Dass du dann die Koordinaten der 'area'-Elemente auch ändern musst, ist dir klar?
Ok, dass ist natürlich blöd. Hast du eine andere Idee? Eine Fixe grösse fürs Bild ist keine Lösung
Hm …
und Flash kann ich nicht :-S
Das wäre aber die Alternative. Nicht nur zur Imagemap, sondern auch zur ohne Plugin zugänglichen Navigation.
Qapla'
Das wäre aber die Alternative. Nicht nur zur Imagemap, sondern auch zur ohne Plugin zugänglichen Navigation.
Ich wollte Flash bewusst nicht als Alternative vorschlagen, da es für das reine Bildschubsen der Overkill ist - wenn man natürlich dann noch eine Navigation damit lösen will, ist Flash hier sicher eine gute Sache.
Ich wollte Flash bewusst nicht als Alternative vorschlagen, da es für das reine Bildschubsen der Overkill ist - wenn man natürlich dann noch eine Navigation damit lösen will, ist Flash hier sicher eine gute Sache.
Zumal der ganze Rest der Seite auch ziemlich "Flashig" gwünscht wird.
Dazu extra Flash lernen? Hab ich irgendewie keine lust...
Ich wollte Flash bewusst nicht als Alternative vorschlagen, da es für das reine Bildschubsen der Overkill ist - wenn man natürlich dann noch eine Navigation damit lösen will, ist Flash hier sicher eine gute Sache.
Zumal der ganze Rest der Seite auch ziemlich "Flashig" gwünscht wird.
Dazu extra Flash lernen? Hab ich irgendewie keine lust...
Flash musst du auch nicht lernen, ActionScript reicht hier völlig aus - Flash im klassischen Sinn ist heutzutage ohnehin überholt.
@@j0nas:
nuqneH
Dazu extra Flash lernen? Hab ich irgendewie keine lust...
„Ich mache für einen bekannten eine Homepage.“
Unentgeldlich?
„Dieser hat leider etwas hohe Ansprüche.“
Dann muss er sich wohl jemanden suchen, der seinen hohen Ansprüchen gerecht wird. Und ihn entlohnen.
Qapla'
Hallo Gunnar,
Unentgeldlich?
und das von dir? ;-)
Auch wenn ein Entgelt meistens mit Geld zu tun hat ...
Ciao,
Martin
@@Der Martin:
nuqneH
Unentgeldlich?
und das von dir? ;-)
Auch wenn ein Entgelt meistens mit Geld zu tun hat ...
Duh, da haben die Rechtschreibdeformer doch glatt was vergessen. ;-)
Qapla'
@@j0nas:
nuqneH
Es handelt sich um ein Foto von einem Gemälde. Auf dieses wird eine Imagemap gelegt und dient dann als Menü.
Dass du dann die Koordinaten der 'area'-Elemente auch ändern musst, ist dir klar?
Viel Aufwand. Überdenke das Konzept.
Qapla'
Hi,
Dass du dann die Koordinaten der 'area'-Elemente auch ändern musst, ist dir klar?
Theoretisch wären für die Koordinaten auch Prozentangaben erlaubt - ich weiß allerdings nicht, wie es diesbezüglich mit der Browser-Kompabilität aussieht.
Und sonst ist halt maßstabsgerechtes Umrechnen angesagt.
Wenn man für die Größenanpassung des Bildes JS verwendet, kann man das auch mit JS machen.
MfG ChrisB