Link zu Hotspot

pexcel · 08.09.2010

Hallo zusammen,

ich habe ein Imagemap mit ca 200 Hotspots erstellt (Übersichtsplan einer Gartenanlage).
Weiterhin habe ich eine Tabelle, in der die freien Gärten aufgelistet sind.

Ich möchte nun erreichen, dass bei Klick (oder Mouseover) auf die Gartennummer in der Tabelle der entsprechende Hotspot im Imagemap gekennzeichnet wird (z.B. eingefärbt).

Hat jemand einen Tipp, wie ich das realisieren kann?

Viele Grüße
pexcel

fexx · 08.09.2010

AW: Link zu Hotspot

kannst du bitte mal einen link oder ein bild zeigen, wie dus meinst?

aber generell würde ich sagen, das sollte mit javascript kein problem sein.

pexcel · 08.09.2010

AW: Link zu Hotspot

Hallo fexx,

die Gartennummer in der Tabelle soll der Link sein.
Den Hotspot zum Garten 131 habe ich hier mal händisch rot gefärbt...

ProfPe · 08.09.2010

AW: Link zu Hotspot

Area-Shapes unterstützen leider keine Rahmen. Also wäre vermutlich das einfachste das komplette Bild in verschiedenen Versionen zu machen wo die Shapes farbig sind, bzw. die einzelnen Shapebereiche als Farbige element zu erstellen und die dann an den richtigen Stellen darzustellen. Wenn du willst dass man in ner liste auf ein element geht und das dann auf der karte zu sehen ist ist JavaScript wohl am ehesten dazu in der Lage.
Irgend n nettes AJAX-Framework oder so...

Da ich jetz grad feierabend machen will nich so ganz Zeit mir Gedanken u machen. Fortschritte würden mich aber interessieren

sokie · 08.09.2010

AW: Link zu Hotspot

wenn du nicht allzuviele freie gärten in deiner liste hast, könnte das mit dem dem austauschen der Bilder shon eine gute sein.
Vielleicht genügt es auch, dass beim hover des eintrags in der Tabelle einfach nur ein Punkt(quatrat etc) in die entsprechende Parzelle gesetzt wird?

fexx · 08.09.2010

AW: Link zu Hotspot

jQuery maphilight documentation
jQuery maphilight documentation

bringt dich das weiter?

//Edit: oder das hier: http://designreviver.com/tutorials/css-image-map-techniques-and-tutorials/?

pexcel · 08.09.2010

AW: Link zu Hotspot

@sokie:

Im Prinzip würde das reichen, auch ein Pffeil oder Fähnchen etc... Sollte halt für den User sofort erkennbar sein, wo sich der Garten in der Anlage befindet.

Problem mit dem Bilderaustausch:
Das Ganze befindet sich in einer Joomla-Installation. Hier haben mehrere User die Berechtigung, im Frontend freie Gärten in die Tabelle einzutragen. Ich benötige deshalb einen gewissen Automatismus...

@fexx:
Werde ich mir mal zu Gemüte führen, danke!

fexx · 08.09.2010

AW: Link zu Hotspot

mich würde auf jedenfall deine lösung bzw. deine weiteren schritte interessieren

pexcel · 09.09.2010

AW: Link zu Hotspot

Hallo zusammen,

habe mal etwas rumexperimentiert und eine Lösung gefunden:

Auf Mouseover zur Anzeige der Hotspot habe ich verzichtet, da ich Karte und Links nicht sinnvoll auf einer Seite darstellen kann (Karte zu groß).

Was mich nun noch stört ist, dass ein aktivierter Hotspot nur durch erneuten Klick auf den entsprechenden Link deaktiviert werden kann.
Kann mir jemand einen Tipp geben, wie ich es erreiche, dass markierte Hotspots deaktiviert werden, wenn ein anderer Hotspot aktiviert wird?

Oder sollte ich da besser in einem Javascript-Forum anfragen?

Vielen Dank und beste Grüße
pexcel

sokie · 09.09.2010

AW: Link zu Hotspot

du kannst dir die sache mit den jQuery Methoden sehr leicht machen und zudem eine menge markup sparen (die ganzen onclick-handler im code).
eine Möglichkeit wäre, den a-elementen ein rel attribut mit der GartenNummer zu geben:

HTML:

  <p>Freie Gärten:
  <a href="#" rel="53">53</a>,                     
  <a href="#" rel="54">54</a>
</p>

und im jQueryaufruf:

HTML:

<script type="text/javascript">
  $(document).ready(function(){
    $('.map').maphilight();
    $('a').click(function(e){
      e.preventDefault();
      gartenNr = $(this).attr("rel");
      $("area").trigger("mouseout"); //alle areas mouseout = hilihght weg
      $("area#" + gartenNr).trigger("mouseover"); //das geklickte Gartenstück = hilight
    });
  });
</script>

pexcel · 09.09.2010

AW: Link zu Hotspot

Hey, das funzt ja super, Tausend Dank sokie!!!
Hab es gleich mal eingebaut:
Das mit den verkürzten Links kommt mir doppelt zu Gute, da die Eingabe der freien Gärten über das Frontend erfolgen soll (Nutzung der Event Table Edit-Komponente in Joomla). Da habe ich noch etwas Arbeit vor mir, da die Eingabe in die Zelle über ein Popup erfolgt, welches aber keine Linkeingabe erlaubt. Da brauche ich noch irgend eine replace-Funktion, gehört aber wohl nicht hier her...

