javascriptすすめたよ

おはこんばんにちは、HP作りの進行が全く進んでいないうぷ主です。

今回は少しだけJavaScriptを書いたので残しておきます。

jsファイルを新しく作ってhtmlファイルとリンクさせながらカーソルが写真上にあるときに

画像を変える、下についている文字を変える

この二つを解説していきます。

まず、カーソルが写真上にあるかないかの判定をonmouseoverとonmouseoutでしていきます。書き方としてはonmouseover="関数名();"でjsファイルにとんで変更内容の記述、文字の場合は括弧の中に変えたいテキストを書いておきます。

あとはどの場所を変えてよいかわかるようにid(classみたいなもの、classとは違い、同じidは使用できない)を設定してjsファイルの方で認識させます。

上がhtmlファイルの変更部分で下がjsファイルの中身です。

jsファイルの方では上二つの関数が画像変更の関数、下二つが文字の変更をさせる関数です。

document.getElementByIdでhtmlファイルのidを認識して、その場所に行う動作を書き込みます。下の関数ではhtmlファイルでの関数宣言の時に書き込んだ文字を受け取り、代入する形で出力するようにしています。

.srcは画像、.innerHTMLはHTMLのところに書き込むということをいっている、、、と思います…

結果できたHPを載せておきます。

一枚目、二枚目は画像にカーソルを載せた時の画像の変化と三，四枚目は画像の下の文字を画像にカーソルを合わせた時に変更した結果です。

かなりかかってんですけど、進捗はこれだけなんです...

なので今考えていることをつけ足して終わりにしようと思います。

今考えているのは今まではサーバを借りずに自分のパソコン内だけでしかHPが見れなかったのを新しくサーバを借りてwordpressかVScodeと合わせてHPを作って外からも見れるようにしようと考えています。

あと、javascriptで3Ⅾ図形を出せるとのことでしたのでそれを使ってみようかなと考えています。

最終的な目標としてはhttps://www.suissemania.ch/のようなサイトでバーチャルアカウントが移動できるようなサイトを作ってみたいと思ってます。感じとしてはサマーウォーズのOZに近いものかな。

それについて、three.jsやwebglをちょっとみて、あとはphpとjqueryがどんなものかを確認してからサイト作りをするのかなって感じです。

これからはhtmlやcssのような簡単なものでなくなってくるから更新が遅れるかも...

おわりんぬ