imagemapping:start

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung		 Vorhergehende Überarbeitung
imagemapping:start [2023/03/25 09:14] – kthoeneimagemapping:start [2023/04/05 20:34] (aktuell) – kthoene
Zeile 1: Zeile 1:
 ====== Image Map Plugin With Marker ====== ====== Image Map Plugin With Marker ======
  
-====== Map with Internal Marker ======+===== About =====
  
-{{map>imagemapping:vintage_world_map_-_600x.jpg|Vintage World Map}} +**Documentation and Code**: [[https://github.com/kgitthoene/dokuwiki-plugin-imapmarkers|github.com/kgitthoene/dokuwiki-plugin-imapmarkers]].
-[[https://en.wikipedia.org/wiki/Asia|CON1 Asia @ 434,106,30]] +
-[[https://en.wikipedia.org/wiki/Africa|CON2 Africa @ 308,176,30]] +
-[[https://en.wikipedia.org/wiki/North_America|CON3 North America @ 112,116,30]] +
-[[https://en.wikipedia.org/wiki/South_America|CON4 South America @ 186,218,30]] +
-[[https://en.wikipedia.org/wiki/Antarctica|CON5 Antarctica @ 291,334,30]] +
-[[https://en.wikipedia.org/wiki/Europe|CON6 Europe @ 327,111,30]] +
-[[https://en.wikipedia.org/wiki/Australia|CON7 Australia @ 484,242,30]] +
-{{<map}}+
  
-<wrap imaploc #CON1>Asia</wrap> | +====== Map with Internal Marker ====== 
-<wrap imaploc #CON2>Africa</wrap> | + 
-<wrap imaploc #CON3>North America</wrap> | +{{imapmarkers>imagemapping:1744_bowen_map_of_the_world_in_hemispheres_-_geographicus_-_world-bowen-1744_-_600x.jpg|Bowen Map of the World, 1744}} 
-<wrap imaploc #CON4>South America</wrap> | +[[https://en.wikipedia.org/wiki/Asia|CON1|Asia @ 456,116,30]] 
-<wrap imaploc #CON5>Antarctica</wrap> | +[[https://en.wikipedia.org/wiki/Africa|CON2|Africa @ 358,167,30]] 
-<wrap imaploc #CON6>Europe</wrap> | +[[https://en.wikipedia.org/wiki/North_America|CON3|North America @ 166,134,30]] 
-<wrap imaploc #CON7>Australia</wrap> | +[[https://en.wikipedia.org/wiki/South_America|CON4|South America @ 222,210,30]] 
-<wrap hi>**<- CLICK HERE!**</wrap> +[[https://en.wikipedia.org/wiki/Antarctica|CON5|Antarctica @ 152,324,30]] 
-<wrap imapcfg #CON1>+[[https://en.wikipedia.org/wiki/Europe|CON6|Europe @ 381,110,30]] 
 +[[wp>Australia|CON7|Australia @ 510,232,30]] 
 +[[wp>Australia|Australia II @ 510,232,60]] 
 +[[|Australia III @ 510,232,90]] 
 +{{cfg>}}
   {   {
     "marker-color": "red",     "marker-color": "red",
-    "marker-width": 21, +    "clicked-reference-css": { "font-weight": "bold", "color": "red" }, 
-    "marker-height": 32, +    "area-fillColor": "ff0000", 
-    "clicked_reference_css": { "font-weight": "bold", "color": "red" }+    "area-fillOpacity": 0.2
   }   }
-</wrap>+{{<cfg}} 
 +{{<imapmarkers}}
  
-====== Map with Media-Link Marker ======+{{imapmloc>CON1|Asia}} | 
 +{{imapmloc>CON2|Africa}} | 
 +{{imapmloc>CON3|North America}} | 
 +{{imapmloc>CON4|South America}} | 
 +{{imapmloc>CON5|Antarctica}} | 
 +{{imapmloc>CON6|Europe}} | 
 +{{imapmloc>CON7|Australia}} 
 +<wrap hi>**<- CLICK HERE!**</wrap>
  
-{{map>imagemapping:part_of_central_park.png|Part of Central Park}} +++ Continents |\\ {{imapmloc>CON1|Asia}}\\ {{imapmloc>CON2|Africa}} \\ {{imapmloc>CON3|North America}} \\ {{imapmloc>CON4|South America}} \\ {{imapmloc>CON5|Antarctica}} \\ {{imapmloc>CON6|Europe}} \\ {{imapmloc>CON7|Australia}} \\ ++
-[[imagemapping:start|CP001 Seneca Village @ 329,132,30]] +
-[[imagemapping:start|CP002 Arthur Ross Pinetum @ 490,222,30]] +
-[[imagemapping:start|CP003 Diana Ross Playground @ 99,364,30]] +
-[[imagemapping:start|CP004 Summit Rock @ 152,247,213,283]] +
-{{<map}}+
  
-<wrap imaploc #CP002>Arthur Ross Pinetum</wrap> | +====== Map with Media-Link Marker ====== 
-<wrap imaploc #CP003>Diana Ross Playground</wrap> | + 
-<wrap imaploc #CP001>Seneca Village</wrap> | +{{imapmarkers>imagemapping:part_of_central_park.png|Part of Central Park}} 
-<wrap imaploc #CP004>Summit Rock</wrap> +[[imapmarkers:start|CP001| Seneca Village @ 329,132,30]] 
-<wrap hi>**<- CLICK HERE!**</wrap> +[[imapmarkers:start|CP002| Arthur Ross Pinetum @ 490,222,30]] 
-<wrap imapcfg #CP001>+[[imapmarkers:start|CP003| Diana Ross Playground @ 99,364,30]] 
 +[[imapmarkers:start|CP004| Summit Rock @ 152,247,213,283]] 
 +{{cfg>}}
   {   {
     "marker": "imagemapping:marker.002.png",     "marker": "imagemapping:marker.002.png",
Zeile 50: Zeile 51:
     "marker-height": 32     "marker-height": 32
   }   }
-</wrap>+{{<cfg}} 
 +{{<imapmarkers}} 
 + 
 +{{imapmloc>CP002| Arthur Ross Pinetum }} | 
 +{{imapmloc>CP003| Diana Ross Playground }} | 
 +{{imapmloc>CP001| Seneca Village }} | 
 +{{imapmloc>CP004| Summit Rock }} 
 +<wrap hi>**<- CLICK HERE!**</wrap>
  
 ====== Map with External URL Marker ====== ====== Map with External URL Marker ======
  
-{{map>imagemapping:tompkins_square_park.png|Tompkins Square Park}} +{{imapmarkers>imagemapping:tompkins_square_park.png|Tompkins Square Park}} 
-[[imagemapping:start|TS01 Tompkins Square Pool @ 357,180,15]] +[[imapmarkers:start|TS01| Tompkins Square Pool @ 357,180,15]] 
-[[imagemapping:start|TS02 Pets Playground @ 311,206,365,232,348,256,301,222]] +[[imapmarkers:start|TS02| Pets Playground @ 311,206,365,232,348,256,301,222]] 
-{{<map}} +{{cfg>}}
- +
-<wrap imaploc #TS01>Tompkins Square Pool</wrap> | +
-<wrap imaploc #TS02>Pets Playground</wrap> +
-<wrap hi>**<- CLICK HERE!**</wrap> +
-<wrap imapcfg #TS01>+
   {   {
     "marker": "https://upload.wikimedia.org/wikipedia/commons/f/f2/678111-map-marker-512.png",     "marker": "https://upload.wikimedia.org/wikipedia/commons/f/f2/678111-map-marker-512.png",
Zeile 68: Zeile 71:
     "marker-height": 32     "marker-height": 32
   }   }
-</wrap>+{{<cfg}} 
 +{{<imapmarkers}}
  
-===== About =====+{{imapmloc>TS01| Tompkins Square Pool }} | 
 +{{imapmloc>TS02| Pets Playground }} 
 +<wrap hi>**<- CLICK HERE!**</wrap>
  
-If you change the original script.js in the plug-in **[[https://github.com/i-net-software/dokuwiki-plugin-imagemap/|dokuwiki-plugin-imagemap]]**, you can add clickable markers on images. 
-This may be very useful for maps. 
  
-A word to the author of [[https://github.com/i-net-software/dokuwiki-plugin-imagemap/|dokuwiki-plugin-imagemap]], Gerry Weißbach: Feel free to merge this code with your project. Other parts of your software are unchanged. I repaired the window.resize handler, in case your viewport grows. 
- 
-Used plug-in: **[[https://www.dokuwiki.org/plugin:wrap|wrap]]** 
- 
-===== How to use? ===== 
- 
-Add to the mappings (areas) an unique identifier. 
-Unique in the sense, that only their lower case form are used. 
-This is the **first word** in the title of the mapping. 
- 
-E.g. ''%%[[imagemapping:start|CP01 Seneca Village @ 329,132,30]]%%'' 
-The identifier is: ''%%CP01%%'' or technically: ''%%cp01%%''. 
-The coordinates (here) ''%%329,132%%'' are from the original image. 
- 
-You now may add spans (references) with the CSS-class ''%%wrap_imaploc%%'' and with the ID set to the identifier. 
-I've used the plug-in **[[https://www.dokuwiki.org/plugin:wrap|wrap]]** to perform this. 
- 
-Reference wiki code (with wrap): ''%%<wrap imaploc #CP01>Seneca Village</wrap>%%'' / Resulting HTML-Code: ''%%<span class="wrap_imaploc" id="cp01">Seneca Village</span>%%'' 
- 
-You may use multiple references for the same identifyer. 
-You can place references at anyplace in the page. 
-There is no rule to place them right behind the image mapping.  
- 
-In case you click the reference, a marker is shown at the given point. 
-Works with all three forms of mapping: circle, rectangle and polygon. 
 ===== This Page Source ===== ===== This Page Source =====
 <code> <code>
-====== Image Map Plugin With Marker ======+====== Map with Internal Marker ======
  
-{{map>imagemapping:part_of_central_park.png|Part of Central Park}} +{{imapmarkers>imagemapping:1744_bowen_map_of_the_world_in_hemispheres_-_geographicus_-_world-bowen-1744_-_600x.jpg|Bowen Map of the World, 1744}} 
-[[imagemapping:start|CP01 Seneca Village @ 329,132,30]] +[[https://en.wikipedia.org/wiki/Asia|CON1|Asia @ 456,116,30]] 
-[[imagemapping:start|CP02 Arthur Ross Pinetum @ 490,222,30]] +[[https://en.wikipedia.org/wiki/Africa|CON2|Africa @ 358,167,30]] 
-[[imagemapping:start|CP03 Diana Ross Playground @ 99,364,30]] +[[https://en.wikipedia.org/wiki/North_America|CON3|North America @ 166,134,30]] 
-[[imagemapping:start|CP04 Summit Rock @ 152,247,213,283]] +[[https://en.wikipedia.org/wiki/South_America|CON4|South America @ 222,210,30]] 
-{{<map}}+[[https://en.wikipedia.org/wiki/Antarctica|CON5|Antarctica @ 152,324,30]] 
 +[[https://en.wikipedia.org/wiki/Europe|CON6|Europe @ 381,110,30]] 
 +[[wp>Australia|CON7|Australia @ 510,232,30]] 
 +[[wp>Australia|Australia II @ 510,232,60]] 
 +[[|Australia III @ 510,232,90]] 
 +{{cfg>}} 
 +  { 
 +    "marker-color": "red", 
 +    "clicked-reference-css": { "font-weight": "bold", "color": "red" }, 
 +    "area-fillColor": "ff0000", 
 +    "area-fillOpacity": 0.2 
 +  } 
 +{{<cfg}} 
 +{{<imapmarkers}}
  
-<wrap imaploc #CP02>Arthur Ross Pinetum</wrap> | +{{imapmloc>CON1|Asia}} | 
-<wrap imaploc #CP03>Diana Ross Playground</wrap> | +{{imapmloc>CON2|Africa}} | 
-<wrap imaploc #CP01>Seneca Village</wrap> | +{{imapmloc>CON3|North America}} | 
-<wrap imaploc #CP04>Summit Rock</wrap>+{{imapmloc>CON4|South America}} | 
 +{{imapmloc>CON5|Antarctica}} | 
 +{{imapmloc>CON6|Europe}} | 
 +{{imapmloc>CON7|Australia}}
 <wrap hi>**<- CLICK HERE!**</wrap> <wrap hi>**<- CLICK HERE!**</wrap>
  
-{{map>imagemapping:tompkins_square_park.png|Tompkins Square Park}} +++ Continents |\\ {{imapmloc>CON1|Asia}}\\ {{imapmloc>CON2|Africa}} \\ {{imapmloc>CON3|North America}} \\ {{imapmloc>CON4|South America}} \\ {{imapmloc>CON5|Antarctica}} \\ {{imapmloc>CON6|Europe}} \\ {{imapmloc>CON7|Australia}} \\ ++
-[[imagemapping:start|TS01 Tompkins Square Pool @ 357,180,15]] +
-[[imagemapping:start|TS02 Pets Playground @ 311,206,365,232,348,256,301,222]] +
-{{<map}}+
  
-<wrap imaploc #TS01>Tompkins Square Pool</wrap> | +====== Map with Media-Link Marker ======
-<wrap imaploc #TS02>Pets Playground</wrap> +
-<wrap hi>**<- CLICK HERE!**</wrap> +
-</code>+
  
-===== Javascript Replacement Source (aka. the Plug-Ins „script.js“) =====+{{imapmarkers>imagemapping:part_of_central_park.png|Part of Central Park}} 
 +[[imapmarkers:start|CP001| Seneca Village @ 329,132,30]] 
 +[[imapmarkers:start|CP002| Arthur Ross Pinetum @ 490,222,30]] 
 +[[imapmarkers:start|CP003| Diana Ross Playground @ 99,364,30]] 
 +[[imapmarkers:start|CP004| Summit Rock @ 152,247,213,283]] 
 +{{cfg>}} 
 +  { 
 +    "marker": "imagemapping:marker.002.png", 
 +    "marker-width": 20, 
 +    "marker-height": 32 
 +  } 
 +{{<cfg}} 
 +{{<imapmarkers}}
  
-<file javascript script.js> +{{imapmloc>CP002| Arthur Ross Pinetum }} | 
-/* DOKUWIKI:include_once jquery.imagemapster.js */+{{imapmloc>CP003| Diana Ross Playground }} | 
 +{{imapmloc>CP001| Seneca Village }} | 
 +{{imapmloc>CP004| Summit Rock }} 
 +<wrap hi>**<- CLICK HERE!**</wrap>
  
 +====== Map with External URL Marker ======
  
-// Original source code: https://github.com/i-net-software/dokuwiki-plugin-imagemap +{{imapmarkers>imagemapping:tompkins_square_park.png|Tompkins Square Park}} 
-globalThis[Symbol.for('imap_lib')] = (function () { +[[imapmarkers:start|TS01| Tompkins Square Pool @ 357,180,15]] 
-  var defaults = { +[[imapmarkers:start|TS02| Pets Playground @ 311,206,365,232,348,256,301,222]] 
-      'clicked_reference_color': "#00AEEF", +{{cfg>}} 
-      'marker_color': "#00AEEF", +  { 
-      'debug': false  // false = no debug on console +    "marker": "https://upload.wikimedia.org/wikipedia/commons/f/f2/678111-map-marker-512.png", 
-    }; +    "marker-width": 32, 
-  var a_maps = []; +    "marker-height": 32
-  var a_areas = []; +
-  var a_references = []; +
-  var resize_timeout = null; +
-  var a_last_clicked_id = []; +
-  var a_imap_div = []; +
-  var imap_div_interval = null; +
-  var nr_startup_intervals = 0; +
-   +
-  function make_svg_and_append_to_jquery_object(html, object) { +
-    object[0].insertAdjacentHTML( +
-      "beforeEnd", +
-      html +
-    ); +
-  }  // function make_svg_and_append_to_jquery_object +
- +
-  function calc_marker_pos(coords) { +
-    let split_coords = coords.split(","); +
-    var x = 0; +
-    var y = 0; +
-    switch(split_coords.length) { +
-      case 3:  // circle +
-        x = parseInt(split_coords[0]); +
-        y = parseInt(split_coords[1]); +
-        break; +
-      case 4:  // rectangle +
-        x = Math.floor((parseInt(split_coords[0])+parseInt(split_coords[2]))/2); +
-        y = Math.floor((parseInt(split_coords[1])+parseInt(split_coords[3]))/2); +
-        break; +
-      default: +
-        if(split_coords.length >= 6) { +
-          var num_coords = 0; +
-          for(var i = 0; i < (split_coords.length - 1); i += 2) { +
-            x += parseInt(split_coords[i]); +
-            y += parseInt(split_coords[i + 1]); +
-            num_coords++; +
-          } +
-          x = Math.floor(x / num_coords); +
-          y = Math.floor(y / num_coords);; +
-        } +
-    } +
-    return [ x, y ]; +
-  }  // function calc_marker_pos +
-   +
-  function get_id_from_string(s) { +
-    const a_ids = s.split(" "); +
-    if (a_ids.length >= 1) { +
-      if (a_ids[0].length > 0) { +
-        return "#"+String(a_ids[0]).toLowerCase(); +
-      } +
-    } +
-    return null;+
   }   }
 +{{<cfg}}
 +{{<imapmarkers}}
  
-  function find_area_by_id(id, imap_index = null) { +{{imapmloc>TS01| Tompkins Square Pool }} | 
-    try { +{{imapmloc>TS02| Pets Playground }} 
-      if (imap_index === null) { +<wrap hi>**<- CLICK HERE!**</wrap> 
-        for(var i = 0; i < a_areas.length; i++) { +</code>
-          if (a_areas[i] !== undefined) { +
-            for(var j = 0; j < a_areas[i].length; j++) { +
-              const area = a_areas[i][j]; +
-              if (area['id'] == id) { +
-                return [ i, area['area'], j ]; +
-              } +
-            } +
-          } +
-        } +
-      } else { +
-        if (a_areas[imap_index] !== undefined) { +
-          for(var j = 0; j < a_areas[imap_index].length; j++) { +
-            const area = a_areas[imap_index][j]; +
-            if (area['id'] == id) { +
-              return [ imap_index, area['area'], j ]; +
-            } +
-          } +
-        } +
-      } +
-    } catch(e) { console.error("EXCEPTION="+e); } +
-    return [ -1, null, -1 ]; +
-  }  // function find_area_by_id +
-   +
-  return { +
-    // exported variables: +
-    defaults: defaults, +
-    a_maps: a_maps, +
-    a_areas: a_areas, +
-    a_references: a_references, +
-    resize_timeout: resize_timeout, +
-    a_last_clicked_id: a_last_clicked_id, +
-    a_imap_div: a_imap_div, +
-    imap_div_interval: imap_div_interval, +
-    nr_startup_intervals: nr_startup_intervals, +
-    // exported functions: +
-    make_svg_and_append_to_jquery_object: make_svg_and_append_to_jquery_object, +
-    calc_marker_pos: calc_marker_pos, +
-    get_id_from_string: get_id_from_string, +
-    find_area_by_id: find_area_by_id +
-  }; +
-})(); +
- +
- +
-addEventListener("DOMContentLoaded", (event) => { +
-  (function($) { +
-    var _g = globalThis[Symbol.for('imap_lib')]; +
-     +
-    $('img[usemap]').mapster({ +
-      fillColor: 'ffffff', +
-      fillOpacity: 0.3, +
-      wrapClass: true, +
-      wrapCss: true, +
-      clickNavigate: true +
-    }); +
-     +
-    function get_marker_width_and_height(id) { +
-      return [ $(id).width(), $(id).height() ]; +
-    }  // function get_marker_width_and_height +
-     +
-    function do_marker_if_resize() { +
-      _g.a_imap_div.forEach((object, index) => { +
-        let marker_id_jquery = "#imap-marker-"+index; +
-        if(_g.defaults['debug']) { console.log("RESIZE::["+index+"] LCID="+_g.a_last_clicked_id[index]); } +
-        if((_g.a_last_clicked_id[index] !== undefined) && (_g.a_last_clicked_id[index]['id'] !== undefined) && $(marker_id_jquery).is(":visible")) { +
-          let id = _g.a_last_clicked_id[index]['id']; +
-          let area_index = _g.a_last_clicked_id[index]['area_index']; +
-          if(_g.defaults['debug']) { console.log("RESIZE::["+index+"] AREA-INDEX="+area_index); } +
-          try { +
-            let found_area = _g.a_areas[index][area_index]['area']; +
-            let marker_id_jquery = "#imap-marker-"+index; +
-            let coords = found_area.attr("coords"); +
-            let xy = _g.calc_marker_pos(coords); +
-            let wh = get_marker_width_and_height(marker_id_jquery); +
-            $(marker_id_jquery).css({ top: xy[1] - wh[1] + 3, left: xy[0] - (wh[0] / 2) }); +
-          } catch(e) { console.error("EXCEPTION="+e); } +
-        } +
-      }); +
-    }  // do_marker_if_resize +
- +
-    $(window).resize(function() { +
-      if (_g.resize_timeout != null) { clearTimeout(_g.resize_timeout); } +
-      _g.resize_timeout = setTimeout(function() { +
-        $('img[usemap]').each(function() { +
-          let parent = $(this.offsetParent); +
-          let parentparent = $(parent).parent(); +
-          //if (_g.defaults['debug']) {  +
-          //  console.log("PARENTPARENT TAG="+parentparent.prop("tagName")+" ID="+parentparent.attr("id")); +
-          //  console.log("PARENT TAG="+parent.prop("tagName")+" ID="+parent.attr("id")); +
-          //  console.log("THIS TAG="+$(this).prop("tagName")+" ID="+$(this).attr("id")); +
-          //} +
-          // limit image width to naturalWidth: +
-          $(this).mapster('resize', ($(this)[0].naturalWidth < parentparent.width()) ? $(this)[0].naturalWidth : parentparent.width()); +
-        }); +
-        do_marker_if_resize(); +
-      }, 100); +
-    }); +
-     +
-    _g.imap_div_interval = setInterval(function() { +
-      if(_g.defaults['debug']) { console.log("START IMAGEMAPPING MARKER"); } +
-      _g.nr_startup_intervals++; +
-      if (_g.nr_startup_intervals >= 50) { +
-        // stop after 5 s searching: +
-        clearInterval(_g.imap_div_interval); +
-        if(_g.defaults['debug']) { console.log("GIVE UP IMAGEMAPPING SEARCH"); } +
-        return; +
-      } +
-      // find container and maps: +
-      var imap_index = 0; +
-      $(".imap, map").each(function(index, object) { +
-        let tag = $(this).prop("tagName").toLowerCase(); +
-        if ((tag == "div") && ($(this).hasClass("imap"))) { +
-          if(_g.defaults['debug']) { console.log("["+imap_index+"] THIS TAG="+$(this).prop("tagName")+" ID="+$(this).attr("id")); } +
-          _g.a_imap_div[imap_index] = $(this); +
-        } else { +
-          if ((tag == "map") && (_g.a_imap_div[imap_index] !== undefined) && (_g.a_maps[imap_index] === undefined)) { +
-            _g.a_maps[imap_index] = $(this); +
-            if(_g.defaults['debug']) { console.log("["+imap_index+"] THIS TAG="+$(this).prop("tagName")+" ID="+$(this).attr("id")+" NAME="+$(this).attr("name")); } +
-            imap_index++; +
-          } +
-        } +
-      }); +
-      if ((_g.a_imap_div[0] !== undefined) && (_g.a_imap_div[0] !== null)) { +
-        // clear search interval: +
-        clearInterval(_g.imap_div_interval); +
-        _g.a_imap_div.forEach((object, index) => { +
-          // set z-index for images: +
-          if(_g.defaults['debug']) { console.log("["+index+"] Z-INDEX THIS TAG="+object.prop("tagName")+" ID="+object.attr("id")+" NAME="+object.attr("name")); } +
-          object.find("img").css("z-index", "0"); +
-          // create marker: +
-          let marker_id = "imap-marker-"+index; +
-          let svg_marker = '<svg version="1.1" id="'+marker_id+'" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 365 560" enable-background="new 0 0 365 560" xml:space="preserve"> ' + +
-            '<g> ' + +
-            '  <path class="svg-marker-path" fill="#00AEEF" d="M182.9,551.7c0,0.1,0.2,0.3,0.2,0.3S358.3,283,358.3,194.6c0-130.1-88.8-186.7-175.4-186.9 ' + +
-            '    C96.3,7.9,7.5,64.5,7.5,194.6c0,88.4,175.3,357.4,175.3,357.4S182.9,551.7,182.9,551.7z M122.2,187.2c0-33.6,27.2-60.8,60.8-60.8 ' + +
-            '    c33.6,0,60.8,27.2,60.8,60.8S216.5,248,182.9,248C149.4,248,122.2,220.8,122.2,187.2z"/> ' + +
-            '</g> ' + +
-            '</svg>'; +
-          _g.make_svg_and_append_to_jquery_object(svg_marker, object); +
-          let marker_id_jquery = "#"+marker_id; +
-          $(marker_id_jquery).css("position", "absolute"); +
-          $(marker_id_jquery).css("z-index", 1000); +
-          $(marker_id_jquery).css("width", 21); +
-          $(marker_id_jquery).css("height", 32); +
-          $(marker_id_jquery).css("top", -32); +
-          $(marker_id_jquery).css("left", -32); +
-          $(".svg-marker-path", $(marker_id_jquery)).attr("style", "fill:"+_g.defaults['marker_color']); +
-          $(marker_id_jquery).hide(); +
-          if(_g.defaults['debug']) { console.log("["+index+"] ADD MARKER ID='"+marker_id+"'"); } +
-          // collect areas: +
-          if (_g.a_maps[index] !== undefined) { +
-            _g.a_maps[index].find("area").each(function(area_index, object) { +
-              if (_g.a_areas[index] === undefined) { +
-                _g.a_areas[index] = []; +
-              } +
-              const area_id = _g.get_id_from_string($(this).attr("title")); +
-              _g.a_areas[index].push({ 'id': area_id, 'area': $(this) }); +
-              if(_g.defaults['debug']) { console.log("["+index+"] ADD AREA #"+area_index+" ID='"+area_id+"'"); } +
-            }); +
-          } +
-        }); +
-        // search for references: +
-        $(".wrap_imaploc").each(function(index, object) { +
-          try { +
-            var id = ""; +
-            if ($(this).attr("id").length > 0) { +
-              id = "#"+$(this).attr("id").toLowerCase(); +
-            } else { +
-              const html = $(this).html(); +
-              const a_ids = html.split(" "); +
-              id = "#"+String(a_ids[0]).toLowerCase(); +
-            } +
-            if (id.length > 0) { +
-              if(_g.defaults['debug']) { console.log("FOUND WRAP-IMAPLOC ID='"+id+"'"); } +
-              // find corresponding area +
-              let ia = _g.find_area_by_id(id); +
-              let imap_index = ia[0]; +
-              let found_area = ia[1]; +
-              let area_index = ia[2]; +
-              if (found_area != null) { +
-                if ($(id).length) { +
-                  if (_g.a_references[imap_index] === undefined) { +
-                    _g.a_references[imap_index] = []; +
-                  } +
-                  _g.a_references[imap_index].push({ 'id': id, 'imap_index': imap_index, 'area_index': area_index, 'reference': $(this) }); +
-                  if(_g.defaults['debug']) { console.log("FOUND AREA FOR WRAP-IMAPLOC ID='"+id+"' AREA IMAP-INDEX="+imap_index+" AREA-INDEX="+area_index); } +
-                  $(this).bind("click", { 'area': found_area, 'id': id, 'imap_index': imap_index, 'area_index': area_index }, function(e) { +
-                    var data = e.data; +
-                    let imap_index = data['imap_index']; +
-                    let marker_id_jquery = "#imap-marker-"+imap_index; +
-                    let area_index = data['area_index']; +
-                    let id = data['id']; +
-                    if(_g.defaults['debug']) { console.log("CLICK ID='"+id+"' AREA IMAP-INDEX="+imap_index+" AREA-INDEX="+area_index); } +
-                    if ((_g.a_last_clicked_id[imap_index] !== undefined) && (_g.a_last_clicked_id[imap_index]['id'] == data['id']) && $(marker_id_jquery).is(":visible")) { +
-                      // hide marker +
-                      $(marker_id_jquery).hide(); +
-                      _g.a_references[imap_index].forEach((object, index) => { +
-                        if (object['id'] == id) { +
-                          object['reference'].css('font-weight', 'normal'); +
-                          object['reference'].css('color', ''); +
-                        } +
-                      }); +
-                      $(this).css('font-weight', 'normal'); +
-                      $(this).css('color', ''); +
-                    } else { +
-                      // show marker +
-                      let coords = data['area'].attr("coords"); +
-                      let xy = _g.calc_marker_pos(coords); +
-                      let wh = get_marker_width_and_height(marker_id_jquery); +
-                      $(marker_id_jquery).css({ top: xy[1] - wh[1] + 3, left: xy[0] - (wh[0] / 2) }); +
-                      $(marker_id_jquery).show(); +
-                      _g.a_references[imap_index].forEach((object, index) => { +
-                        if (object['id'] == id) { +
-                          object['reference'].css('font-weight', 'bold'); +
-                          object['reference'].css('color', _g.defaults['clicked_reference_color']); +
-                        } else { +
-                          object['reference'].css('font-weight', 'normal'); +
-                          object['reference'].css('color', ''); +
-                        } +
-                      }); +
-                    } +
-                    if(_g.defaults['debug']) { console.log("["+imap_index+"] LAST CLICKED ID='"+data['id']+" MARKER-ID='"+marker_id_jquery+"'"); } +
-                    _g.a_last_clicked_id[imap_index] = { 'imap_index': imap_index, 'area_index': area_index, 'id': data['id'] }; +
-                  }); +
-                  $(this).css('cursor', 'pointer'); +
-                } +
-              } +
-            } +
-          } catch(e) { console.error("EXCEPTION="+e); } +
-        }); +
-      } +
-    }, 100); +
-  })(jQuery);   +
-}); +
- +
-function addBtnActionImagemap(btn, props, edid) { +
-  // Not implemented yet +
-} +
-</file>+
  
  • imagemapping/start.1679735655.txt.gz
  • Zuletzt geändert: 2023/03/25 09:14
  • von kthoene