CSS in Sharepoint Bild anpassen

[Tan13]

Ich bin am verzweifeln. Ich arbeite derzeit an einem Sharepoint. Ich versuche hier die richtige Balance zwischen Benutzerfreundlichkeit und schönes Design zu finden. Auf 2 der Sharepoint Seiten habe ich nun über den Script Editor (CSS oder HTML) ein Foto eingefügt, welche Hyperlinks über <area shape="rect" coords="1013,504,1258,555" href="IMAGEX" verfügen. Die erste Herausforderung war das Bild jeder Bildschirmgröße anzupassen. Dies habe ich dann nach einiger Zeit herausfinden können (width="100%" height="auto") JETZT KOMMT MEIN NEUES PROBLEM: die rechtecke mit den Hyperlinks verschieben sich dadurch natürlich jetzt...

Hier ist der Code:

<img src="" alt="" width="100%" height="auto" usemap="#Map"/>

<map name="Map">

<area shape="rect" coords="1013,504,1258,555" href="">

<area shape="rect" coords="1271,504,1514,551" href="">

</map>

Kann mir jemand helfen? wie setze ich die Hyperlinks in dem Bild fest, sodass es sich mit jedem re-sizing an der gleichen stelle bleibt?

______update: sorry ich bin ein totaler Anfänger es geht glaube ich um HTML und nicht CSS!?

 

[Fugel]

Man korrigiere mich, aber ich meine das ist nur durch Javascript und Matematik möglich.

 

[Tan13]

wie gesagt ich bin absoluter Beginner. In dem Script editor Webpart steht: Paste some script or embed code below.

 

[Fugel]

wie gesagt ich bin absoluter Beginner. In dem Script editor Webpart steht: Paste some script or embed code below.

Dann wird es schwierig und auch wenn du es nicht gern hören wirst, muss ich dir sagen, dass du dich besser vorher mit der Materie vertraut machst. Ohne jegliche Vorkenntnisse ist dein Vorhaben zum Scheitern verurteilt.

 

[Tan13]

Meinst du? Ich dachte meine Frage ist konkret genug. Wüsstest du denn eine Lösung oder ahnst du nur, dass mein Vorhaben scheitern wird? Naja Danke trotzdem. Ich hoffe es melden sich noch andere

 

[Fugel]

Ich dachte meine Frage ist konkret genug.

Ist Sie auch, aber es wird dir hier natürlich keiner ein fertiges Script vorlegen. Wie schon geschrieben, ich würde die Sache mit Javaskcript angehen. Eine andere Möglichkeit fällt mir nicht ein.

Update:

Ich hab nun selbst mal Google angestrengt und bin gleich als erstes auf folgenden Link gestoßen:
http://maddesigns.de/responsive-imagemap-2194.html

Wie schon erwartet ist es mittels Javascript realisierbar.

 

[msa1989]

Sollte eventuell auch ohne gehen.
Habs nicht versucht, aber eventuell klappt es so:
Du legst einen container (div) an und schmeißt da das Bild und den Link rein.
Normalerweise würden die dann untereinander angezeigt werden.
Jetzt kannst du aber mit absoluten Positionen arbeiten und dem Z-Index. Dann kannst du den Link über das Bild positionieren. Das äußere div ist dann quasi dein Platz für das Koordinatensystem. Die Rechtecke musst du dann mit "position: absolute; left: 0..." an die richtige Stelle bringen.

Ich hab hier mal ein Fiddle:
https://jsfiddle.net/4cxd0uv2/

 

[Fugel]

Sollte eventuell auch ohne gehen.
Habs nicht versucht, aber eventuell klappt es so:
Du legst einen container (div) an und schmeißt da das Bild und den Link rein.
Normalerweise würden die dann untereinander angezeigt werden.
Jetzt kannst du aber mit absoluten Positionen arbeiten und dem Z-Index. Dann kannst du den Link über das Bild positionieren. Das äußere div ist dann quasi dein Platz für das Koordinatensystem. Die Rechtecke musst du dann mit "position: absolute; left: 0..." an die richtige Stelle bringen.

Ich hab hier mal ein Fiddle:
https://jsfiddle.net/4cxd0uv2/

Nette Idee, funktioniert aber nicht richtig da viel zu ungenau. Davon abgesehen kannst du bei deiner Idee nur Rechtecke als Link setzen.

 

[msa1989]

Davon abgesehen kannst du bei deiner Idee nur Rechtecke als Link setzen

Naja, nur Rechtecke ist nicht wirklich korrekt. Mit CSS lassen sich viele Formen erzeugen (siehe http://www.cssportal.com/css3-shapes/) und dann besteht ja weiterhin die Möglichkeit ein BIld über ein anderes zu legen und dass als Link zu verwenden.

 

[Fugel]

Naja, nur Rechtecke ist nicht wirklich korrekt. Mit CSS lassen sich viele Formen erzeugen (siehe http://www.cssportal.com/css3-shapes/) und dann besteht ja weiterhin die Möglichkeit ein BIld über ein anderes zu legen und dass als Link zu verwenden.

Das sind im Grunde auch Rechtecke, nur sind diese verformt oder mehrere übereinnander gelegt. Versuch da mal ne Form mit 40 Punkten zu machen. Außerdem bleibt die Problematik, dass es sehr ungenau ist.