Trotzdem noch eine Frage:
Im Moment kann man in der Imagemap die Gärten auch direkt anklicken und der jeweilige Hotspot bleibt dann auch markiert. Kann man das direkte Anklicken der Gärten verhindern (bzw. dass diese dann markiert bleiben)?

Viele Grüße

pexcel · 13.09.2010

AW: Link zu Hotspot

@sokie

Hallo sokie,

grad stellt sich noch ein anderes Problem dar:

Alle anderen Links auf der Webseite funktionieren jetzt nicht mehr.
Habe dieses Beispiel in eine Webseite eingebaut, jetzt gehen da auch die Menülinks nicht mehr.

Ich denke, dass ich bei den Garten-Links wohl mit einer id arbeiten müsste, also z.B. so:

<a id="garten" href="#" rel="53">53</a>

Kannst Du mir sagen, wie ich dann den Code in der Funktion anpassen muss?
Das hier funzt nicht:

Code:

<script type="text/javascript">
  $(document).ready(function(){
    $('.map').maphilight();
    $('#garten').click(function(e){
      e.preventDefault();
      gartenNr = $(this).attr("rel");
      $("area").trigger("mouseout"); //alle areas mouseout = hilihght weg
      $("area#" + gartenNr).trigger("mouseover"); //das geklickte Gartenst?ck = hilight
    });
  });
</script>

Viele Grüße
pexcel

fexx · 13.09.2010

AW: Link zu Hotspot

muss das nicht als variable deviniert sein?

Code:

gartenNr = $(this).attr("rel");

var gartenNr = $(this).attr("rel");

auserdem solltest du für die links nicht eine id verwenden sondern klassen, weil ids dürfen nur einmal vergeben werden ... du wirst aber mehrere links haben, welche das highlight aktivieren sollen?!

Doitsu · 13.09.2010

AW: Link zu Hotspot

Einfach die Zeile $('a').click(function(e){ so aendern: $('a.garten').click(function(e){
und das ganze so dann aufrufen
<a class="garten" href="#" rel="53">53</a>,
<a class="garten" href="#" rel="54">54</a>
@ vorposter: Nein, weil das .click-Event auf alle Links angewendet wird, ob mit oder ohne rel..

sokie · 13.09.2010

AW: Link zu Hotspot

natürlich musst du die links abgrenzen, die die interaktion mit der imagemap haben.
wenn es um Links (mehrzahl) geht kannst du allerdings nicht id an den links arbeiten, weil IDs eindeutige identifikatorn sind, und nicht mehrfach vorkommen dürfen.
hier hast du allerdings eine bessere Möglichkeit:

HTML:

<p id="freieG">Freie Gärten:   
  <a href="#" rel="53">53</a>, 
  <a href="#" rel="54">54</a> 
</p>

wobei der selektor dann $("#freieG a") wäre.

pexcel · 13.09.2010

AW: Link zu Hotspot

Ihr seid die Größten!!!

Vielen Dank, jetzt läuft das ohne Probleme!

Grüße aus Leipzig
pexcel

pexcel · 14.09.2010

AW: Link zu Hotspot

naja, es läuft fast ohne Probleme...

Nach wie vor besteht das Problem, dass nach Auswahl einer Gartennummer die Markierung des Gartens verschwindet, wenn man mit der Maus über das Bild läuft.
Ist besonders dann ungünstig, wenn der markierte Garten weiter unten in der Grafik ist. Scrollt man dann z.B. mit dem Mausrad nach unten und kommt mit dem Mauszeiger auf einen anderen Garten, verschwindet die Markierung.

Beispiel:

Könnt ihr mir bei dieser Problematik noch mal helfen?
Im Grunde brauche ich eine Markierung bei Mouseover ja nicht, da die Gärten nur über die Links markiert werden sollen.

Viele Grüße
pexcel

sokie · 14.09.2010

AW: Link zu Hotspot

hallo pexel,
eigentlich ist die Karte so klein, dass man das Problem mit dem scrollen auch durch geschicktere positionionierung der Bereiche umgehen könnte - wenn man zB karte und auswahllinks nebeneinander anordnen würde.
ansonsten bleibt die möglichkeit, beim betreten und verlassen eines beliebigen areas, das mouseover event für die aktuelle Gartennummer triggert. das ist aber mehr zirkelei als die einfache sinnvollere Anordnung.

Doitsu · 14.09.2010

AW: Link zu Hotspot

.. kann man nicht irgendwie das 'mouseclick' benutzten? (Zeile 277 in maphilight.js). Ich hatte jetzt versucht das Event beim .click zu triggern - habe es aber nicht hin bekommen.. aber an sich sollte das doch moeglich sein? Und waere auch genau das, was wohl gewollt ist..

pexcel · 14.09.2010

AW: Link zu Hotspot

@Doitsu
Hatte ich auch schon probiert, aber mit ebenso wenig Erfolg...

@sokie
Die Anordnung kann ich kaum ändern, da ich für die Gartenlinks eine Tabelle nutze (event table edit-modul in joomla).
Sinn der Tabelle ist, dass eine registrierte Benutzergruppe die Tabelle im Frontend editieren kann. Die Links zu den Hotspots werden nach Eingabe der Gartennummer automatisch generiert.

Ich habe das Ganze jetzt erst mal so gelöst, dass ich eine transparente Grafik über die Karte gelegt habe. Ist vielleicht nicht die eleganteste Variante, erfüllt aber erst mal seinen Zweck...

Hier die Seite im Joomla-CMS:

Trotzdem wäre ich an einer anderen Lösung interessiert und werde es auch selbst weiter probieren.

Viele Grüße
pexcel