mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Di 19.03.2024 06:24 Benutzername: Passwort: Auto-Login

Thema: Responsive Image Map vom 11.07.2014


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Responsive Image Map
Autor Nachricht
memento
Threadersteller

Dabei seit: 29.04.2013
Ort: -
Alter: -
Geschlecht: Weiblich
Verfasst Fr 11.07.2014 18:48
Titel

Responsive Image Map

Antworten mit Zitat Zum Seitenanfang

Hallo zusammen, ich musste leider meinen Ausbildungsschwerpunkt direkt vor Ende des letzten Lehrjahres von Print auf Digital wechseln. Um etwas zu üben habe ich mir jetzt einige private Projekte herausgesucht.

In diesem Fall soll es ein Portfolio werden bei dem man auf der Startseite auf Bilder klicken kann und dann zu den entsprechenden Unterseiten kommt. Da diese Bilder aber unbedingt rautenförmig sein sollen musste ich das ganze in einer Image Map umsetzen.

Da das ganze Design responsive sein soll musste ich natürlich auch die Map anpassen. Ich habe auch ein PLUGIN gefunden, dass das ganze eigentlich für mich machen sollte... ABER aus irgendwelchen Gründen klappt es nicht * Keine Ahnung... *

Ich habe heute fast 5 Stunden daran gesessen, alle möglichen Varianten ausprobiert(Code von der beispielseite kopiert, andere Lösungen gesucht, bla...) aber schlauer bin ich immer noch nicht * Nee, nee, nee *
Ich habe das Projekt mal HIER hochgeladen und hoffe jetzt dass irgendjemand von euch vielleicht meinen Fehler sieht oder mir sagen kann was da falsch läuft
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
pantonine

Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
Verfasst Fr 11.07.2014 19:04
Titel

Antworten mit Zitat Zum Seitenanfang

Image maps sind im Zeitalter von CSS3 nicht mehr zeitgemäß für solche Aufgaben. Zumal der Anwendungszweck - vermutlich sollen da ja Bilder rein - gegen die Konzeption mit Image maps spricht.

Und wenn Du das nicht hinbekommst, such Dir leichtere Aufgaben für den Anfang.


Zuletzt bearbeitet von pantonine am Fr 11.07.2014 19:06, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
KaroH

Dabei seit: 18.06.2014
Ort: -
Alter: -
Geschlecht: Weiblich
Verfasst Fr 11.07.2014 22:04
Titel

Antworten mit Zitat Zum Seitenanfang

Hab dir mal eben was gebastelt, auch responsive in 2 Schritten (die restlichen Schritte sind angelegt und die könntest du weiterbauen) und ohne js, nur mit css. http://www.directupload.net/file/u/54548/ainurjj8_jpg.htm
Wenn du die Dateien haben willst, pn an mich.
  View user's profile Private Nachricht senden
memento
Threadersteller

Dabei seit: 29.04.2013
Ort: -
Alter: -
Geschlecht: Weiblich
Verfasst Fr 11.07.2014 23:34
Titel

Antworten mit Zitat Zum Seitenanfang

KaroH, du hast eine PN Lächel

und ich lasse mich auch gerne weiterbilden wie ich das ganze ohne Imagemaps lösen kann pantonine. Was würdest du denn da vorschlagen? Über den z-index? Denn ich habe nicht wirklich eine Lösung gefunden die mir weiterhilft, da die Webseite auf dem Bootstrap Grid system basiert und ich das auch so beibehalten möchte, wenn es eben irgendwie möglich ist... mit dem Positionierungen dürfte es dann ja schwierig werden, absolut fällt dann ja auf jeden fall heraus...

Und zu den leichteren Aufgaben: Also es ist nicht so, dass ich noch nie vorher etwas mit HTML gemacht habe. Es waren meistens nur kleinere Projekte und die Aufgabe mit dem "besonderen" Übersichtsbild habe ich jetzt mal als Herausfoderung gesehen
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
easteregg

