Page 1

ͼÏñÈȵãÖ®Ò¹:cssÕü¾ÈµÄͼÏñÈȵã2007-11-05 23:14×÷ÕߣºStuart Robertson ·Ò룺Shark ²Î¿¼: CSS Image Maps cssͼÏñµØͼ htmlͼÏñÈÈÇømap area ¡¡¡¡¹ýÈ¥£¬ÔÚÎÒÃǺÜÉÙ¿¼ÂÇweb±ê×¼ºÍ¿É·ÃÎÊÐÔµÄÖØÒªÐÔµÄʱºò£¬ÍøÒ³Éè¼ÆʦÃǾ³£Ê¹ÓÃͼÏñÈȵãÀ´¿ì½ÝµØ½«Ò»ÕÅͼƬ»®·ÖΪ¶à¸öÇøÓò£¬È»ºó°ÑÕâЩÇøÓòÁ ´½Óµ½Ìض¨µÄÍøÖ·¡£µ«ÊÇ´«Í³µÄͼÏñÈȵãÔÚ´¿Îı¾ä¯ÀÀÆ÷Öв ¢²»Äܺܺõع¤×÷£¬¶øÇÒÓëºÜ¶àм¼ÊõÏà±ÈËüÒ²²¢²»ÄÇà ´ÓÐЧºÍͨÓá£Ò²ÐíÄãÔÚһЩÀÏÍøÒ³»òÕßÒ»Õźܸ´ÔӵĵØͼÉÏ»¹ÄÜÕÒµ½ÈÔÔÚʹÓÃÖеÄÈȵ㣬µ«¾ø ´ó²¿·ÖµÄÍøÒ³Éè¼Æʦ°ÑËüÊÓ×÷Ò»ÖÖ¹ýʱµÄ¼¼Êõ£¬ÉõÖÁÊÇÒѾËÀÍöµÄ¼¼Êõ¡£ 550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;" /> ¡¡¡¡µ±ÎÒ²ÎÓëµ½½¨ÉèÒ»¸ö¹ØÓÚ¿Ö²ÀС˵µÄÕ¾µãÏîÄ¿ÖÐʱ£¬ÎÒ ´ÓÒ»¿ªÊ¼¾Í¾ö¶¨Òª¾¡ÎÒËùÄÜʹվµã½¨Á ¢ÔÚ»ùÓÚ±ê×¼µÄXHTMLºÍCSSÖ®ÉÏ¡£µ«Êǵ±ÁíÒ»¸öÉè¼Æʦ¸æËßÎÒËûµÄÉè¼Æ¸ÅÄîʱ £¬ÎÒ¿ªÊ¼¸Ðµ½¾øÍû¡£ËûÏ£ÍûÒ³Ãæ¿´ÆðÀ ´ÏñÒ»±¾ÓÐ×ÅÆÆËðÒ³±ßºÍÄÑ¿´ÎÆÀíµÄ¹ÅÀ϶øÆƾɵÄÊ飬ͬʱ²Ëµ¥Ñ¡Ïî·ÖÉ¢ÔÚÒ³ÃæÖС£ÎÒÔõà ´²ÅÄÜ°ÑÒ»¸öºÜºÃµØ½á¹¹»¯Á˵ÄÎĵµ±íÏÖΪµÃÈç´Ë×ÔÈ»£¿ ¡¡¡¡ÎÒÔø¾¿¼ÂǹýʹÓÃͼÏñÈȵ㡣 ¡¡¡¡ËüÃÇʵÔÚÌ«¹ÅÀÏÁËÒ»µã£¬µ«È·Êµ¼òµ¥·½±ã£¬Äã²»ÐèÒª°Ñ±³¾°Í¼Æ¬Çгɼ¸Ê®¸öСͼƬ£¬Ò²²»Ð èÒªÓÃCSSÔÙ°ÑËüÃÇ·ìºÏµ½Ò»Æ𡣻عýÍ·ÔÙÈ¥ÓÃͼÏñÈȵ㿴ËÆÓÐЩ·è¿ñ£¬µ«³ö·ËƺõÕýÔÚÄǸö·½Ï ò¡£ËùÒÔÎÒ¾ö¶¨ÖØ·µÊµÑéÊÒ¿´¿´ÊÇ·ñÄÜÓÃCSSÕâ¸öÏÖ ´ú¿ÆѧʹͼÏñÈȵãÕâÖÖwebÉè¼Æ¼¼ÊõÖØ»ñÐÂÉú¡¡ ÒÑÖªµÄÊÂʵ ¡¡¡¡»ù±¾µÄ˼·ÊÇÕâÑùµÄ£ºÓÃCSS´´½¨²»¿É¼û£¨ÒëÕß×¢£º¼´visibility:hidden;£©µÄÁ´½Ó² ¢ÇÒ°ÑËüÃǸ¡¶¯µ½±³¾°Í¼Æ¬ÉÏÏàÓ¦µÄλÖᣠ¡¡¡¡Ê×ÏÈÎÒÃÇ´´½¨Ò»¸öÍâ²ãdivÓÃÀ´ÏÔʾ±³¾°Í¼Æ¬¡£È»ºóÁ´½Ó½«±»·ÅÖÃÔÚÒ»¸öǶÌ×divÖУ¬Ê¹ ´úÂë±£³Ö×éÖ¯ÐÔµÄͬʱ³äÐíÎÒÃdzÉ×éµØÓ¦ÓÃÑùʽµ½Á´½ÓÉÏ¡£ <div id="book"> <div id="menu"> ... </div> </div> ¡¡¡¡ÏÖÔÚ£¬¸÷¸öÁ´½Ó¾Í¿ÉÒԷŵ½Ç¶Ì×divÖ®ÖС£¸³Óèÿ¸öÁ ´½ÓÒ»¸öid£¬Ê¹ÎÒÃÇ¿ÉÒÔÖ¸¶¨ËüÃÇÔÚÒ³ÃæÖеÄλÖá£ÕâЩ²»Í¬µÄid»¹Æð×ÅêµãµÄ×÷Óã¬Óû§¿ÉÒÔ Ö±½ÓÑ¡ÔñÁ´½Ó¶øÎÞÂÛËüÃÇ´¦Ôںδ¦Ò²ÎÞÂÛËüÃÇÊÇ·ñ¿Éµã¡£ ¡¡¡¡ÎªÁËʹÿ¸öÁ´½ÓÖеÄÎÄ×Ö²»¿É¼û£¬ÎÒÃÇÐèÒªÔÙ¼ÓÈëÒ»²ãǶÌ×±êÇ©£¨ÒëÕß×¢ £ºÆäʵҲ¿ÉÒÔÓÃÆäËûµÄ·½·¨£¬±ÈÈçtext-indent:9999px;µÈ£©¡£ÎұȽÏÇãÏòÓÚʹÓÃ<i>±êÇ©£¬ÒòΪÔÚûÓÐÑùʽ±íµÄÇé¿öÏ£¬ÄãÒ»Ñ۾ͿÉÒÔ· ¢ÏÖËüÃÇ£¬ÕâÑù¿ÉÒÔ·½±ãÎÒÃǵŤ×÷¡£ÁíÍ⣬Õâ¸ö±êÇ©»¹±È½Ï¶Ì£¬¿ÉÒÔÌá¸ß´úÂëЧÂÊ£¨ÒëÕß×¢ £ºÀÏÍ⻹Õæbt£¬Ò»Á½¸ö×Ö½Ú¶¼¼Æ½Ï:p£©¡£µ±È»£¬ÄãÒ²¿ÉÒÔʹÓÃ<span>¡¢<em>£¬»òÕßÆäËûһЩ±êÇ©£¬ËæÄãµÄϲºÃÁË¡£


