リンクしている画像に影を付ける

実物

画像に影を付け、なおかつ、カーソルover時にフレームの色を変更するようにしてみた。
神流湖バス通信の死魚祭@2007の「内容」にある写真2枚で試して頂きたい。

解説

まず、アップロードした画像に影をつけるにはを行う。

今回、当サイト向けに変更した内容を紹介。

html


<p class="photo">
<a href="../image/2007/0103aL.jpg" rel="lightbox">
<img src="../image/2007/0103a.jpg" alt="死魚祭豪華賞品。" width="192" height="144"/>
</a>
</p>
Lightbox Plusでリンクしている画像(0103a.jpg)をp要素でマークアップする。p要素はphotoクラスとした。

css


p.photo
{
float: right;
background: url(../image/shadowAlpha.png) no-repeat bottom right !important;
background: url(../image/shadow.gif) no-repeat bottom right;
margin: 10px 5px 10px 15px !important;
margin: 10px 5px 10px 10px;
}

p.photo img
{
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -5px 5px 5px -5px;
padding: 5px;
}

nlog(n)さんところを参考にCSSを記載。

cssカーソルover分


p.photo a:hover,
p.photo a:active
{
background-color: #fcc;
}

p.photo a:hover img,
p.photo a:active img
{
background-color: #fcc;
border: 1px solid #ffa9a9;
}

p要素およびimg要素両方に背景色を指定すると、写真のフレームの部分の色が変更されます。

手こずった点は、img要素のみの宣言だとIE6では不完全となりました。
p要素も宣言する事でIE6でも大丈夫でした。

あと、doctype宣言で互換モードの場合は試しておりません。

特に問題が出なければこのまま使おうと思います。

lightbox+を試してみた

Lightbox Plusより、
神流湖バス通信でlightbox+を使ってみた。


サムネールをクリックすると同一ウィンドウ上に画像を表示するというLightbox JSの拡張版。


果たしてうちのサイトはクールに見えるのだろうか?

ちなみに、
[神]ルアープレゼント企画-神流湖バス通信なんてものをやってます。
23日までにクイズに答えるとバス用のルアー3つをプレゼント致します。
気軽にご応募ください。

Gps情報付き写真をGoogleMapで表示する

[神]GPS画像をGoogleMapに表示-神流湖バス通信というスクリプトを作成した。

元ネタはPHPへの扉のet's Exif Viewer。
GoogleMapは文字コードUTF-8のみ対応らしく、
出力をEUC-JPからUTF-8に変換して出力したら動いた。

バージョン管理をCVSで行う

CVSでバージョン管理を行うように設定したので、そのメモ。

参照先はMac OS X : Software Install Memoから、

実際の手順

1. ~/.bash_profileにexport CVSROOT=$HOME/CVSROOTを追加してパスを設定する


2. リポジトリ格納用ディレクトリの作成と初期化

$ mkdir ~/cvsroot
$ cvs init


3. リポジトリにプロジェクトを登録する(モジュールを作成する)
実際のプロジェクトをphp_testという名前で登録する。

$ cd ~/projectName
$ cvs import -m "Project since 2006" php_test hoge first


4. システム環境設定の「共有」からリモートログインを開始する

但し、MacOSXEclipse から localhostCVS を使う場合は工夫が必要。なぜか pserver では使えない。extssh を設定する必要あり。

とのことで、同様に実施。
Connection type: extssh
User: hoge
Host: localhost
Repository path: /Users/hoge/cvsroot
Save passwordにチェック。


5. Eclipseを起動して共有してソースを取得

CVSの使い方を覚えていかないと。

XdebugをOSXにインストールしようとしたが

外部のPHPインタプリタが選択できるようになったので、
PHPXdebugを追加しようと思った。

Do You PHP? - Xdebugを導入してみる - JavaのStackTraceが欲しい!を参考に行ってみたのだが、アパッチが起動するときエラーになってしまい断念。


一応行った事をメモしておく。

1.アップルのCDからXcodeをインストール
2.PECL :: Package :: Xdebugからxdebug-2.0.0RC1.tgz (246.4kB)をダウンロード
3.Xdebugのソースをコンパイル。道中re2cがないと怒られたので急遽こちらを先にコンパイルした
4.makeしてインストール
5.apache再起動


しかし、

/usr/sbin/apachectl: line 193:  2466 Trace/BPT trap          $HTTPD
/usr/sbin/apachectl start: httpd could not be started
となり起動できない。


とりあえずTruStudioについてるXdebugデバッグは進める事にしよう。