Navigations Hot-Spots auf Bildern

[TomQ]

Hallo zusammen,

bin komplett neu hier und habe gleich ein Frage:
Wie kann ich auf einer Grafik Hot-Spots anlegen und diese verlinken?

Vielen Dank für jeden Tipp.

TomQ

[stefan-at-work]

Hi Tom,

per Hand anlegen oder aber via Usemap

[filmemacher]

Hallo,

einfach mit einem entsprechenden Programm (ich nutze dafür Dreamweaver) eine Imagemap anlegen. In Contao ein Modul vom Typ HTML anlegen und den Quellcode der Imagemap dort hineinkopieren. Gegebenenfalls die Links anpassen. Und das Modul an der gewünschten Stelle ins Layout einbinden.

[fesh]

Da gibts für den TinyMCE ein schönes Plugin mit dem du direckt im Artickel über jedes Bild eine Map basteln kanst und das ganze ohne html und co. das ganze findet man hier: http://code.google.com/p/imgmap/downloads/list

und wie du dem TinyMCE das in contao beibringst findest du hier: http://www.contao.org/tinymce-anpassen.html

Das ganze sieht das so in etwa aus:
map1.jpg

ich hab mir das noch bissl aufgebohrt da ich zusätzliche sachen mit rein haben wollte wie Tooltips u.ä. und da siehts dann so aus:
map2.jpg

[walddag]

Hallo,

einfach mit einem entsprechenden Programm (ich nutze dafür Dreamweaver) eine Imagemap anlegen. In Contao ein Modul vom Typ HTML anlegen und den Quellcode der Imagemap dort hineinkopieren. Gegebenenfalls die Links anpassen. Und das Modul an der gewünschten Stelle ins Layout einbinden.

hallo fesh,

fesh

Da gibts für den TinyMCE ein schönes Plugin mit dem du direckt im Artickel über jedes Bild eine Map basteln kanst und das ganze ohne html und co. das ganze findet man hier: http://code.google.com/p/imgmap/downloads/list

und wie du dem TinyMCE das in contao beibringst findest du hier: http://www.contao.org/tinymce-anpassen.html

Das ganze sieht das so in etwa aus:
Anhang 3885

ich hab mir das noch bissl aufgebohrt da ich zusätzliche sachen mit rein haben wollte wie Tooltips u.ä. und da siehts dann so aus:
Anhang 3886

1. ich habe mit dem programm fast image-map 2.21 http://www.cl-soft.de/ die Unterlagen erstellt;
verweisflächen als kreis, viereck, polygone in unterschiedlichen reihenfolgen eingerichtet


Meine Datei:
(((((((( <map name="home1muster1" id="home1muster1">
<area shape="poly" coords="4,151,62,145,69,179,66,207,36,211,0,211,3, 173,6,149,6,149" href="http://........./events.html?month=20120201" target="self" onClick="cursor: pointer;" alt=".........ür Jedermann" title=".................ür Jedermann" />
<area shape="circle" coords="41,256,34" href="http://...............kner.html" target="top" alt="...........hein" title="........ein" />
<area shape="poly" coords="94,194,95,195,119,167,198,173,213,186,215, 242,207,266,192,276,156,273,120,280,92,273,87,255, 82,226,98,189" href="http://.......................und.html" target="self" onClick="cursor: pointer;" alt="................ildung" title="............ildung" />


<area shape="rect" coords="78,297,131,350" href="http://...................itur.html" target="self" onClick="cursor: pointer;" alt="......tur" title="......tur" />
<area shape="circle" coords="323,328,34" href="http://........................rkeit.html" target="self" onClick="cursor: pointer;" alt=".................hund" title="...............dhund" />
</map>
<img src="muster1-hr2collage1.gif" width="360" height="360" border="0" alt="Home" title="Home" usemap="#home1muster1" />
))))))))))))

2. hieraus den bodybereich
3. kopiert nach >> contao >> modul >>typ eigener html
3a. als zieladresse >> die komplette url angegeben
4. sofern ich über die einzelnen verweise ziehe werden diese nicht korrekt dargestellt, teilweise liegen sie immer einen verweis darunter

was ist mein gedankenblackout, wie hast du es gelöst.

welche erweiterung zum tinymce hast du genommen.

wenn du unterlagen benötigst, melde dich bitte. Die seite auf dem hoster!

für eine nachricht vielen dank im voraus.

[fesh]

Hallo Waldag,

Sry, war jetzt wirklich ne weile nicht online -> viel zu tun.

Ich hatte mir damals das Plugin von Google-Code geladen, das findest du hier:
http://code.google.com/p/imgmap/downloads/list

und in etwa nach der Contao-Anleitung (hier) eingebaut.

Die Maps hab ich dann direkt im Editor gezogen.

Bei Dir sieht es aber nach einem falschen 0-Punkt aus -> wenn dem so ist sollten alle Verweise um die gleiche Entfernung versetzt sein.
Ich hatte das Problem auch einmal als ich Maps im Dreamweaver gezeichnet hatte. Die einfachste Art ist immer noch das Plugin für den TinyMCE - so kannst du auch in der Live-Umgebung schnell Änderungen machen.
Das einzige was du auf jeden Fall machen mußt wenn du das Plugin benutzt -> Ergänzen der Tags in der Contao-Config!!!! Sonst haut er dir die Tags wie <shape> oder <poly> gleich wieder raus.

[walddag]

Hallo Waldag,

Sry, war jetzt wirklich ne weile nicht online -> viel zu tun.

Ich hatte mir damals das Plugin von Google-Code geladen, das findest du hier:
http://code.google.com/p/imgmap/downloads/list

und in etwa nach der Contao-Anleitung (hier) eingebaut.

Die Maps hab ich dann direkt im Editor gezogen.

Bei Dir sieht es aber nach einem falschen 0-Punkt aus -> wenn dem so ist sollten alle Verweise um die gleiche Entfernung versetzt sein.
Ich hatte das Problem auch einmal als ich Maps im Dreamweaver gezeichnet hatte. Die einfachste Art ist immer noch das Plugin für den TinyMCE - so kannst du auch in der Live-Umgebung schnell Änderungen machen.
Das einzige was du auf jeden Fall machen mußt wenn du das Plugin benutzt -> Ergänzen der Tags in der Contao-Config!!!! Sonst haut er dir die Tags wie <shape> oder <poly> gleich wieder raus.

hallo fesh, ist alles soweit ok, mir geht es im moment ebenso, aber machen wir uns den stress nicht selber !!

welchen tag soll ich denn ergänzen ? ich würde doch alles in die neue html hineinkopieren oder ?

bis dann ............

[fesh]

unter System->Einstellungen->Sicherheitseinstellungen (im BE) die fehlenden Tags bei "erlaubte Tags" einfügen, da Contao von Haus aus keine Tags für Maps im mce vorgesehen hatt und diese dann unweigerlich wieder löschen würde.

Wennn Du die den Map-Editor im installiert hast kannst du dann deine Bilder direkt im BE im mce mappen -> da brauchst du nix mer hin und her kopieren