スポットライト

jQueryを使ったスポットライトというプラグインがあったので試しに使ってみた。
その名のとおり、暗い画像の中に1点のライトが当たっているような感じである。目立たせたいときにつかえるかも知れない。
ダウンロード場所はつぎのとおり
http://code.google.com/p/spotlight-jquery/downloads/list

組み込んだソースコードは次のとおり

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Spotlight v1.1 Example</title>
<script type="text/javascript" src="http://sample.sakuraweb.com/js/jquery.min.js"></script>
<script type="text/javascript" src="http://sample.sakuraweb.com/js/jquery.spotlight-1.1-min.js"></script>

<script type="text/javascript">
$(function() {
  $('#header_img').spotlight( {
    overLayer: "headerOver",
    spotLightImage: 'http://sample.sakuraweb.com/img/spotlight.png',
    overLayerBg: '#000'
  });
});
</script>

<style type="text/css">
#header_img {
    position: relative;
    width: 700px;
    height: 200px;
    border: 1px solid black;
    background: url(http://sample.sakuraweb.com/img/header.png) no-repeat;
    overflow: hidden;
}
</style>
</head>

<body>
<div id="header_img">
 <div id="headerOver"><img src="http://sample.sakuraweb.com/img/spotlight.png" width="136" height="135" alt=""></div>
</div>

</body>
</html>

使っている画像は次の２つ。

  • header.png　　（スポットライトを当てる元画像）
  • spotlight.png　（スポットライト画像）

サンプル