Antworten auf deine Fragen:
Neues Thema erstellen

CSS in Sharepoint Bild anpassen

T

Tan13

Guest

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!?
 
Zuletzt bearbeitet von einem Moderator:

T

Tan13

Guest

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

Fugel

rebmeM

PSD Beta Team
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.
 
Zuletzt bearbeitet:
T

Tan13

Guest

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

rebmeM

PSD Beta Team
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

Bin da

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

rebmeM

PSD Beta Team
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.
 

Fugel

rebmeM

PSD Beta Team
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.
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.619
Beiträge
1.538.363
Mitglieder
67.540
Neuestes Mitglied
Alex Weidner
Oben