nicht angemeldet
Imagemap an div und Fenstergrösse anpassen
0 0 
Gunnar Bittersmann
Imagemap an div und Fenstergrösse anpassen
henman
Der MartinHallo zusammen
Ich mache für einen bekannten eine Homepage. Dieser hat leider etwas hohe Ansprüche.
Mein Problem ist folgendes:
- Ich brauche ein dynamisches DIV welches im Browserfenster immer zentriert ist (in Höhe und Breite).
- Dieses DIV sollte sich in Höhe und Breite am Browserfenster anpassen. (Mit rand zum Broswerfenster)
- 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.
- Das DIV besitzt eine min-Width und min-height
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'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
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'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
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--
"Sir! We are surrounded!" - "Excellent! We can attack in any direction!"-
@@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'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain) -
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ösungHm …
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'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
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'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Hallo Gunnar,
Unentgeldlich?
und das von dir? ;-)
Auch wenn ein Entgelt meistens mit Geld zu tun hat ...Ciao,
Martin--
Man ist so alt, wie man sich fühlt.
Aber niemals so wichtig.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
@@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'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
-
-
-
-
-
-
@@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'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
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
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
-
-
-
-