画像の上にマウスを移動して回転させる

コンテンツ

説明書
必要なもの

"onMouseOver"関数（ "hover"とも呼ばれる）は、マウスカーソルがオブジェクトの上に置かれたときにユーザーインターフェイスでアクションをトリガーするJavaScriptイベントです。 JavaScriptは主にWebページで使用されるため、イベントは通常、JavaScriptコードが書かれているページ上の何かを変更します。 onMouseOver関数をオンラインの画像編集Webサイトの「回転」ツールと組み合わせて使用すると、ユーザーがマウスカーソルを画像の上に置くとトリガーされる画像のスピン効果を作成できます。

説明書

"onMouseOver"ツールの使い方を学ぶ （Michael Blann / Lifesize / Getty Images）

デフォルトのブラウザを起動し、アドレスバーにオンラインの画像編集サイト（Pixenate、Pixlr、LunaPicなど）へのリンクを入力して、[Enter]キーを押します。
「編集する画像を選択」リンクまたは「コンピュータから画像を開く」ボタンをクリックして、回転させたい画像を送信します。画像をクリックして選択し、「開く」をクリックします。ファイルをアップロードするには、[この画像をアップロード]をクリックします。
画像編集ツールバーの[回転]ツールをクリックするか、[画像]をクリックして[キャンバスを回転]を選択します。回転の程度と設定をクリックして選択し、[ディスクに保存]または[ファイル]をクリックしてから[保存]をクリックします。回転した画像を元の画像ファイルと同じディレクトリに保存します。
デフォルトのHTMLエディタを起動します。 HTMLエディタがない場合は、「参考文献」セクションの「Free HTML Editors」リンクをクリックしてください。新しいHTMLドキュメントを作成します。
[ファイル]メニューをクリックして[保存]を選択します。ドキュメントの名前として「rotate.html」を入力し、保存ディレクトリとして「image1」と「image2」ファイルを含むフォルダを選択します。「保存」をクリックしてください。
新しいHTML文書で ">"タグと ""タグを見つけます。クリックして2つのボディマークの間にマウスカーソルを置き、次に[Enter]を押して新しい行を作成します。
空白の行に次のように入力し、テキスト "rotateimage.gif"を回転させた画像の名前に、テキスト "originalimage.gif"を元の画像の名前に置き換えます。

「Enter」を押して新しい行を作成してください。
次のように入力してください。

Enterキーを押してください。
タイプ：

[ファイル]メニューをクリックして[保存]を選択します。
デフォルトのブラウザで開くには、「rotate.html」ファイルをダブルクリックします。画像の上にマウスを置くとスピン効果が表示され、マウスカーソルを画像の外に移動すると回転せずに元の位置に戻ります。