CSS, html, JS

結局使うことになるImagemap

レイアウトがこだわりすぎた要素に対して、こだわりすぎたリンクを設置するときにはどうしてもつかうことになる。

今回お世話になったサイト。

◆Imagemapを生成してくれるサイト
https://www.image-map.net/

◆ImagemapにHoverの能力をつけるプラグインの説明サイト
https://cror.net/jquery/jquery-maphilight.html
見てる最中にサイトが落ちちゃった

◆レスポンシブ対応させるプラグインの説明サイト

イメージマップのあのめんどくさい座標マッピングをやってくれる超便利なジェネレータ

html, JS

サイトとjsonpの文字コードが異なるせいで文字化け発生

Makeshopのサイトをいじっていて発生。
MakeshopはEUC-JP。jsonpはutf-8

beforeSendでEUC-JP指定すれば解決や！って思ったけどうまくいかなかった。

そんなときは　scriptCharset　を利用するといいらしい。

上記参考にさせていただきました。

サイトのつくりの影響かもしれないが、画面を大幅に超える大きさで表示された後にぴったりとアニメーションで調整される現象がおこった。

 $(".inline").colorbox({
inline:true,
width:"90%",
maxWidth:1020,
rel:'group',
closeButton:false
});

スマホのときは画面幅の90％でPCなどの時は1020くらいを最大にしてよっていう書き方、

色々微調整してもうまくいかなかったので、以下のように逃げました。

$(".inline").colorbox({
inline:true,
maxWidth:"90%",
rel:'group',
closeButton:false
});

.modal-content {
  max-width: 1020px;
}

とりあえずこれで回避。
原因はなんだったのだろうか。