Web technology Tips

Q画像を変更せずにズームマークを付けられますか?

はい、可能です。やり方は、いくつか方法があります。

ここでは、「スタイルシート + ちょっとだけ JavaScript ライブラリ」で行う、比較的簡単な方法を説明します。スタイルシート?! と聞いただけで少し後ずさりする方もいらっしゃるかもしれません。しかし、このからくりは難しそうに見えて実は簡単に実装できます。それでは、レッツトライ!!

image

image

まずは、上の２つの画像を見比べてください。云われるまでもなく一目瞭然でお分かりですよね。これらは同一画像ですが、左側の画像にはプラス記号が左上隅に付いています。右側の画像にはそれが付いていません。これはスタイルシートのクラス属性値(class="値")をもとに、プラス記号が付いたり付かなかったりします。

要となるのは、スタイルシートの position プロパティです。この position プロパティは、ボックスの配置方法を決めるプロパティです。指定できる値には、static (通常配置)、relative (相対配置)、absolute (絶対配置)、fixed (固定配置) があり、初期値は static となっています。つまり、positon プロパティが指定されていない要素は、static となりブロックボックスは垂直方向に上から下へ配置され、インラインボックスは水平方向に配置されます。では、今回使用するソースを見てみましょう。

.zoom {
	position: relative;
}
img.zoom_icon {
	position: absolute;
	top:-10px;
	left: -7px;
}
<p class="zoom">
<img class="zoom_icon" src="zoomIcon.png" />
<a href="image.png"><img src="image-thumb.png" /></a>
</p>

上がスタイルシートのセレクタと宣言ブロック、下が HTML ドキュメントへ書き入れるマークアップです。構造は、p 要素に包含する img 要素が２つ。ひとつはメイン画像で、もうひとつはプラス記号の画像となっています。通常配置だと、この２つの画像は横に並んで表示されると思います。

ここで position プロパティを宣言してプラス記号を左上に配置してみましょう。 p 要素に position プロパティの relative を指定して、プラス記号画像の img 要素に absolute を指定すると、プラス記号画像は p 要素のパディング辺の基点へ配置します。absolute が指定された要素は、static 以外の値が指定されている直近の祖先ボックスを基点にすることから配置されます。該当するボックスが存在しなければ、ルート要素(htm 要素)へ配置します。あとは、top、left プロパティを使ってプラス記号画像の位置を微調整します。

さぁ、これで画像に変更を加えることなくズームアイコンを配置できるようになりました。しかし、毎回ズームアイコンを設置するのは手間ですよね。そこで、JavaScript ライブラリを利用して半自動でズームアイコンを配置する方法があります。

<head>
    ...
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.2.6");</script>
    <script type="text/javascript">
    $(function(){
        $('.zoom a img').before('<img src="zoom_icon.png" alt="image" width="23" height="21" class="zoom_icon" />');
    })
    </script>
    ...
</head>

上記ソースを head 要素内に書き入れることで、class 属性値に zoom があれば包含する a 要素に含まれる img 要素の前にプラス記号の img 要素を挿入します。

<p class="zoom">
<a href="image.png"><img src="image-thumb.png" /></a>
</p>