http://deform.jp/prefectly/
上記のPrefectlyという地図表示オープンソースをカスタマイズしたいのですが、
方法が分からなかったので、どのように変更すればよいか教えていただければ幸いです。
■カスタマイズしたい項目
・マウスを各県の上に乗せた時に、色が変更する
・各県をクリックすると、各リンクページに飛ぶ
以上の2点です。
CSS
*************************************/ /*yahoo reset http://developer.yahoo.com/yui/reset/*/ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset, img { border: 0; } address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; } ol, ul { list-style: none; } caption, th { text-align: left; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } q:before, q:after { content: ''; } abbr, acronym { border: 0; } /*end reset*/ body { width: 800px; margin: 0 auto; font-family: "helvetica neue",arial,sans-serif; -webkit-font-smoothing: antialiased; padding: 0 0 40px; } h1 { font-size: 24px; font-weight: bold; margin: 24px 0 6px; color: #9d9d9d; } @font-face { font-family: 'prefectly-webfont'; src: url("../font/prefectly-webfont.eot"); src: url("../font/prefectly-webfont.eot?#iefix") format("embedded-opentype"), url("../font/prefectly-webfont.woff") format("woff"), url("../font/prefectly-webfont.ttf") format("truetype"), url("../font/prefectly-webfont.svg#testfontRegular") format("svg"); font-weight: normal; font-style: normal; } .prefectly { display: block; width: 800px; margin: 0 auto; padding: 160px 0 0 0; font: normal normal 800px/100% "prefectly-webfont"; font-size-adjust: none; -webkit-text-rendering: optimizeLegibility; -moz-text-rendering: optimizeLegibility; -ms-text-rendering: optimizeLegibility; -o-text-rendering: optimizeLegibility; text-rendering: optimizeLegibility; -moz-font-feature-settings: "liga=1"; -ms-font-feature-settings: "liga" 1; -ms-font-feature-settings: "liga", "dlig"; overflow: hidden; list-style: none; } .prefectly li { float: left; margin: 0 0 0 -100%; position: relative; left: 101%; width: 100%; cursor: default; -webkit-transition: all 1s ease-in; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /** Style customizations *************************************/ .prefectly { background: #f6f6f6; border-radius: 10px; border-top: 1px solid #e4e4e4; color: #dddddd; } #plain { color: #666; } #region .hk { color: #e58a8a; } #region .am, #region .at, #region .fs, #region .it, #region .mg, #region .ym { color: #e5ac73; } #region .cb, #region .gm, #region .ig, #region .kn, #region .st, #region .tg, #region .tk { color: #e5e55c; } #region .ac, #region .fk, #region .gf, #region .ik, #region .ng, #region .nn, #region .so, #region .ty, #region .yn { color: #7acc7a; } #region .hg, #region .kt, #region .me, #region .nr, #region .os, #region .sg, #region .wk { color: #7acccc; } #region .hs, #region .oy, #region .sn, #region .tt, #region .yg { color: #7a96cc; } #region .to, #region .ka, #region .eh, #region .ko { color: #a37acc; } #region .fo, #region .kg, #region .km, #region .mz, #region .ns, #region .on, #region .ot, #region .sa { color: #cc7abe; }
HTML
<html lang="en"> <head> <meta charset="utf-8"> <title>Prefectly | The simple map font</title> <meta name="description" content="Prefectly | The simple map font"> <meta name="author" content="Hiroto Sugita"> <link rel="stylesheet" href="assets/css/prefectly.css?v=1.0"> </head> <body> <h1>Region</h1> <ul class="prefectly" id="region"> <li data-pref="ac" class="ac">A</li> <li data-pref="am" class="am">B</li> <li data-pref="at" class="at">C</li> <li data-pref="cb" class="cb">D</li> <li data-pref="eh" class="eh">E</li> <li data-pref="fk" class="fk">F</li> <li data-pref="fo" class="fo">G</li> <li data-pref="fs" class="fs">H</li> <li data-pref="gf" class="gf">I</li> <li data-pref="gm" class="gm">J</li> <li data-pref="hg" class="hg">K</li> <li data-pref="hk" class="hk">L</li> <li data-pref="hs" class="hs">M</li> <li data-pref="ig" class="ig">N</li> <li data-pref="ik" class="ik">O</li> <li data-pref="it" class="it">P</li> <li data-pref="ka" class="ka">Q</li> <li data-pref="kg" class="kg">R</li> <li data-pref="km" class="km">S</li> <li data-pref="kn" class="kn">T</li> <li data-pref="ko" class="ko">U</li> <li data-pref="kt" class="kt">V</li> <li data-pref="me" class="me">W</li> <li data-pref="mg" class="mg">X</li> <li data-pref="mz" class="mz">Y</li> <li data-pref="ng" class="ng">Z</li> <li data-pref="nn" class="nn">a</li> <li data-pref="nr" class="nr">b</li> <li data-pref="ns" class="ns">c</li> <li data-pref="on" class="on">d</li> <li data-pref="os" class="os">e</li> <li data-pref="ot" class="ot">f</li> <li data-pref="oy" class="oy">g</li> <li data-pref="sa" class="sa">h</li> <li data-pref="sg" class="sg">i</li> <li data-pref="sn" class="sn">j</li> <li data-pref="so" class="so">k</li> <li data-pref="st" class="st">l</li> <li data-pref="tg" class="tg">m</li> <li data-pref="tk" class="tk">n</li> <li data-pref="to" class="to">o</li> <li data-pref="tt" class="tt">p</li> <li data-pref="ty" class="ty">q</li> <li data-pref="wk" class="wk">r</li> <li data-pref="yg" class="yg">s</li> <li data-pref="ym" class="ym">t</li> <li data-pref="yn" class="yn">u</li> </ul> </body> </html>
回答1件
あなたの回答
tips
プレビュー