<div id="book"> <div id="menu"> <a href="index.html" id="home"><i>Home</i></a> <a href="preface.html" id="preface"><i>Preface</i></a> <a href="stories.html" id="stories"><i>Stories</i></a> <a href="galleries.html" id="gallery"><i>Galleries</i></a> <a href="forums.html" id="forum"><i>Forum</i></a> <a href="mementos.html" id="mementos"><i>Mementos</i></a> <a href="credits.html" id="credits"><i>Credits</i></a> <a href="indicia.html" id="indicia"><i>Indicia</i></a> </div> </div> ¡¡¡¡Õâ¾ÍÊÇÎÒÃÇËùÐèµÄÈ«²¿XHTML´úÂëÁË¡£ ×ÜÌå¹æ»® ¡¡¡¡ÔÚCSSÎļþÖУ¬ÎÒÃÇΪ<body>¶¨ÒåÒ»¸ö±³¾°É«² ¢ÇÒ°ÑmarginºÍpaddingÉèΪ0¡£½ÓÏÂÈ¥½«»áÓõ½¾ø¶Ô¶¨Î»£¬ËùÒÔÕâÑù×ö¿ÉÒÔ·½±ãÎÒÃǼÆËã¡£ body { background-color: #000; margin: 0; padding: 0; } ¡¡¡¡Í¼ÏñÈȵãµÄ±³¾°Í¼Æ¬±»Ó¦Óõ½Íâ²ãdivÉÏ¡£ÄãÐëÒªÉèÖÃÒ»¸öºÏÊʵĿíºÍ¸ßÀ´± £Ö¤Í¼Æ¬Äܹ»ÍêÈ«µØÏÔʾ³öÀ´¡£ #book { background-image: url(bookpages.jpg); height: 595px; width: 750px; } ¡¡¡¡ÈκÎÓ¦Óõ½´ó¶àÊýÁ ´½ÓÉϵÄÑùʽ¶¼¿ÉÒÔÒ»Æð¶¨Òå¡£¸ü¶àµÄϸ½ÚCSS¹æÔò¿ÉÒÔ¸ù¾ÝÐèÒª¸Ä±äµ¥¸öÁ´½ÓµÄÊôÐÔ¡£ËùÓеÄÁ ´½Ó¶¼Ê¹Óþø¶Ô¶¨Î»£¬²¢ÇÒ¸³¸øËüÃÇĬÈϵÄwidth,heightºÍtopÖµ¡£ÁíÍâ±ðÍüÁ˼ì²éÒ»ÏÂÁ ´½ÓµÄÏ»®ÏßÊDz»ÊÇÒѾ±»È¥µôÁË¡£ #menu a { position: absolute;


height: 38px; width: 88px; top: 31px; text-decoration: none; } ¡¡¡¡ÔÚ±£Ö¤¡°¿Éµã»÷¡±µÄÌõ¼þÏ£¬ÐèÒª°ÑÁ´½ÓµÄÎÄ×ÖÒþ²ØÆðÀ´¡£ÎÒÃÇÓÃÒ»¸öCSSÑ¡ÔñÆ÷À ´Ö¸¶¨Ç¶Ì×divÖÐÁ´½ÓµÄ¡°Ð±Ìå×Ö¡±£¬²¢ÇÒ°ÑËûÃǵÄvisibilityÊôÐÔÉèΪhidden¡£ #menu a i { visibility: hidden; } ¡¡¡¡µ±»ù±¾µÄCSS¾ÍÐ÷Ö®ºó£¬ÎÒÃÇ¿ÉÒÔ¶¨Òåµ¥¸öÁ´½ÓµÄλÖá£ÎªÁËÌá¸ßЧÂÊ£¬¼ÙÈçÁ ´½ÓÓÐÏàͬµÄleft»òtopÊôÐÔ£¬ÎÒÃǾÍÒ»Æð¶¨ÒåËüÃÇ¡£ a#credits, a#indicia { top: 531px; } a#home { left: 101px; } a#preface { left: 221px; } a#stories { left: 311px; } a#gallery { left: 431px; } a#forum { left: 526px; width: 61px; } a#mementos { left: 591px; width: 98px; } a#credits { left: 431px; } a#indicia { left: 591px; } ¡¡¡¡µ±£¨ÕâЩÑùʽ£©Ó¦Óõ½ÎÒÃÇÎĵµµÄXHTMLÉÏÖ®ºó£¬²Ëµ¥Á´½Ó¾Í¿ÉÒÔ¶ÀÁ ¢µØ¸¡¶¯ÔÚ±³¾°Í¼Æ¬Ö®ÉÏ¡£¼ÙÈçÎÒÃÇ°ÑËü·ÅÔÚͼƬÉÏ¿´ÉÏÈ¥Ïñ¸öÁ ´½ÓµÄµØ·½£¬ÄDz¶à¾Í×öÍêÁË¡£ÕýÈ·µØ·ÅÖÃÕâЩÁ´½ÓÒ»°ã¶¼Àë²»¿ª×ÐϸµÄ¼ÆËã¡¢·´¸ ´µÄÊÔÑéÒÔ¼°ÉÙ²»Á˵ĴíÎó¡£ ¡¡¡¡CSSͼÏñÈȵãʹÎÒÃÇ¿ÉÒÔÓÃ:hoverαÀàÀ´ÎªÃ¿Ò»¸öÁ ´½Ó¶¨ÒåÊó±ê¸²¸ÇºóµÄÑù×Ó¡£Ëü³äÐíÎÒÃÇÔÚ±³¾°Í¼Æ¬Ö®Éϸ¡¶¯Ò»¸öеÄͼƬµ½±»Êó±ê¸²¸ÇµÄ²»¿É ¼ûÁ´½Ó´¦¡£ a#home:hover { background-image: url(homeglow.jpg); } a#preface:hover { background-image: url(prefaceglow.jpg); } a#stories:hover { background-image: url(storiesglow.jpg); } a#gallery:hover { background-image: url(galleryglow.jpg); } a#forum:hover { background-image: url(forumglow.jpg); } a#mementos:hover { background-image: url(mementosglow.jpg); } a#credits:hover { background-image: url(creditsglow.jpg); } a#indicia:hover { background-image: url(indiciaglow.jpg); } ¡¡¡¡Ò»¸öInternet ExplorerµÄBug»áÒýÆðÊó±ê¾¹ýͼƬ²»ÏñÎÒÃÇÏëÏñµÄÄÇÑùÏûʧ£¨ÒëÕß×¢£ºÔõÃ


