gimpでイメージマップを作ったけど、iPhone seとか iPhone chrome だとリンクがうまく出来ないので、jQuery の rwdImageMaps を使ってレスポンシブ対応して見ました。
GitHub から js ファイルをコピー
まず、jquery.rwdImageMaps.js を GitHub からダウンロードするか js ファイルをコピー＆ペーストします。
ここでは、コピー＆ペーストをします。
GitHub のサイトの青で囲んだリンクをクリックで jquery.rwImageMap.min.js のコードが表示されたページが開きます。
min の方が改行の無いぶん少し軽いです。
これをコピーして、テーマの <head> 内にペーストします。
その前に jQuery の本体を google の cdn 版から読み込むようにします。
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
↑の部分はこのテーマでは記述がありましたので、スルーしてます。
先ほどのページでコピーした js ファイルをペーストします
js ファイルのスクリプト
<script>/** rwdImageMaps jQuery plugin v1.6** Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize** Copyright (c) 2016 Matt Stow* https://github.com/stowball/jQuery-rwdImageMaps* http://mattstow.com* Licensed under the MIT license*/;(function(a){a.fn.rwdImageMaps=function(){var c=this;var b=function(){c.each(function(){if(typeof(a(this).attr("usemap"))=="undefined"){return}var e=this,d=a(e);a("<img />").on('load',function(){var g="width",m="height",n=d.attr(g),j=d.attr(m);if(!n||!j){var o=new Image();o.src=d.attr("src");if(!n){n=o.width}if(!j){j=o.height}}var f=d.width()/100,k=d.height()/100,i=d.attr("usemap").replace("#",""),l="coords";a('map[name="'+i+'"]').find("area").each(function(){var r=a(this);if(!r.data(l)){r.data(l,r.attr(l))}var q=r.data(l).split(","),p=new Array(q.length);for(var h=0;h<p.length;++h){if(h%2===0){p[h]=parseInt(((q[h]/n)*100)*f)}else{p[h]=parseInt(((q[h]/j)*100)*k)}}r.attr(l,p.toString())})}).attr("src",d.attr("src"))})};a(window).resize(b).trigger("resize");return this}})(jQuery);</script>
続けて、スクリプトを実行さす記述をします
<script>
$(document).ready(function(e){
$(' img[ usemap ]').rwdImageMaps();
});
</script>
これでうまくリンクできるようになりました。
イメージマップをGIMPで作る方法は、gimpmanual サイトのイメージマップのページに書いています。
0 comments