Q&A
具体的にどのようなものですか？クリッカブルマップはJS使わなくていいんですが、JSと言ってるあたりが気になります。
bootstrapでクリッカブルマップを使わなければいけない時はどうしますか？
やはりjsに頼るしか方法はないのでしょうか？
回答2件
0
ベストアンサー
あ…、もしかしてレスポンシブでのクリッカブルマップですかね？
その場合は座標が変わってくるのでJSになりますね～
各ブレークポイントで固定幅の画像を用いて…
positionを利用して疑似的に…
とか考えられるような気がしますが、のちのち面倒そうなのでやっぱりJSでやるのがいいと思います。
投稿2016/11/14 16:52
総合スコア2722
すみません。その通りレスポンシブでのクリッカブルマップです。
さらにbootstrapを使ってます。
通常bootstrapではimg-responsiveのクラスを使うと思いますが
上記jsでは画像にはサイズを指定しておくとか色々ググると出てきまして
どの設定が正解なのかわからなくなってきてます。。。。。
<img src="hoge.jpg" class="img-responsive">
ではなく
<img src="hoge.jpg" width="400" height="300">
などと記載すればよいでしょうか？
img-responsiveは付けといてOKですよ～
<img class="img-responsive" src="hoge.jpg" width="400" height="300">
この幅と高さとarea要素の座標が基準になるって感じですね。
これを基準にして拡大縮小の際の計算をする…はずｗ
これでトライして見ます。
クラスも定義して幅と高さ指定なんですね。
無事できました
Dwでクリッカブルマップの指定をしていたのですが(楽だからw)
画像サイズの指定がバグなのか、デザイン画面でおかしくて(width="400"の指定なのに小さく表示されてた)再設定したら大丈夫でした
ありがとうございます。
<script>
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
})
</script>
の記述がマップ部分より先にないと駄目との情報もありましたが後でも問題なく出来ました。
0
.visible-xs-inline-block. 等をつかってサイズごとにマップを張る
投稿2016/11/15 03:52
退会済みユーザー
総合スコア0
サイズが決まってればいいんですけどね。
サイズはデバイスの幅で可変するので。。。
サイトを見に行けばわかったはずですが xs sm md lg の四パターン以外ということでしょうか？
マップは座標だと思うので
画像サイズが決まっていれば問題ないですが
width="100%"でxs sm md lg の四パターン内でも可変しますので
厳密にはxs smのみ可変する仕様です
「各ブレークポイントで固定幅の画像を用いて…」ってパターンですね。
これでもいけると思いますよ～
ただ画像に修正が入ってクリッカブルの位置がずれたりする場合に全部変更しなきゃダメなんですよね…
あなたの回答
tips
プレビュー