´Ïûʧ×Ô¼ºÊÔһϾÍÖªµÀÁË:-D£©£¬ÒªÐÞÕýÕâ¸öbugÖ»ÐèÒª¸øËùÓеÄCSSͼÏñÈȵãÁ´½ÓµÄ:hover× ´Ì¬¼ÓÉÏbrder:none¾Í¿ÉÒÔÁË¡£ a#home:hover, a#preface:hover, a#stories:hover, a#gallery:hover, a#forum:hover, a#mementos:hover, a#credits:hover, a#indicia:hover { border: none; } ¡¡¡¡ÊºóÖî¸ðÁÁ ¡¡¡¡ÓÃÒ»ÕźܴóµÄ±³¾°Í¼²»ÄܺܺõØÊÊÓ¦¸÷ÖÖ´ø¿í£¬µ«ÊÇËü¿ÉÒÔ´´½¨ÒýÈËעĿµÄÉè¼ÆÒÔ¼°¸ø¿í ´øÓû§´øÀ ´¸ü·á¸»µÄÊÓ¾õÌåÑé¡£ÒòΪCSSͼÏñÈȵãʹÓõÄÊÇ»ùÓÚ±ê×¼µÄXHTML£¬ÎÒÃÇ¿ÉÒÔʹÓÃÒ»¸öCSSÇл»Æ ÷ΪմøÓû§Ìṩһ¸öÌæ»»µÄÕ¾µãÊÓͼ¡£

my first text  

this is my first text