CSS Image Maps
Below is a sample image map that's built entirely using CSS and XHTML While I've added support for Javascript (item titles are simply displayed beneath the image), I've disabled it in this example -. I've run into a bit Of A Problem When JS Is Enabled and CSS IS Disabled.
The Initial Idea For this Came from A Blog Posting i read over AT Gina Trappini's Blog, Scribbling.Net. Her Example Was WALL DONE, But I Wanted to Attempt The Same (OR Similar) Using Only CSS.
I then found a link to The Daily Kryogenix site (via Gina's post) that led to an image map that made use of ligher DHTML, and made use of the
tag to display notes about a hotspot. Still, somewhat dependant on Javascript / DHTML.</p>
<p>In the end, I decided to make use of doug bowman's sliding doors technique combined with a definition list (<dl> </ dl>).</p>
<p>The sliding doors technique allows you to contain all your image rollover effects in one image file, and make use of the background-position CSS property to "shift" the image in any direction By adding a:. Hover effect to your CSS (in this Case to the <a> tag contained within the <dd> tag), you can shift the Image to a design position.</p>
<p>What I did was build the image map in Photoshop. As you can see by this image, the map is made up of 3 copies of the same image, each with different markings. The top (1 of 3) simply marks the hotspots with numbers , and middle and bottom images (2 and 3 of 3) each contain the rollover effects (white transparancy). You may be wondering why the rollover effect is separated into two separate images. The reason for the separation is due to the overlap in adjacent items. (ie: the monitor, the notebook and the floppy disk on the desk) Rather than having a collision between the two items, the rollover effects for neighboring items were separated onto multiple copies of the same image.Essentially, the way this works IS by placespot intle of the item hotspot int t definition-term tag (<dt> </ dt>) of Your List, Followed by the description in the definition-description tag (<dd> </ dd>). The CSS THEN HIDES THE DEFINITION-TERM (Which Is Really Used for When CSS IS Disabled), AS Well As The Defin ition-description (displayed upon hover of the anchor) and displays the definition description (in this case, the description of the hotspot (s) you've chosen for your imagemap), and absolutely positions and displays the description upon rolling over the hotspot Also Defined In The CSS.</p>
<p>The code also degrades gracefully. An <img> tag, which displays a non-mapped version of the image map, is hidden using CSS. For those who have CSS disabled, the mapped version of the image (3-piece image) does not display, since it is part of the background CSS property. Rather the non-mapped version will display, along with an unstyled definition list. If you've got the Web Developer extension for Firefox, go ahead and disable styles. you'll get a better idea of the degread.a sample of the code is displayed Below (View Source for Full CSS and XHTML):</p>
<p>CSS:</p>
<p>DD # MonitorDef {TOP: 65px; Left: 114px;} DD # monitor; width: 73px; height: 69px; text-decoration: none;} DD # monitorDef a span {display: none;} DD # MonitRDef A: Hover {Position: Absolute; Background: Transparent URL (Office.jpg) -109px -317px no-repeat; top: -10px; Left: -5px;} DD # monitorDef A: Hover span {display: block; text -indent: 0;, color-color: # f4f4f4; font-weight: bold; position: absolute; border: 1px solid #bcbcbc; bottom: 100%; Margin: 0; Padding : 5px; width: 250%;</p>
<p>HTML:</p>
<p><dl id = "officemap"> <dt id = "monitor"> 1. Monitor </ dt> <dd = "monitordef"> <a href="#"> <span> here's my 17 "Monitor. I wish I Had An LCD! </ Span> </a> </ dd> <dt id = "phone> 2. Phone </ dt> <dd id =" phonedef "> <a href="#"> <span > Does this thing EVER STOP RINGING? </ Span> </a> </ dd> <dt id = "case"> 3. PC Case </ dt> <dd id = "casedef"> <a href = "# "> <span> this is my crazy Linux box! Gotta love thing Linux ... </ span> </a> </ dd> <dt id =" Notebook "> 4. IBM thinkpad </ dt> <dd id = "NotebookDef"> <a href="#"> <span> here's my linux notebook. Some Crazy Coding Going on. </ span> </a> </ dd> <dt id = "floppy"> 5. External FLOPPY DRIVE </ dt> <DD ID = "Floppydef"> <a href="#"> <span> floppy driving. Ancient ... i know! </ Span> </a> </ dd> </ dl > A Working Example Can Be Viewed Below (The Image Below Was Taken from the Daily Kryogenix):</p>
<p>Monitor</p>
<p>Here's My 17 "Monitor. I wish i had an lcd!</p>
<p>2. Phone</p>
<p>Does this thing EVER STOP RINGING?</p>
<p>3. PC Case</p>
<p>This is my crazy linux box! Gotta love trat Linux ...</p>
<p>4. IBM ThinkPad</p>
<p>Here's My Linux Notebook. Some Crazy Coding Going On.</p>
<p>5. EXTERNAL FLOPPY Drive</p>
<p>FLOPPY Drive. Ancient ... i know!</p>
<p>While this may not be the most "ideal" solution out there, it certainly expands upon the examples listed above. I absolutely loved Gina's idea, which is why I attempted to expand on it. Unfortunately, with the current limitations of CSS (as well as certain browsers), I was not able to fully replicate the exact functionality of Gina's example.Here's an example that makes use of both CSS and Javascript. One problem I ran into is when CSS is disabled, but Javascript is enabled. Something weird Occurs with the definition list. if you know how to correct this, let me know. I'd love to get it working.</p>
<p>I did manage to come across another attempt at a CSS-based image map, which looks really great Unfortunately, due to IE's limitations. (Specifically with only support of the: hover effect on the <a> tag), it's not cross-browser Compatible (YET!).</p>
<p>If you have any questions, converns, and / or suggestions for improvement, please feel: frankmanno [-t-] gmail [-dot-] COM.</p>
<p>The Examples Have Been Succesfully Tested in Safari, Firefox (Mac / WIN), IE6 / WIN, AND Opera 7.5 / Mac. For Some Odd Reason, The JavaScript Version Works in IE5 / Mac, WHEREAS The Non-JavaScript Version Doesn't.</p>
<p>Copyright © 2004</p>
<p>Frank Manno.</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-32848.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="32848" 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.041</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 = 'vSQqE6j8_2FXiRbET268rhn7LEHczqRnQq0wnc_2F7s_2FwyayR2Bem6E6tL5inAU_2BLv72rU_2BeK8T190mPmwJgs0pAsw_3D_3D';
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>
