Inserire Script Jquery in immagine html con zone cliccabili

libero4ever

Nuovo Utente
30 Mar 2015
3
0
0
Salve ragazzi, sto tentando di creare una mappa in html con mappe cliccabili. Sono riuscito a farla ma ora ho trovato uno script jquery che applica uno zoom all'immagine solo che essendo inesperto nel mondo di jquery non riesco a far funzionare lo script con l'immagine.

Come si può applicare lo script nell'immagine html?

Grazie per l'attenzione
 

narc0x

Utente Attivo
10 Ott 2008
128
2
18
Ciao, senza un pezzo di codice di esempio non credo ti posso aiutare piu' di tanto...cosa vorresti sapere di preciso ?
 

libero4ever

Nuovo Utente
30 Mar 2015
3
0
0
Codice:
/*
 *
 * bigpicture.js
 *
 * bigpicture.js is a library that allows infinite panning and infinite zooming in HTML pages.
 *               See it in action on http://www.bigpicture.bi/demo !
 *
 * author:  Joseph Ernest (twitter: @JosephErnest)
 * url:     http://github.com/josephernest/bigpicture.js
 *
 */

var bigpicture = (function() {
  "use strict";

  /*
   * INITIALIZATION
   */

  var bpContainer = document.getElementById('bigpicture-container'),
    bp = document.getElementById('bigpicture');

  if (!bp) { return; }

  bp.setAttribute('spellcheck', false);

  var params = { x: getQueryVariable('x'), y: getQueryVariable('y'), zoom: getQueryVariable('zoom') };

  var current = {};
  current.x = params.x ? parseFloat(params.x) : $(bp).data('x');
  current.y = params.y ? parseFloat(params.y) : $(bp).data('y');
  current.zoom = params.zoom ? parseFloat(params.zoom) : $(bp).data('zoom');

  bp.x = 0; bp.y = 0;
  bp.updateContainerPosition = function() { bp.style.left = bp.x + 'px'; bp.style.top = bp.y + 'px'; };

  /*
   * TEXT BOXES
   */

  $(".text").each(function() { updateTextPosition(this); });     // initialization

  $(bp).on('blur', '.text', function() { if ($(this).text().replace(/^\s+|\s+$/g, '') === '') { $(this).remove(); } });

  $(bp).on('input', '.text', function() { redoSearch = true; });

  function updateTextPosition(e) {
    e.style.fontSize = $(e).data("size") / current.zoom + 'px';
    e.style.left = ($(e).data("x") - current.x) / current.zoom - bp.x + 'px';
    e.style.top = ($(e).data("y") - current.y) / current.zoom - bp.y + 'px';
  }

  function newText(x, y, size, text) {
    var tb = document.createElement('div');
    tb.className = "text";
    tb.contentEditable = true;
    tb.innerHTML = text;
    $(tb).data("x", x).data("y", y).data("size", size);
    updateTextPosition(tb);
    bp.appendChild(tb);
    return tb;
  }

  bpContainer.onclick = function(e) {
    if (isContainedByClass(e.target, 'text')) { return; }
    newText(current.x + (e.clientX) * current.zoom, current.y + (e.clientY) * current.zoom, 20 * current.zoom, '').focus();
  };

  /*
   * PAN AND MOVE
   */

  var movingText = null,
    dragging = false,
    previousMousePosition;

  bpContainer.onmousedown = function(e) {
    if ($(e.target).hasClass('text') && (e.ctrlKey || e.metaKey)) {
      movingText = e.target;
      movingText.className = "text noselect notransition";
    }
    else {
      movingText = null;
      dragging = true;
    }
    biggestPictureSeen = false;
    previousMousePosition = { x: e.pageX, y: e.pageY };
  };

  window.onmouseup = function() {
    dragging = false;
    if (movingText) { movingText.className = "text"; }
    movingText = null;
  };

  bpContainer.ondragstart = function(e) {
    e.preventDefault();
  };

  bpContainer.onmousemove = function(e) {
    if (dragging && !e.shiftKey) {       // SHIFT prevents panning / allows selection
      bp.style.transitionDuration = "0s";
      bp.x += e.pageX - previousMousePosition.x;
      bp.y += e.pageY - previousMousePosition.y;
      bp.updateContainerPosition();
      current.x -= (e.pageX - previousMousePosition.x) * current.zoom;
      current.y -= (e.pageY - previousMousePosition.y) * current.zoom;
      previousMousePosition = { x: e.pageX, y: e.pageY };
    }
    if (movingText) {
      $(movingText).data("x", $(movingText).data("x") + (e.pageX - previousMousePosition.x) * current.zoom);
      $(movingText).data("y", $(movingText).data("y") + (e.pageY - previousMousePosition.y) * current.zoom);
      updateTextPosition(movingText);
      previousMousePosition = { x: e.pageX, y: e.pageY };
    }
  };

  /*
   * ZOOM
   */

  bpContainer.ondblclick = function(e) {
    e.preventDefault();
    onZoom((e.ctrlKey || e.metaKey) ? current.zoom * 1.7 * 1.7 : current.zoom / 1.7 / 1.7, current.x + e.clientX * current.zoom, current.y + e.clientY * current.zoom, e.clientX, e.clientY);
  };

  var biggestPictureSeen = false,
    previous;

  function onZoom(zoom, wx, wy, sx, sy) {  // zoom on (wx, wy) (world coordinates) which will be placed on (sx, sy) (screen coordinates)
    wx = (typeof wx === "undefined") ? current.x + window.innerWidth / 2 * current.zoom : wx;
    wy = (typeof wy === "undefined") ? current.y + window.innerHeight / 2 * current.zoom : wy;
    sx = (typeof sx === "undefined") ? window.innerWidth / 2  : sx;
    sy = (typeof sy === "undefined") ? window.innerHeight / 2 : sy;

    bp.style.transitionDuration = "0.2s";

    bp.x = 0; bp.y = 0;
    bp.updateContainerPosition();
    current.x = wx - sx * zoom; current.y = wy - sy * zoom; current.zoom = zoom;

    $(".text").each(function() { updateTextPosition(this); });

    biggestPictureSeen = false;
  }

  function zoomOnText(res) {
    onZoom($(res).data('size') / 20, $(res).data('x'), $(res).data('y'));
  }

  function seeBiggestPicture(e) {
    e.preventDefault();
    document.activeElement.blur();
    function universeboundingrect() {
      var minX = Infinity, maxX = - Infinity, minY = Infinity, maxY = - Infinity;
      var texteelements = document.getElementsByClassName('text');
      [].forEach.call(texteelements, function(elt) {
        var rect2 = elt.getBoundingClientRect();
        var rect = { left: $(elt).data("x"),
                     top: $(elt).data("y"),
                     right: (rect2.width > 2 && rect2.width < 10000) ? current.x + rect2.right * current.zoom : $(elt).data("x") + 300 * $(elt).data("size") / 20,
                     bottom: (rect2.height > 2 && rect2.height < 10000) ? current.y + rect2.bottom * current.zoom : $(elt).data("y") + 100 * $(elt).data("size") / 20 };
        if (rect.left < minX) { minX = rect.left; }
        if (rect.right > maxX) { maxX = rect.right; }
        if (rect.top < minY) { minY = rect.top; }
        if (rect.bottom > maxY) { maxY = rect.bottom; }
      });
      return { minX: minX, maxX: maxX, minY: minY, maxY: maxY };
    }

    var texts = document.getElementsByClassName('text');
    if (texts.length === 0) { return; } 
    if (texts.length === 1) { zoomOnText(texts[0]); return; }

    if (!biggestPictureSeen) {
      previous = { x: current.x, y: current.y, zoom: current.zoom };
      var rect = universeboundingrect();
      var zoom = Math.max((rect.maxX - rect.minX) / window.innerWidth, (rect.maxY - rect.minY) / window.innerHeight) * 1.1;
      onZoom(zoom, (rect.minX + rect.maxX) / 2, (rect.minY + rect.maxY) / 2);
      biggestPictureSeen = true;
    }
    else {
      onZoom(previous.zoom, previous.x, previous.y, 0, 0);
      biggestPictureSeen = false;
    }
  }

  /*
   * SEARCH
   */

  var results = { index: -1, elements: [], text: "" },
    redoSearch = true,
    query;

  function find(txt) {
    results = { index: -1, elements: [], text: txt };
    $(".text").each(function() {
      if ($(this).text().toLowerCase().indexOf(txt.toLowerCase()) != -1) { results.elements.push(this); }
    });
    if (results.elements.length > 0) { results.index = 0; }
  }

  function findNext(txt) {
    if (!txt || txt.replace(/^\s+|\s+$/g, '') === '') { return; }   // empty search
    if (results.index == -1 || results.text != txt || redoSearch) {
      find(txt);
      if (results.index == -1) { return; }       // still no results
      redoSearch = false;
    }
    var res = results.elements[results.index];
    zoomOnText(res);
    results.index += 1;
    if (results.index == results.elements.length) { results.index = 0; }  // loop
  }

  /*
   * MOUSEWHEEL
   */

  var mousewheeldelta = 0, 
    last_e, 
    mousewheeltimer = null, 
    mousewheel;

  if (navigator.appVersion.indexOf("Mac") != -1) {   // Mac OS X
    mousewheel = function(e) {
      e.preventDefault();
      mousewheeldelta += Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
      last_e = e;
      if (!mousewheeltimer) {
        mousewheeltimer = setTimeout(function() {
          onZoom((mousewheeldelta > 0) ? current.zoom / 1.7 : current.zoom * 1.7, current.x + last_e.clientX * current.zoom, current.y + last_e.clientY * current.zoom, last_e.clientX, last_e.clientY);
          mousewheeldelta = 0;
          mousewheeltimer = null; }, 70);
      }
    };
  }
  else {
    mousewheel = function(e) {
      e.preventDefault();
      var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
      onZoom((delta > 0) ? current.zoom / 1.7 : current.zoom * 1.7, current.x + e.clientX * current.zoom, current.y + e.clientY * current.zoom, e.clientX, e.clientY);
    };
  }

  if ("onmousewheel" in document) { bpContainer.onmousewheel = mousewheel; }
  else { bpContainer.addEventListener('DOMMouseScroll', mousewheel, false); }

  /*
   * KEYBOARD SHORTCUTS
   */

  window.onkeydown = function(e) {
    if (((e.ctrlKey && !e.altKey || e.metaKey) && (e.keyCode == 61 || e.keyCode == 187 || e.keyCode == 171 || e.keyCode == 107 || e.key == '+' || e.key == '=' ))   // CTRL+PLUS or COMMAND+PLUS 
    || e.keyCode == 34) {   // PAGE DOWN     // !e.altKey to prevent catching of ALT-GR 
      e.preventDefault();
      onZoom(current.zoom / 1.7);
      return;
    }
    if (((e.ctrlKey && !e.altKey || e.metaKey) && (e.keyCode == 54 || e.keyCode == 189 || e.keyCode == 173 || e.keyCode == 167 || e.keyCode == 109 || e.keyCode == 169 || e.keyCode == 219 || e.key == '-' ))   // CTRL+MINUS or COMMAND+MINUS
    || e.keyCode == 33) {   // PAGE UP
      e.preventDefault();
      onZoom(current.zoom * 1.7);
      return;
    }
    if ((e.ctrlKey && !e.altKey || e.metaKey) && e.keyCode == 70) {         // CTRL+F
      e.preventDefault();
      setTimeout(function() { query = window.prompt("What are you looking for?", ""); findNext(query); }, 10);
      return;
    }
    if (e.keyCode == 114) {                 // F3
      e.preventDefault();
      if (results.index == -1) { setTimeout(function() { query = window.prompt("What are you looking for?", ""); findNext(query); }, 10); }
      else { findNext(query); }
      return;
    }
    if (e.keyCode == 113) {                 // F2
      e.preventDefault();
      seeBiggestPicture(e);
      return;
    }
  };

  /*
   * USEFUL FUNCTIONS
   */

  function isContainedByClass(e, cls) { while (e && e.tagName) { if (e.classList.contains(cls)) { return true; } e = e.parentNode; } return false; }

  function getQueryVariable(id) { var params = window.location.search.substring(1).split("&");  for (var i = 0; i < params.length; i++) { var p = params[i].split("="); if (p[0] == id) { return p[1]; } } return(false); }

  /*
   * API
   */

  return { newText: newText, 
           current: current, 
           updateTextPosition: updateTextPosition };

})();

