34歳でWebクリエイターを目指す！
今日も前進したかなぁ。
-------------------------------------------------------
私は主婦です。
パートで働いてはいますが。
（今は自宅勤務です。）
週末はお勉強を休んでいます。
育児やら、家事やらをしています。
私の基本は家庭ですから、そこが疎かになるとお勉強どころではなくなってしまいます。
家族の応援があってこそ、Webのお勉強ができるのですから。
土曜日はPCを労わります。
ハードディスクのエラーチェックをしたり、デフラグしたり、いらいないファイルを削除したり、健康診断みたいな感じですかね。
こういう積み重ねが大切だと思うのです。
PCも道具ですから、手入れしてあげないとね。
最近眼精疲労が酷いので、週末は目を休めたいという思いもありますが。
今のPCで4代目になります。
PCが突然亡くなる姿を3回目の当たりにしてますから、それが突然やってくる事は身に沁みています。
生きている間は良きパートナーとして、私を支えてくれるPCちゃん。
これからもよろしくね。
プロフィールの画像をIllustratorで描いてみました
メルマガで紹介されていたアメリカのサイトに作り方とか書いてあったんで、練習がてらレッツ！トライ！
５時間ぐらいかかっちゃった・・・。
「自分不器用なんで（高倉○風）」
イラレやフォトショップって高額だから、ソフトの入っているmac miniを会社から拝借しております。
はじめは
を買ってみたが、とてつもない量に唖然
素人でも分かる本はないの？
で買ったのがこの本です↓
後ろの方の３Ｄとかはスルーして（アハっ）、一通りやりました。
サンプルもダウンロードできるし、初心者にはいい本と思います。
次はPhotoshopにもとりかからねば！！
メルマガで紹介されていたアメリカのサイトに作り方とか書いてあったんで、練習がてらレッツ！トライ！
５時間ぐらいかかっちゃった・・・。
「自分不器用なんで（高倉○風）」
イラレやフォトショップって高額だから、ソフトの入っているmac miniを会社から拝借しております。
はじめは
を買ってみたが、とてつもない量に唖然
素人でも分かる本はないの？
で買ったのがこの本です↓
後ろの方の３Ｄとかはスルーして（アハっ）、一通りやりました。
サンプルもダウンロードできるし、初心者にはいい本と思います。
次はPhotoshopにもとりかからねば！！
昨日会社から問い合わせがあったロールオーバーの件で5時間ぐらい悩み続けました。
①いったい何が問題なのか？
②なぜPCで動くのにサーバーにのせると動かないのか？
とにかく、原因究明に乗り出しました。
一番疑われるのはjsファイルです。
今回は手抜きしてｊQuery.jsとどっかから持って帰ってきたロールオーバー.jsファイルをのせただけだったので、反省がてら（？）本を開いてコードを打ちました。
できた！
これでも問題ないだろう！
とupさせて確認
また同じ症状！！
おい～～～～！！！
jsが問題なんじゃないの～～～？？？？
こうなると意地でも解決してやる（この時点で1時間ぐらい経過）
cssか？？
cssのリンクを外して動作確認。
また同じ症状。
となるとHTMLか？
本のデータと見比べる。
問題ないじゃ～～ん（この時点で3時間ぐらい経過）
落ち着いて落ち着いて・・・・。
jsのコードはclassをふってあるコードの.gifってなってるのを_on.gifってファイルに変える動作だったよねぇ。
う～～～ん（バカなりに考えてみる）
「あっ！！」（つい声がでちゃった）
ページ毎にロールオーバーされた状態になってる（わかりづらい）
つまりですねぇ。
沢山ページがありますよね。
リストにしてメニューを並べているのですが、そのページ毎にimg srcが「_on.gif」になってるわけです。
ｊｓちゃんはとにかく( .gif)を( _on.gif)にする動作をしているわけで、そこにはじめから( _on.gif）になってるわけですから？？？？？になっちゃってって事のようです（推測）。
解決方法
①jsちゃんに「はじめから（_on.gif）になってるsrcにはこのfunctionはしなくていいよ」と書く。
②ｈｔｍｌでimg srcが（_on.gif）のclassを消す。
判断
①jsちゃんが使いこなせない現状では、どうしようもない。
②私でもできる事。
結論
②で行く！
さっそくこれでupしてみたら、おｋでした。
うれしい(^.^)
今回使ったのは本のコードまるまるです。
コードを載せておきます。
（ほとんどがまだ理解不能です。）
window.onload = function(){
var conf = {
className : 'btn',
postfix : '_on'
};
var imgNodeList = getElementsByClassName(conf.className);
var node;
for (var i=0, len=imgNodeList.length; i<len; i++) {
node = imgNodeList[i];
node.originalSrc = node.src;
node.rolloverSrc = node.originalSrc.replace(/(\.gif|\.jpg|\.png)/, conf.postfix+"$1");
preloadImage(node.rolloverSrc);
node.onmouseover = function(){
this.src = this.rolloverSrc;
};
node.onmouseout = function(){
this.src = this.originalSrc;
};
}
};
//クラス名によるエレメントノード配列取得
function getElementsByClassName(name){
var elements = [];
var allElements = document.getElementsByTagName('*');
for (var i=0, len=allElements.length; i<len; i++) {
if (allElements[i].className == name){
elements.push(allElements[i]);
}
}
return elements;
}
//プリロード
preloadedImages = [];
function preloadImage(url){
var p = preloadedImages;
var l = p.length;
p[l] = new Image();
p[l].src = url;
}
①いったい何が問題なのか？
②なぜPCで動くのにサーバーにのせると動かないのか？
とにかく、原因究明に乗り出しました。
一番疑われるのはjsファイルです。
今回は手抜きしてｊQuery.jsとどっかから持って帰ってきたロールオーバー.jsファイルをのせただけだったので、反省がてら（？）本を開いてコードを打ちました。
できた！
これでも問題ないだろう！
とupさせて確認
また同じ症状！！
おい～～～～！！！
jsが問題なんじゃないの～～～？？？？
こうなると意地でも解決してやる（この時点で1時間ぐらい経過）
cssか？？
cssのリンクを外して動作確認。
また同じ症状。
となるとHTMLか？
本のデータと見比べる。
問題ないじゃ～～ん（この時点で3時間ぐらい経過）
落ち着いて落ち着いて・・・・。
jsのコードはclassをふってあるコードの.gifってなってるのを_on.gifってファイルに変える動作だったよねぇ。
う～～～ん（バカなりに考えてみる）
「あっ！！」（つい声がでちゃった）
ページ毎にロールオーバーされた状態になってる（わかりづらい）
つまりですねぇ。
沢山ページがありますよね。
リストにしてメニューを並べているのですが、そのページ毎にimg srcが「_on.gif」になってるわけです。
ｊｓちゃんはとにかく( .gif)を( _on.gif)にする動作をしているわけで、そこにはじめから( _on.gif）になってるわけですから？？？？？になっちゃってって事のようです（推測）。
解決方法
①jsちゃんに「はじめから（_on.gif）になってるsrcにはこのfunctionはしなくていいよ」と書く。
②ｈｔｍｌでimg srcが（_on.gif）のclassを消す。
判断
①jsちゃんが使いこなせない現状では、どうしようもない。
②私でもできる事。
結論
②で行く！
さっそくこれでupしてみたら、おｋでした。
うれしい(^.^)
今回使ったのは本のコードまるまるです。
コードを載せておきます。
（ほとんどがまだ理解不能です。）
window.onload = function(){
var conf = {
className : 'btn',
postfix : '_on'
};
var imgNodeList = getElementsByClassName(conf.className);
var node;
for (var i=0, len=imgNodeList.length; i<len; i++) {
node = imgNodeList[i];
node.originalSrc = node.src;
node.rolloverSrc = node.originalSrc.replace(/(\.gif|\.jpg|\.png)/, conf.postfix+"$1");
preloadImage(node.rolloverSrc);
node.onmouseover = function(){
this.src = this.rolloverSrc;
};
node.onmouseout = function(){
this.src = this.originalSrc;
};
}
};
//クラス名によるエレメントノード配列取得
function getElementsByClassName(name){
var elements = [];
var allElements = document.getElementsByTagName('*');
for (var i=0, len=allElements.length; i<len; i++) {
if (allElements[i].className == name){
elements.push(allElements[i]);
}
}
return elements;
}
//プリロード
preloadedImages = [];
function preloadImage(url){
var p = preloadedImages;
var l = p.length;
p[l] = new Image();
p[l].src = url;
}