विंडो आकार बदलने पर छवि मानचित्र का आकार बदलें

Question

मैं विंडो आकार बदलने की घटना पर एक छवि मानचित्र का आकार बदलने का प्रयास कर रहा हूं। मुझे जो निकटतम मिला है वह माउसक्लिक घटना का उपयोग करना है, लेकिन जो कुछ भी मैं कर रहा हूं उसके लिए विंडो का आकार बदलने की जरूरत है। मैं फ़ायरफ़ॉक्स 3.5.5

का उपयोग कर रहा हूं, मैं कुछ हद तक jquery का उपयोग कर रहा हूं। यहाँ मेरी उदाहरण है - क्षेत्र बटन मैं विंडो आकार परिवर्तन पर आकार बदलने के लिए चाहते हैं ऊपर बाईं ओर स्थित है (मानचित्र और क्षेत्र बटन आकार बदलने के लिए उस पर क्लिक करें):

http://www.whitebrickstudios.com/foghornstour/imagemap3.html

किसी भी मदद की सराहना की होगी! धन्यवाद, रिच

Answer 1

एक समारोह जब खिड़की का आकार बदलने पर कॉल करने के लिए, निम्न प्रयास करें:

scaleXY('theMap',(window).width()); 

यह कार्य करना चाहिए:

$(window).bind('resize', function() { 
    // resize the button here 
}); 

इसके अलावा, रेखा 37 डॉलर चिन्ह याद आ रही है हो:

scaleXY('theMap',$(window).width()); 

Answer 2

यदि आपको केवल आईएम का आकार बदलने की आवश्यकता है आयु, इस तकनीक का उपयोग करें: http://www.cssplay.co.uk/layouts/background.html

CSSPlay के लिए धन्यवाद।

Answer 3

मुझे लगता है कि क्या आप चाहते हैं http://home.comcast.net/~urbanjost/semaphore.html

पर है, जहां मैं कैसे अपनी छवि मानचित्र निर्देशांक परिवर्तन जब अपनी छवि प्रदर्शन आकार परिवर्तन करने के लिए के विभिन्न उदाहरणों से पता चलता।

Answer 4

यह एक पुराना धागा है, लेकिन किसी भी व्यक्ति के लिए समान या समान समस्या के समाधान की तलाश करने के लिए, ImageMapster jQuery प्लगइन सबसे आसान समाधान प्रदान करता प्रतीत होता है। के रूप में अपनी छवि मानचित्र के साथ एक छवि का आकार करने के लिए इस प्रकार आप अपने आकार विधि का उपयोग कर सकते हैं (यदि वांछित जो भी आकार बदलने चेतन कर सकते हैं!):

$('img').mapster('resize', newWidth, newHeight, resizeTime); 

आप एक jsFiddle that demonstrates resizing एक छवि को ImageMapster's demo पृष्ठ पर एक लिंक मिल सकता & ब्राउज़र विंडो बदलने के जवाब में इसका नक्शा।

Answer 5

मैंने प्रत्येक घटना पर सभी मानचित्र बिंदुओं का पुनर्निर्माण करने के लिए कुछ सरल कार्य लिखा था। इसे आजमाएं

function mapRebuild(scaleValue) { 
    var map = $("#imgmap"); // select your map or for all map you can choose $("map").each(function() { map = $(this);.....}) 
    map.find("area").each(function() { // select all areas 
     var coords = $(this).attr("coords"); // extract coords 
      coords = coords.split(","); // split to array 
     var scaledCoords = ""; 
     for (var coord in coords) { // rebuild all coords with scaleValue 
       scaledCoords += Math.floor(coords[coord] * scaleValue) + ","; 
      } 
     scaledCoords = scaledCoords.slice(0, -1); // last coma delete 
     $(this).attr("coords", scaledCoords); // set new coords 
     }); 
    } 

स्केल वैल्यू को पुराने विन्डोविड्थ/न्यूविंडोविड्थ के रूप में गणना की जा सकती है। बेशक आपको विंडो आकार बदलने पर पुरानीविंडोविड्थ का मान रखना होगा। शायद मेरा समाधान समय पर नहीं, लेकिन मुझे उम्मीद है कि यह किसी के लिए उपयोगी है

Answer 6

विक्टर के उत्तर के एक संशोधित संस्करण के रूप में, यह संस्करण एकाधिक आकारों को संभाल सकता है। यह किसी भी भविष्य के आकार के मुकाबले तुलना के लिए शुरुआती मूल्यों को संग्रहीत करता है। यह waitForFinalEvent का भी उपयोग करता है, इसलिए यह आकार बदलने पर अधिक से अधिक नहीं चलता है।

    var mapImg = $('#mapImg'); 
    var naturalWidth = 1200; // set manually to avoid ie8 issues 
    var baseAreas = new Array(); 
    var scaleValue = mapImg.width()/naturalWidth; 

    $(window).resize(function() { 
     waitForFinalEvent(function() { 
      scaleValue = mapImg.width()/naturalWidth; 
      mapRebuild(scaleValue); 
     }, 500, 'resize-window'); 
    }); 

    function mapRebuild(scaleValue) { 
     var map = $("#imgMap"); 
     var mapareas = map.find('area'); 
     if (baseAreas.length == 0) { 
      mapareas.each(function() { 
       baseAreas.push($(this).attr('coords')); // set initial values 
      }); 
     } 
     mapareas.each(function(index) { 
      var coords = baseAreas[index]; // use the corresponding base coordinates   
      coords = coords.split(',');  
      var scaledCoords = ''; 
      for (var coord in coords) { 
       scaledCoords += Math.floor(coords[coord] * scaleValue) + ','; 
      } 
      scaledCoords = scaledCoords.slice(0, -1); 
      $(this).attr('coords', scaledCoords); 
     }); 
    } 

    mapRebuild(scaleValue); // initial scale