外部ファイルで同じ設定でロールオーバーを設定しているのですが
ポイントを合わせると画像が動く(ボタンでよくある下にへこむような動作)ものと動かないものが出てきます。
ロールオーバー自体はできているのですがその動きの違いは何なのでしょうか?
できれば全て動くようにしたいのですが…
<外部ファイル>
if (document.images) {
var img1on = new Image();
img1on.src = "img/c2.png";
var img1off = new Image();
img1off.src = "img/c1.png";
}
function On(name) {
if (document.images) {
document.images[name].src = eval(name + 'on.src');
}
}
function Off(name) {
if (document.images) {
document.images[name].src = eval(name + 'off.src');
}
}
<html>
<p>
<a href="home.html" onMouseOver="On('img1')" onMouseOut="Off('img1')"><img src="img/c1.png" alt="ホームへ" name="img1" border="0"></a>
</p>
これ以上のことはしていません。(全て統一でこのタグの
画像の名前やリンク先しかいじっていません。)
今貼り付けたものはへこむ動作はせずにロールオーバーのみが可能なものです。
誰か教えていただけませんでしょうか?
またへこむような動作はどこで設定されているのでしょうか?
色々調べてはいるのですが初心者なもので分かりません…
宜しくお願い致します。
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
結構ソースをいじってしまいましたが。
。<script>
//マウスオンの時のスクリプト
function On(name) {
if (document.images) {
document.images[name].src = "c" + name + "_on.png";
}
}
//マウスオフ時のスクリプト
function Off(name) {
if (document.images) {
document.images[name].src = "c" + name + "_off.png";
}
}
</script>
<p>
<a href="home.html" onMouseOver="On(0)" onMouseOut="Off(0)">
<img src="c0_off.png"></a>
<a href="home.html" onMouseOver="On(1)" onMouseOut="Off(1)">
<img src="c1_off.png"></a>
<a href="home.html" onMouseOver="On(2)" onMouseOut="Off(2)">
<img src="c2_off.png"></a>
</p>
こちらでいかがでしょう。
チェックブラウザはfirefox3.5のみです。
ie系だと動かないような気もしますが、チェックしてみてください。
ieで動かない場合はアドイベントで動くようになります。
アドイベントもさらにめんどくさい処理が必要なのですが。。
No.1
- 回答日時:
ご提示のスクリプトは、イメージをロールオーバーしているだけの機能のものです。
(記述方法には、少々疑問な点がいくつかありますが…)
>ポイントを合わせると画像が動くものと動かないものが出てきます。
全てに同じ画像を使用しているのでしょうか?
基本的に、マウスのオン・オフで画像を入替えるだけの機能ですから、マウスオンのときの画像(c2.png)にボタンが押された状態の画像、マウスオフのときの画像(c1.png)に通常の状態の画像を設定してあげれば、マウスオンによって下にへこむように見えることになりますが、そういうことではないのでしょうか?
もっとも、ボタンの押下げって通常の操作でいうとマウスクリックに当たるので、マウスオンでこのような動作をするのは、どうもギミック的で個人的には好きになれませんけど…
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- PHP 共通の処理をまとめる方法がわからないのでアドバイスお願いします。 1 2022/12/19 20:20
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript gasについて 1 2022/05/31 21:51
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
複数のバナーをリロードする度...
-
window.openで値の渡し方を教え...
-
一定時間ごとにgif画像の切...
-
jQueryでサーバー上のファイル...
-
画像をクリックすると別ウイン...
-
outlook2010の不具合で困ってい...
-
タイマーをデジタル時計風にす...
-
MAX関数を使ってからLEFT JOIN...
-
MFCで画像を表示させているので...
-
JavaScriptで変更した属性の元...
-
Gifアニメ、最後のコマに行った...
-
クリックで色変更後に既に変更...
-
createElementが一瞬で消えてし...
-
デフォルト非表示にしたい。【t...
-
javascriptテキストBOX色を元に...
-
iframe内のリンクが飛ばないの...
-
Slick.jsのオプションrtlについて
-
onmouseoverの表示切り替えが上...
-
html スクロール要素を下から表...
-
javascriptで教えてください。 ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
window.openで値の渡し方を教え...
-
JavaScriptで画面サイズによっ...
-
jQueryでサーバー上のファイル...
-
画像と文字を同時に切り替えたい
-
インラインフレームでのクッキ...
-
setAttributeによる画像の差し替え
-
【jQuery】複数の画像の読み込...
-
JAVAで画像をボタンで切り替え...
-
画像の座標位置取得
-
連番画像「次へ」「前へ」で、...
-
imgのsrcに値を設定するには
-
画像をクリックすると別ウイン...
-
複数のボールの落下、バウンド...
-
連続したURLへのwindow.openの...
-
JavaScriptで画像置換えてクリ...
-
<img src"○.jpg">の○をランダム...
-
スライドショーにフェード効果...
-
jQueryで画像を重ねる
-
クリッカブルマップでリモート...
-
複数のバナーをリロードする度...
おすすめ情報