Map Index in Web Page
In actual Web Page production, it is often encountered in the case where certain index icons in a whole image will be encountered to generate URL jumps. If we do not pass the MAP mechanism, we have to split the entire image into many small pieces of independent icons, through multiple 
statements to be jumped. This approach despite the actual needs of the part, but in some specific occasions, for example, through a whole China map, it is often not from the heart:
(1) It is difficult to combine each divided rectangular sub-map in Netscape to display a full "seamless" image, and the final map of the map is not ideal;
(2) The positioning of each city cannot be accurate to the "small circle" on the city;
(3) Cutting and complex statement of the image makes the production amount of the producer.
With HTML expand MAP mechanism, the above problems can be easily solved, referring to the examples below:
a Sample for MAP </ Title></p>
<p></ HEAD></p>
<p><Body bgcolor = white></p>
<p><center></p>
<p><h1> please select your choise. </ h1></p>
<p><a href=""> <img src = "map.jpg" border = 0 usemap = "# maintopmap" ismap alt = "test map function"> </A> <br></p>
<p></ center></p>
<p><Map name = "maintopmap"></p>
<p><Area Coords = "10, 14, 380, 130" href = "bycircle.htm"></p>
<p><Area Coords = "108, 154, 197, 267" href = "clock.htm"></p>
<p><Area Coords = "205, 260, 379, 396" HREF = "Pig.htm"></p>
<p></ Map></p>
<p></ Body></p>
<p></ Html></p>
<p>In <A HREF=""> <IMG SRC = "map.jpg" BORDER = 0 USEMAP = "# maintopmap" ISMAP ALT = "Test MAP Function"> </A> <BR> statement, there are two key Words should specifically explain:</p>
<p>(1) ISMAP</p>
<p>This image will be used as MAP.</p>
<p>(2) Usemap = "# maintopmap"</p>
<p>Define the name of this map as MAINTOPMAP, the preamble # must.</p>
<p>After the <img src = ...> extended statement defines the useMAP name, then this MAP can be used to implement a complete map index function, using the following statements:</p>
<p><Map name = "maintopmap"></p>
<p><Area Coords = "10, 14, 380, 130" HREF = "bycircle.htm"> <area coords = "108, 154, 197, 267" href = "clock.htm"></p>
<p><Area Coords = "205, 260, 379, 396" HREF = "Pig.htm"></p>
<p></ Map></p>
<p>described as follows:</p>
<p>(1) <map> </ map> is Map Identity.</p>
<p>(2) <Area Coords = "X1, Y1, X2, Y2" HREF = URL>, indicating that if the user selects the index identifier in the rectangular area of (x1, y1) - (x2, y2) in the map image, The browser is positioned to the node illustrated by the URL.</p>
<p>The step of the MAP mechanism:</p>
<p>(1) MAP image is made with image software;</p>
<p>(2) Record the snap upper left corner (X1, X2) and the left upper left corner (x1, x2) and the lower right corner (x2, y2) of all hotspot rectangular regions. X and Y snorkers are opposed, (x, y) of the upper left corner of the image is the coordinate origin (0, 0), the lower right corner (x, y) = (image width -1, image height -1);</p>
<p>(3) Use <img src = ... usemap = .... ismap> statement in the HTML file;</p>
<p>(4) Add the <map> </ map> statement, and fill in the relative coordinate value of Area Coords = "X1, Y1, X2, Y2" therebetween and the HREF URL node name.</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-83449.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>)
</div><div></div></div></div><ul class="postlist list-unstyled">
</ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="83449" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved
</div><div class="col text-right">Processed:
<b>0.044</b>, SQL:
<b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script>
var debug = DEBUG = 0;
var url_rewrite_on = 1;
var url_path = './';
var forumarr = {"1":"Tech"};
var fid = 1;
var uid = 0;
var gid = 0;
xn.options.water_image_url = 'view/img/water-small.png';
</script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script>
var forum_url = 'list-1.html';
var safe_token = '_2FuGZtlAvw2QgV1u2JCrgJRdv48QU11AF_2BJDB9DVbHoucq6AYghiy3uK15_2BB1uA8efPsc0brXtnBHywd4';
var body = $('body');
body.on('submit', '#form', function() {
var jthis = $(this);
var jsubmit = jthis.find('#submit');
jthis.reset();
jsubmit.button('loading');
var postdata = jthis.serializeObject();
$.xpost(jthis.attr('action'), postdata, function(code, message) {
if(code == 0) {
location.reload();
} else {
$.alert(message);
jsubmit.button('reset');
}
});
return false;
});
function resize_image() {
var jmessagelist = $('div.message');
var first_width = jmessagelist.width();
jmessagelist.each(function() {
var jdiv = $(this);
var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width();
var jmessage_width = Math.min(jdiv.width(), maxwidth);
jdiv.find('img, embed, iframe, video').each(function() {
var jimg = $(this);
var img_width = this.org_width;
var img_height = this.org_height;
if(!img_width) {
var img_width = jimg.attr('width');
var img_height = jimg.attr('height');
this.org_width = img_width;
this.org_height = img_height;
}
if(img_width > jmessage_width) {
if(this.tagName == 'IMG') {
jimg.width(jmessage_width);
jimg.css('height', 'auto');
jimg.css('cursor', 'pointer');
jimg.on('click', function() {
});
} else {
jimg.width(jmessage_width);
var height = (img_height / img_width) * jimg.width();
jimg.height(height);
}
}
});
});
}
function resize_table() {
$('div.message').each(function() {
var jdiv = $(this);
jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>');
});
}
$(function() {
resize_image();
resize_table();
$(window).on('resize', resize_image);
});
var jmessage = $('#message');
jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); });
jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); });
$('#nav li[data-active="fid-1"]').addClass('active');
</script>
