Autor |
Nachricht |
memento
Threadersteller
Dabei seit: 29.04.2013
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 11.07.2014 18:48
Titel Responsive Image Map |
|
|
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
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
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
|
|
|
|
|
pantonine
Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
|
Verfasst Fr 11.07.2014 19:04
Titel
|
|
|
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
|
|
|
|
|
Anzeige
|
|
|
KaroH
Dabei seit: 18.06.2014
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 11.07.2014 22:04
Titel
|
|
|
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.
|
|
|
|
|
memento
Threadersteller
Dabei seit: 29.04.2013
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 11.07.2014 23:34
Titel
|
|
|
KaroH, du hast eine PN
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
|
|
|
|
|
easteregg
Dabei seit: 15.02.2003
Ort: Deutschland
Alter: 36
Geschlecht:
|
Verfasst So 13.07.2014 15:03
Titel
|
|
|
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.
|
|
|
|
|
memento
Threadersteller
Dabei seit: 29.04.2013
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 14.07.2014 22:18
Titel
|
|
|
Also dank KaroHs Hilfe habe ich es hinbekommen und es klappt schon so wie ich mir das gedacht habe
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.
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
Zuletzt bearbeitet von memento am Mo 14.07.2014 22:19, insgesamt 1-mal bearbeitet
|
|
|
|
|
KaroH
Dabei seit: 18.06.2014
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 15.07.2014 19:44
Titel
|
|
|
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.
|
|
|
|
|
Zim
Dabei seit: 05.12.2006
Ort: Earth Rocks
Alter: -
Geschlecht:
|
Verfasst Mi 16.07.2014 10:21
Titel
|
|
|
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
|
|
|
|
|
|
|
|
Ähnliche Themen |
Responsive Image Slider mit versch. Bildgrößen
Responsive Design - verschiedene Image Varianten
suche ein fall out Image Menu, mit 3 image ebenen
input type=image + image map
responsive layout
Dreamweaver - Responsive CSS
|
|