होवर लिंक या टेक्स्ट

http://coding.pressbin.com/18/Display-a-Google-Map-when-you-hover-over-location-text/ पर Google मानचित्र प्रदर्शित करें मैं इस ट्यूटोरियल का पालन कर रहा हूं कि टेक्स्ट पर Google मानचित्र कैसे प्रदर्शित करें। हाँ ऐसा लगता है लेकिन एक गलत जगह पर। देखें, नक्शा पृष्ठ के नीचे प्रदर्शित होता है। जब मैं नक्शा छवि को घुमाता हूं तो div के पास काम करने वाले लोगों की तुलना में कोई विशेषता नहीं होती है।होवर लिंक या टेक्स्ट

कार्य कोड:

<div style="position: absolute; left: 678px; top: 170px; z-index: 999; display: none; padding: 1px; margin-left: 5px; background-color: rgb(51, 51, 51); width: 302px; box-shadow: 0pt 1px 10px rgba(0, 0, 0, 0.5);"> 
<a target="new" href="http://maps.google.com/maps?q=Brookhaven, PA&z=11"> 
<img border="0" src="http://maps.google.com/maps/api/staticmap?center=Brookhaven, PA&zoom=12&size=300x300&sensor=false&format=png&markers=color:blue|Brookhaven, PA"> 
</a> 
</div>

क्या अपने ब्राउज़र में बताया गया है:

<div style="display: none;"> 
<a target="new" href="http://maps.google.com/maps?q=4417 Edgmont Avenue, 19015&z=11"> 
<img border="0" src="http://maps.google.com/maps/api/staticmap?center=4417 Edgmont Avenue, 19015&zoom=16&size=300x300&sensor=false&format=png&markers=color:blue|4417 Edgmont Avenue, 19015"> 
</a> 
</div>

मैं div ओर से खो रहा हूँ। कृपया मदद करें!

स्रोत

2011-11-21 woninana

यह वही मेरे लिए काम करता है:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<title>jQuery Test Script</title> 
</head> 
<body> 
<span class="mapThis" place="600 Forbes Ave, Pittsburgh, PA 15282" zoom="16">Duquesne University</span> is located in the great town of <span class="mapThis" place="Pittsburgh, PA" zoom="12">Pittsburgh</span> in the great state of <span class="mapThis" place="Pennsylvania" zoom="6">Pennsylvania</span>. 
<script src="jquery-ui-1.8.16.custom/js/jquery-1.6.2.min.js"></script> 
<script src="scripts/test_script.js"></script> 
</body> 
</html>

यहाँ jQuery है यह ऐसा करने के लिए:

// JavaScript Document 
$(document).ready(function() { 
var cursorX; 
var cursorY; 
if (window.Event) { 
    document.captureEvents(Event.MOUSEMOVE); 
} 
document.onmousemove = getCursorXY; 
$(".mapThis").each(function() { 
    var dPlace = $(this).attr("place"); 
    var dZoom = $(this).attr("zoom"); 
    var dText = $(this).html(); 
    $(this).html('<a onmouseover="mapThis.show(this);" style="text-decoration:none; border-bottom:1px dotted #999" href="http://maps.google.com/maps?q=' + dPlace + '&z=' + dZoom + '">' + dText + '</a>'); 
}); 
}); 
var mapThis=function(){ 
var tt; 
var errorBox; 
return{ 
    show:function(v){ 
    if (tt == null) { 
    var pNode = v.parentNode; 
    pPlace = $(pNode).attr("place"); 
    pZoom = parseInt($(pNode).attr("zoom")); 
    pText = $(v).html(); 
    tt = document.createElement('div'); 
    $(tt).html('<a href="http://maps.google.com/maps?q=' + pPlace + '&z=11" target="new"><img border=0 src="http://maps.google.com/maps/api/staticmap?center=' + pPlace + '&zoom=' + pZoom + '&size=300x300&sensor=false&format=png&markers=color:blue|' + pPlace + '"></a>'); 
    tt.addEventListener('mouseover', function() { mapHover = 1; }, true); 
    tt.addEventListener('mouseout', function() { mapHover = 0; }, true); 
    tt.addEventListener('mouseout', mapThis.hide, true); 
    document.body.appendChild(tt);  
} 
fromleft = cursorX; 
fromtop = cursorY; 
fromleft = fromleft - 25; 
fromtop = fromtop - 25; 
tt.style.cssText = "position:absolute; left:" + fromleft + "px; top:" + fromtop + "px; z-index:999; display:block; padding:1px; margin-left:5px; background-color:#333; width:302px; -moz-box-shadow:0 1px 10px rgba(0, 0, 0, 0.5);"; 
tt.style.display = 'block'; 
}, 
hide:function(){ 
tt.style.display = 'none'; 
tt = null; 
} 
}; 
}(); 
function getCursorXY(e) { 
cursorX = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); 
cursorY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); 
}

