Imagemap mobil deaktivieren

• 

  katjaleikert · Mitglied · April 26, 2014 at 4:19 pm

  • Link kopieren
  • Thema zu Favoriten hinzufügen

  Hallo zusammen,

  ich habe auf einer Seite eine Imagemap angelegt. Da das darunter liegende Bild bei der Mobilansicht skaliert wird, funktioniert die darüberliegende Imagemap ja nicht mehr richtig (Koordinaten=Pixel=verschoben).

  Am liebsten wäre es mir, nur diese Imagemap (und denn Zusatz „Wenn sie klicken kommen sie da und da hin…“) für die Mobilansicht zu deaktivieren. Alternativ würde ich auf die ganze Grafik (also Karte + Imagemap) in der Mobilversion verzichten.

  Habe ein bißchen mit dem Befehl „media=“screen““ rumgespielt, aber nichts hat sich getan. Da das meine ersten Gehversuche mit Html sind, kann ich leider nicht mit allen Fachbegriffen etwas anfangen. Muss ich das Problem eventuell über ein stylesheet lösen? Wenn ja, wie könnte so etwas aussehen?

  Ich hoffe, dass hier jemand eine Idee hat. Danke vorab!

  Gruß Andy

  Der Blog bei dem ich Hilfe benötige heißt (nur für angemeldete Benutzer sichtbar).

• 

  zodiac1978 · Mitglied · April 26, 2014 at 4:51 pm

  • Link kopieren

  Hast Du mal einen konkreten Link zu der Seite mit Imagemap, dann kann ich mir das genauer ansehen.

  Gruß, Torsten

• 

  katjaleikert · Mitglied · April 26, 2014 at 4:55 pm

  • Link kopieren

  http://katja-leikert.com/wahlkreis/

  Soweit ich mir das jetzt angelesen habe, müsste man das durch Inline-CSS lösen können. Das sieht übrigens im Moment so aus:

  

  Mit einem Klick auf das Gemeindegebiet gelangen Sie zur entsprechenden Homepage der Gemeinde</p>
  <map name=“Imagemap_WK“> Dann folgen die Koordinaten.

• 

  zodiac1978 · Mitglied · April 27, 2014 at 3:11 pm

  • Link kopieren

  Ist das Custom Design-Upgrade vorhanden?

  Gruß, Torsten

• 

  katjaleikert · Mitglied · April 27, 2014 at 3:14 pm

  • Link kopieren

  Ja, habe ich erstanden.

• 

  zodiac1978 · Mitglied · April 27, 2014 at 8:45 pm

  • Link kopieren

  Per Inline-CSS kannst Du keinen Media Query einbauen, aber mit dem Custom Design Upgrade per CSS schon:

  @media screen and (max-width: 767px) {
  Hier gewünschten CSS-Code, der nur bei unter 768 Pixel greift
  }

  So könntest Du die Imagemap in der Mobilansicht ausblenden und nur z.B. stattdessen einen Infotext / Liste einblenden, der wiederum per min-width: 768px ausgeblendet wird.

  Gruß, Torsten

• 

  katjaleikert · Mitglied · Mai 5, 2014 at 8:56 am

  • Link kopieren

  Entschuldige die verspätete Rückmeldung. Herzlichen Dank für deinen Tipp! Habe jetzt langsam verstanden, wie das mit dem CSS läuft. Musste aber zusätzlich zum Code noch die „class“ per Inline-CSS definieren. Funktioniert jetzt wie beabsichtigt!

  Mit der alternativen Einblendung werde ich jetzt nochmal rumspielen. Würde gerne stattdessen nur das Bild ohne die Map einblenden (also lediglich die Karte). Falls du auch hierfür einen schnellen Tipp hast, wäre ich natürlich enorm dankbar.

• 

  zodiac1978 · Mitglied · Mai 9, 2014 at 4:57 pm

  • Link kopieren

  Ich finde gerade keinen Weg per CSS die ImageMap zu deaktivieren, also bleibt wohl nur ein doppeltes Einbauen. Einmal mit und einmal ohne Imagemap. Und dann entsprechend ein- und ausblenden.

  @media only screen and (max-width: 768px) {
      .wahlkreis-map { display:none; }
      .wahlkreis-images { display: static; }
  }
  @media only screen and (min-width: 769px) {
      .wahlkreis-map { display: static; }
      .wahlkreis-images { display: none; }
  }

  wahlkreis-map ist Bild inkl. ImageMa-Informationen und wahlkreis-images ist dann nur das Bild.

  Gruß, Torsten