ロールオーバー

  • # ホームページ制作について
  • Eye30
  • Userねいぷろん
  • Calender2020/06/29

解答
受付中

ロールオーバーをやりたいと思って、htmlを書いてみたのですが、うまく行きません。

とりあえずhpでロールオーバーを使うためには、何か気をつけなければいけないことがあるんでしょうか…?

教えてもらえたらうれしいです。

ご質問者様へ|この問題は解決しましたか?

コメントにより質問の内容が解決したら、解決したことをお知らせしましょう。

解決した!

みんなの回答を見る

  • Userhiguita
  • Calender2020-06-29 17:06:36

ロールオーバーでどのようにしたいのかが分かりませんが、画像にポインタを持ってくると違う画像に変わるというので良ければ、以下の方法でできます。
※HTMLとCSSの知識は必要です。

1)ファイルアップロード機能で、マウスオーバー前の画像とマウスオーバー後の画像をアップロードします。

▼ファイルをアップロードする
https://pr.toriaez.jp/navi/howto/60.html

2)ロールオーバーさせたい画像がある記事のHTMLモードを開きます。

3)以下の内容を入力して「OK」をクリックし、「上記の内容で設定」をクリックします。

--------ここから--------
<div class="rotest">●●●</div>
--------ここまで--------
※「●●●」はファイルアップロード機能でアップしたマウスオーバー前の画像のタグになります。
※「rotest」は任意の文字(半角英数字)でも大丈夫です。

▼アップロードした「画像ファイル」を使う
https://pr.toriaez.jp/navi/howto/61.html

4)CSS編集機能で、CSSの最後に以下の内容を追記し、「上記の内容で保存」をクリックします。

--------ここから--------
.rotest {
background: url("▲▲▲") no-repeat;
display: inline-block;
}

.rotest:hover img {
visibility: hidden;
}
--------ここまで--------
※「▲▲▲」はファイルアップロード機能でアップしたマウスオーバー後の画像のタグの中から「https://」で始まるURLだけを抜き出した内容です。
例)画像のタグが
<img src="https://media.toriaez.jp/○○○/0_m.png" alt="">
の場合
https://media.toriaez.jp/○○○/0_m.png
になります。
※「rotest」は3)で「class=」に設定した文字列になります。

▼CSS編集機能を活用する(β版)
https://pr.toriaez.jp/navi/howto/1864.html

もしかしたらテンプレートによってはロールオーバーにならないかもしれませんが、私はこれでできました。

記事を編集する
次のページ