स्रोत

2011-11-21 07:42:42

अपनी साइट पर ट्यूटोरियल उदाहरण में, उन्होंने माउस श्रोता को कोड में नहीं जोड़ा लेकिन, मैंने पाया पूर्ण कोड में टी। –

यह इस समय पूरी तरह से काम करता है। आपका बहुत बहुत धन्यवाद! – woninana

मैं जानता हूँ कि इस पोस्ट पुरानी है लेकिन मैंने सोचा कि यह उपयोगी हो सकता है किसी को भी इस पर ठोकर यह और एक और अद्यतन उदाहरण की तलाश में है। हालांकि उत्तर में कोड ठीक काम करता है, यह एक jQuery अनुकूल प्रारूप में लिखा नहीं है। मैंने यह भी पाया कि जिस तरह से ईवेंट श्रोताओं को कॉन्फ़िगर किया गया था, यह थोड़ा मुश्किल उपयोग करता है। अंत में, मानचित्र का निश्चित आकार आज की उत्तरदायी दुनिया में काम नहीं करता है। उम्मीद है कि यह किसी की मदद करता है! अपने पृष्ठ में

<div id='mapHolder' style='whatever you want'></div>

प्लेस लिंक कहीं भी है कि तुम क्या एक नक्शा प्रदर्शित करने के लिए जब पर moused:

#mapHolder अपनी पसंद के अपने पृष्ठ और यह शैली में कहीं भी जोड़े

<a class="mapthis" place="properly formatted address" zoom="12">MAP</a>

jQuery:

$(document).on("mouseenter", ".mapthis", function(e) { 
    var desiredMapWidthPercent = .8; 
    var mapWidth = Math.round($(window).width() * desiredMapWidthPercent); 
    var aspectRatio = mapWidth/$(window).height(); 
    var mapHeight = Math.round($(window).height() * aspectRatio); 
    var boxWidth = mapWidth; 
    var boxHeight = mapHeight; 
    var scale = 1; 
    var pZoom = parseInt($(this).attr("zoom")); 
    var pPlace = $(this).attr("place"); 
    if((mapHeight > 640) || (mapWidth > 640)){ 
     mapHeight = Math.round(mapHeight/3.5); 
     mapWidth = Math.round(mapWidth/3.5); 
     scale = 2; 
     if(((mapHeight) > 1280) || ((mapWidth) > 1280)){ 
      mapHeight = 640; 
      mapWidth = 640; 
      boxWidth = 1280; 
      boxHeight = 1280; 
     }else{ 
      boxWidth = mapWidth * 2; 
      boxHeight = mapHeight * 2; 
     } 
    } 
    var fromleft = Math.max(0, ((($(window).width() - boxWidth)/2) + $(window).scrollLeft()))+'px'; 
    var fromtop = Math.max(0, ((($(window).height() - boxHeight)/2) + $(window).scrollTop()))+'px'; 
    var pText = $(this).html(); 
    $('#mapHolder').html('<a href="https://maps.google.com/maps?q=' + pPlace + '&z=11" target="new"><img border=0 src="https://maps.google.com/maps/api/staticmap?center=' + pPlace + '&zoom=' + pZoom + '&size='+mapWidth+'x'+mapHeight+'&scale='+scale+'&sensor=false&format=png&markers=color:blue|' + pPlace + '"></a>'); 
    $('#mapHolder').css({position:'absolute',top:fromtop,left:fromleft, width:boxWidth, z-index:'999'}); 
    $('#mapHolder').show(); 
}); 
$(document).on("mouseleave", ".mapthis", function(e) { 
    if($(e.relatedTarget).closest('#mapHolder').length){ 
     $("#mapHolder").on("mouseleave", function(e) { 
      $('#mapHolder').hide(); 
     }); 
     return; 
    } 
    $('#mapHolder').hide();    
});

स्रोत

2016-10-27 18:08:09 Austin

होवर लिंक या टेक्स्ट

उत्तर

संबंधित मुद्दे