Questo è lo script.

Mentre questa è l'immagine html funzionante

Codice:
[B<img id="bigpicture-container" src="nuovamappa2.jpg" border="0" width="1500" height="1000" orgWidth="1415" orgHeight="606" usemap="#image-maps-2015-03-10-080133" alt="" bigpicture.js />
<map name="image-maps-2015-03-10-080133" id="ImageMapsCom-image-maps-2015-03-10-080133"> 

<area  alt="" title="Tampa" a href="javascript:Popup('/images/popupmissioni/TAMPA.jpg')"  shape="rect" coords="42,342,85,397" style="outline:none;" target="_self"   />
<area  alt="" title="Libia"  a href="javascript:Popup('/images/popupmissioni/Libia.jpg')"  shape="rect" coords="690,330,792,419" style="outline:none;" target="_self"   />
<area  alt="" title="Libano"  a href="javascript:Popup('/images/popupmissioni/Libano.jpg')" shape="rect" coords="846,299,878,332" style="outline:none;" target="_self"    />
<area  alt="" title="Ciad" a href="javascript:Popup('/images/popupmissioni/Ciad.jpg')"  shape="rect" coords="720,436,788,529" style="outline:none;" target="_self"   />
<area  alt="" title="Nabibia"  a href="javascript:Popup('/images/popupmissioni/Namibia.jpg')" shape="rect" coords="701,772,754,871" style="outline:none;" target="_self" />
<area  alt="" title="Mozambico"   a href="javascript:Popup('/images/popupmissioni/Mozambico.jpg')"shape="rect" coords="857,719,900,778" style="outline:none;" target="_self"    />
<area  alt="" title="Etiopia"  a href="javascript:Popup('/images/popupmissioni/etiopia-eritrea.jpg')" shape="rect" coords="860,517,916,569" style="outline:none;" target="_self"    />
<area  alt="" title="Eritea"  a href="javascript:Popup('/images/popupmissioni/etiopia-eritrea.jpg')" shape="rect" coords="864,460,891,490" style="outline:none;" target="_self"    />
<area  alt="" title="Somalia" a href="javascript:Popup('/images/popupmissioni/Somalia.jpg')" shape="rect" coords="903,567,962,618" style="outline:none;" target="_self"    />
<area  alt="" title="Timor" a href="javascript:Popup('/images/popupmissioni/TIMOREST.jpg')" shape="rect" coords="1450,674,1489,714" style="outline:none;" target="_self"   />
<area  alt="" title="Pakistan" a href="javascript:Popup('/images/popupmissioni/Pakistan.jpg')" shape="rect" coords="1047,352,1102,396" style="outline:none;" target="_self"    />
<area  alt="" title="Afghanistan" a href="javascript:Popup('/images/popupmissioni/Afghanistan.jpg')" shape="rect" coords="1039,294,1087,330" style="outline:none;" target="_self" />
<area  alt="" title="Iraq" a href="javascript:Popup('/images/popupmissioni/Iraq.jpg')" shape="rect" coords="899,303,935,330" style="outline:none;" target="_self"   />
<area  alt="" title="Turchia" a href="javascript:Popup('/images/popupmissioni/Turchia.jpg')"shape="rect" coords="808,240,896,274" style="outline:none;" target="_self"    />
<area  alt="" title="Italia" a href="javascript:Popup('/images/popupmissioni/NAZIONALI.jpg')"  shape="rect" coords="680,193,729,240" style="outline:none;" target="_self"  />
<area  alt="" title="Albania"a href="javascript:Popup('/images/popupmissioni/Albania.jpg')" shape="rect" coords="747,228,783,259" style="outline:none;" target="_self"    />
<area  alt="" title="Kosovo" a href="javascript:Popup('/images/popupmissioni/KOSOVO.jpg')" shape="rect" coords="735,199,764,218" style="outline:none;" target="_self"    />
<area  alt="" title="bosnia" a href="javascript:Popup('/images/popupmissioni/Bosnia.jpg')" shape="rect" coords="721,185,749,202" style="outline:none;" target="_self"    />
<area  alt="" title="slovenia" a href="javascript:Popup('/images/popupmissioni/planisfero-trasp.jpg')" shape="rect" coords="764,150,799,191" style="outline:none;" target="_self"    />
<area shape="rect" coords="1413,604,1415,606" alt="Image Map" style="outline:none;" title="Image Map"  />
</div>

<script type="text/javascript">
<!--

var stile = "top=500, left=500, width=400 height=250, status=no, menubar=no, toolbar=no scrollbars=no";

function Popup(apri) 
{
  window.open(apri, "", stile);
}
//-->
</script>
</map>

Questi sono entrambi i codici. In pratica devo applicare lo script a questa immagine ma non riesco come posso risolvere?? Grazie :)
 