Dabei seit: 15.02.2003
Ort: Deutschland
Alter: 36
Geschlecht: Männlich
Verfasst So 13.07.2014 15:03
Titel

Antworten mit Zitat Zum Seitenanfang

memento hat geschrieben:
da die Webseite auf dem Bootstrap Grid system basiert und ich das auch so beibehalten möchte, wenn es eben irgendwie möglich ist...
Ach komm, du machst das ganze nur zum Üben, an einem privaten Projekt. Warum setzt du dir direkt so viele Bedingungen (muss rautenförmig sein, muss responsive sein, muss im Bootstrap Grid sein)? Fang einfach erstmal klein an, und arbeite dich dann hoch. Ein Anfang wäre zum Beispiel das Einlesen in CSS3, wie pantonine es empfiehlt.

Also zum Üben kleine Brötchen backen - ist ja nicht so, dass du uns hier für lau einen Kundenauftrag durchexerzieren lässt, bei dem du die Vorgaben zwingend erfüllen musst. Lächel
  View user's profile Private Nachricht senden
memento
Threadersteller

Dabei seit: 29.04.2013
Ort: -
Alter: -
Geschlecht: Weiblich
Verfasst Mo 14.07.2014 22:18
Titel

Antworten mit Zitat Zum Seitenanfang

Also dank KaroHs Hilfe habe ich es hinbekommen und es klappt schon so wie ich mir das gedacht habe Lächel
Das Ergebnis könnt Ihr hier sehen.

Ich bin echt froh, dass ich hier im Forum Hilfe gefunden habe und es war Tatsächlich nur ein kleiner Denkanstoß nötig damit ich mir alles selbst zusammenbasteln konnte. *Thumbs up!*
In diesem Fall war das einfach nur der Hinweis auf den CSS Befehl "transform: rotate"

Manchmal finde ich nur etwas schade, dass manche User hier im Forum leider so unhöflich sind (wie man es ja häufiger lesen kann), denn ich finde nicht das etwas "unwichtiger" ist nur, weil es mein Übungsprojekt ist. Und Kommentare wie "such dir etwas einfacheres" o.Ä. sind auch keine wirkliche Hilfe. Denn ich denke jeder hier hat schon mal den sprichwörtlichen Wald vor lauter Bäumen nicht mehr gesehen und braucht manchmal einfach einen kleinen Denkanstoß in die richtige Richtung.

Aber in meinem Fall habe ich ja doch noch eine große Hilfe bekommen und genau dafür soll ein Forum ja schließlich auch sein - sich gegenseitig helfen. Danke noch Mal * Ja, ja, ja... *


Zuletzt bearbeitet von memento am Mo 14.07.2014 22:19, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
KaroH

Dabei seit: 18.06.2014
Ort: -
Alter: -
Geschlecht: Weiblich
Verfasst Di 15.07.2014 19:44
Titel

Antworten mit Zitat Zum Seitenanfang

Ist ja ganz lieb von dir. Freut mich sehr, dass ich dir ein bisschen helfen könnte. Viel Erfolg weiterhin mit deiner Seite. Und wenn noch was ist, meldest du dich einfach, vielleicht kann ich dir ja nochmal helfen. *Thumbs up!* * Applaus, Applaus *
  View user's profile Private Nachricht senden
Zim

Dabei seit: 05.12.2006
Ort: Earth Rocks
Alter: -
Geschlecht: Männlich
Verfasst Mi 16.07.2014 10:21
Titel

Antworten mit Zitat Zum Seitenanfang

Hallo,

mal als Tipp weil du ja noch übst und Wert auf HTML5 legst.
Denk mal über die Verwendung von Gliederungs-Tags wie head, section, foot etc nach.
Ich finde das, auch in Verbindung mit dem role-attribut sehr sinnvoll.

Viele Grüße
  View user's profile Private Nachricht senden
 
Ähnliche Themen Responsive Design - verschiedene Image Varianten
Responsive Image Slider mit versch. Bildgrößen
suche ein fall out Image Menu, mit 3 image ebenen
input type=image + image map
Responsive Webdesign
Responsive Tester
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.