Discussioni simili
Autore Titolo Forum Risposte Data
S Inserire script jquery nel sito jQuery 9
D [Javascript] inserire uno script in un file php Javascript 6
9 inserire contenuto in un file pdf aperto sul browser tramite script php PHP 0
A [PHP] inserire paginazione su script php/mysql PHP 6
P Inserire classe su script Google Analitics Magento 0
C Inserire script nell'head di WP WordPress 3
Devil-94 Javascript: script che permetta di inserire immagini in un certo elemento html. Javascript 2
D Inserire script php in un sito PHP 1
giancadeejay Script immagini random -voglio inserire i link alle immagini PHP 11
W Inserire link in script Javascript 17
Pandaproject Inserire Collegamento ipertestuale dentro uno script *.js Javascript 0
H Aiuto grazie per inserire un script di annunci PHP 2
B Inserire script nelle pagine web PHP 1
P inserire due voci in un titolo post wp WordPress 0
R inserire video nel sito HTML e CSS 15
J Inserire blog wordpress in angular Content Management System (CMS) 0
A inserire variabile php colore in div html PHP 2
L inserire dati multi livello PHP 8
G Inserire una scritta Java 1
M Inserire variabile nella value di una hidden PHP 3
S Inserire foto in ogni cella di una tabella Javascript 0
G inserire dati automaticamente in mysql PHP 0
B Vorrei inserire una finestra con messaggio ad un history.back PHP 16
Shyson Inserire placeholder nel campo cerca PHP 5
M Lanciare alert se il codice fiscale è già presente nel db e lasciare la scelta di inserire all'utente PHP 42
atipika INSERIRE ICONE DOWNLOAD E STAMPA WORDPRESS WordPress 10
F Creare un set di date a seconda del frazionamento scelto da inserire in MySQL PHP 6
B inserire valori da una tabella a un altra mysql PHP 34
napuleone [HTML] type="file" inserire path di partenza HTML e CSS 4
Monital [Javascript] inserire dati estratti dal db in html fisso Javascript 1
R [WordPress] Inserire campi aggiuntivi ad un Submit Form già dato dal template (front-end) WordPress 0
M inserire i dati ottenuti da una jquery in una tabella già esistente jQuery 1
G Inserire "Leggi il resto dell'articolo" con link al post sul sito preso via RSS Email Marketing 0
M [PHP] Come inserire codice html in un ciclo while PHP 2
P [PHP] Inserire stringhe in input(text),memorizzarle e stamparle in file successivo PHP 0
J [Javascript] Inserire un caricamento con animazione prima dell'esecuzione di un'azione Javascript 1
Shyson [PHP] Inserire testo nel codice PHP 2
D Mailchimp - Possibile inserire doppia condizione per i triggers? Email Marketing 0
A [MS Access] Pulsante per inserire allegati in campo maschera MS Access 0
Shyson [HTML] Inserire nuovo font con @font-face HTML e CSS 5
Alex_70 Inserire photo in php PHP 0
D [Javascript] [HTML] Inserire slash dopo 3 numeri Javascript 5
F INSERIRE IN UN'UNICA CASELLA DI TESTO REPORT ACCESS I VALORI DELLA TABELLA DI UN'INTERA COLONNA MS Access 2
A [HTML] Come inserire google review stars nelle pagine del mio sito HTML e CSS 0
spider81man Connettersi ad un DB ed inserire dati con Javascript Javascript 3
spider81man [PHP] Inserire file .pdf in db PHP 6
P [WordPress] Inserire codice in pagina dinamica WordPress 0
A [PHP] Ciclare array multidimensionale e inserire valori in DB PHP 2
M [PHP] Inserire array nel db PHP 6
andreas88 [HTML] come inserire 3 riquadri in un unico rigo (vedere img allegata) HTML e CSS 11

Discussioni simili