JavaScriptのページを調べてみたのですが有効な方法がないので
教えてください。よろしくお願いします。

例えば、TOPなどの画像をポイントすると、違う画像が表示され、
ポイントをはずすとまた最初の画像が表示されるようにする方法は
ありますでしょうか。
ご存知の方がいらっしゃいましたら、回答をお待ちしております。
よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

JavaScriptは分かりませんが、IBMホームページビルダーでは簡単です。

キーワードは「ロールオーバー効果」です。
    • good
    • 0
この回答へのお礼

ソースを調べてやったのですがうまく動作せず、
教えていただいたHPBでできました!
どうもありがとうございました!

お礼日時:2001/12/15 22:28

#1の続きです。


「JavaScript」と「ロールオーバー効果」でAND検索すると、実現方法を開示したページが見つかります。
    • good
    • 0
この回答へのお礼

探した結果ソースを入れたのですがうまく動作しなく、
HPBでできました。
回答ありがとうございました。
また質問させていただくこともあるかと思うのですが
その時はよろしくお願いいたします。

お礼日時:2001/12/15 22:28

こんな感じでしょうか、、、



top.html:画像をクリックしたときのリンク先
top_1.gif:マウスをポイントしていないときの画像
top_2.gif:マウスをポイントした時の画像

#=================================================
<SCRIPT language=JavaScript>
<!--
if( (navigator.appName == "Netscape") || (navigator.appName == "Microsoft Internet Explorer") ){
if(navigator.appVersion.charAt(0)>=3)
{
outImg=new Array()
outImg[1] = new Image();outImg[1].src='top_1.gif';
outImg[2] = new Image();outImg[2].src='top_2.gif';
}
}

// change image
function changImg(target,imgNo)
{
if( (navigator.appName == "Netscape") || (navigator.appName == "Microsoft Internet Explorer") ){
if (navigator.appVersion.charAt(0)>=3){
document.images[target].src=outImg[imgNo].src;

}
};
};
//-->
</script>

<a href="top.html" onMouseOver="changImg('top','2');" onMouseOut="changImg('top','1')">
<img src="top_1.gif" name="top" border="0"></a>
#=================================================
    • good
    • 0
この回答へのお礼

細かに教えていただいて嬉しかったです。
が、うまく動作しませんでした クスン
結局HPBでやりました。
でも、ご協力ありがとうございました!

お礼日時:2001/12/15 22:29

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

Q画像をコピー、ペーストすると画像の上にラインが?

自分が運営しているホームページの画像をマウスで右クリックしMS Wordに貼り付けると、画像の上部にグレーの線みたいなものが表示されてしまいます。

このグレーの線は、画像の上部に接触していて高さ2px位ですが、画像の高さをMS Word上でいじると、この線の高さも変わります。横幅は、画像と同じです。

MS Word上でその画像を選択すると、この線は選択範囲から外れているので、画像の一部ではなさそうです。ですが画像を移動させてもくっついていて離れません。

現在のところ、この現象は、私のホームページの画像をコピーペーストした場合のみで、他者の運営しているホームページの画像をコピー、MS wordにペーストした場合は、こうなりません。

スタイルシートやHTMLコードが影響しているのかと思い、ためしに全部消して、そのページに表示されるものを1枚の画像のみにしましたが、その画像をコピー、MS Wordにペーストすると、それでも画像の上部にグレーの線みたいなものが表示されてしまいます。

どなたか、理由をおしりですか?

画像編集にはFireworks MX 2004を使用しています。

よろしくお願いします。

自分が運営しているホームページの画像をマウスで右クリックしMS Wordに貼り付けると、画像の上部にグレーの線みたいなものが表示されてしまいます。

このグレーの線は、画像の上部に接触していて高さ2px位ですが、画像の高さをMS Word上でいじると、この線の高さも変わります。横幅は、画像と同じです。

MS Word上でその画像を選択すると、この線は選択範囲から外れているので、画像の一部ではなさそうです。ですが画像を移動させてもくっついていて離れません。

現在のところ、この現象は、私のホーム...続きを読む

Aベストアンサー

印刷プレビュー表示でグレーが表示されるかどうか、確認してみてください。
表示されない場合は、画像がリンクになっているからだと思います。
[ツール]→[オプション]→[表示]で、「フィールドの網かけ表示」で「表示しない」を選択すると、グレーが消えませんか?

Q_top:100とtop:100の違いは何でしょう

CSS勉強中なのですが、画像の配置などで使われている、「top:100;」はマージン100pxの事だと思うのですが、「_top:100」は何が違うでしょうか?

どうぞよろしくお願いいたしますm(__)m

Aベストアンサー

ことだと思うのですが・・・ではありますが、いずれも、文法的には誤った記述です。
top:100pxと書かなければなりません。
【引用】____________ここから
長さの値(<length>で示す)は、任意の正負符号(デフォルトはプラス)の後に、<number>(小数点以下は任意)と単位識別子(例:'px'、'deg')が続く形式である。 長さが'0'なら単位識別子は省略できる。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[CSS2の構文と基本データ型( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/syndata.html#length-units )]より
【引用】____________ここから
The format of a length value (denoted by <length> in this specification) is a <number> (with or without a decimal point) immediately followed by a unit identifier (e.g., px, em, etc.). After a zero length, the unit identifier is optional.
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Syntax and basic data types( http://www.w3.org/TR/CSS2/syndata.html#length-units )]より
 後ろの英文は、CSS2.1のものです。微妙にCSS2から変更されています。

 簡単に言うと、0のときのみ単位が省略できる。
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 また、_top:は本来は無効であるべきなのですが、IE6は、これをtop:として解釈するバグがあります。それを利用して、IE6用にスタイルを記述しなおすことがかって行われていましたが、IE自体、マイクロソフトが抹殺キャンペーンをしているブラウザで、現在は対処する必要はないでしょう。

 よって、勉強中でしたら、一切覚える必要のないプロパティとその値の書き方です。

 そんなプロパティの細かいことより、重要なカスケーディングを勉強しましょう。カスケーディングスタイルシートとことわるくらい、もっともっと大事なことです。
5. セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html )
6. 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html )

ことだと思うのですが・・・ではありますが、いずれも、文法的には誤った記述です。
top:100pxと書かなければなりません。
【引用】____________ここから
長さの値(<length>で示す)は、任意の正負符号(デフォルトはプラス)の後に、<number>(小数点以下は任意)と単位識別子(例:'px'、'deg')が続く形式である。 長さが'0'なら単位識別子は省略できる。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[CSS2の構文と基本データ型( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/syndata.html#length-u...続きを読む

QCSSで菱形の画像サムネイルを表示し、クリックで元画像を表示させたい

タイトル通りです。
ギャラリーホームページを作っています。
菱形のサムネイルを並べ、クリックしたら元の画像が表示されるようにしたいと思っています。
jQuery?を使えるのが一番なのですが、うまく適用せず、よく分かりませんでした。
CSSでタイトルのような事をするためには、どのようにすればいいでしょうか?

Aベストアンサー

html
<ul>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
</ul>

css
li{
width: 150px;
height: 150px;
overflow: hidden;
position: relative;
transform: rotate(45deg);
margin: 40px;
float: left;
}
li img{
position: absolute;
width: 250px;
height: 250px;
transform: rotate(-45deg) translate(0%, -120%);
left: 100%;
top: 100%;
}

親で正方形を45度傾けたマスクを作り
imgで傾いちゃった画像を元に戻し、
rotate(-45deg)
適当な位置に調整しています。
translate(0%, -120%);
left: 100%;
top: 100%;
クリックすれば、リンクに張られたURLが開きます。

html
<ul>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a></li>
<li><a href="test1.jpg"><img src="test1.jpg"></a><...続きを読む

Qcssで『top』ではなく『_top』とアンダーバーが付いているのは何ですか?

formのcssレイアウトの参考にいろいろ検索していたんですが、
その中で『_top』というプロパティを使用している例がありました。
初めて見たので自分で調べてみたのですが、わかりませんでした。
これはどのように使うものなのですか?
当方初心者なので基本的な事でしたら申し訳ありません。

ちなみにこちらのサイトに以上の事が出ていますが、内容を貼り付けておきます。
URL:http://hatenachips.blog34.fc2.com/blog-entry-206.html
【内容】
<form name="searchform2" id="searchform2" action="./" method="get" value="" maxlength="200">
<p class="plugin-search">
<input type="text" name="q" id="keywords2" onfocus="if (this.value == 'Keyword(s)') this.value = '';" onblur="if (this.value == '') this.value = 'Keyword(s)';" value="Keyword(s)"/ >
<input type="image" src="http://blog-imgs-29-origin.fc2.com/h/a/t/hatenachips/btn2.gif" alt="hatena chips 内の検索" name="searchBtn2" id="searchBtn2" />
</p>
</form>

*****************

#searchform2 {
position: relative;
}
#keywords2 {
width: 182px;
height: 16px;
background-color: #666;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-bottom: 1px solid #888;
border-right: 1px solid #888;
padding: 4px;
color: #ddd;
}
#searchBtn2 {
position: absolute;
top: 0;
_top: 1px;  ←――――――――これです!!――――――――
left: 190px;
background-color: #666;
border-top: 1px solid #000;
border-left: none;
border-bottom: 1px solid #888;
border-right: 1px solid #888;
}
*:first-child + html #searchBtn2 {
top: 1px;
}

formのcssレイアウトの参考にいろいろ検索していたんですが、
その中で『_top』というプロパティを使用している例がありました。
初めて見たので自分で調べてみたのですが、わかりませんでした。
これはどのように使うものなのですか?
当方初心者なので基本的な事でしたら申し訳ありません。

ちなみにこちらのサイトに以上の事が出ていますが、内容を貼り付けておきます。
URL:http://hatenachips.blog34.fc2.com/blog-entry-206.html
【内容】
<form name="searchform2" id="searchform2" action="./"...続きを読む

Aベストアンサー

それは「アンダースコアハック」といって、「属性名として無効だ
から無視されるはずなのに古代のIEがアンダースコアだけ無視して
属性として有効にしちゃうバグ」を使い、古代のIEにだけ他のブラ
ウザと違う指定をする小細工です。

標準準拠になるようマジメにHTMLを書く癖をつけとけば、いまさら
憶える必要があるモノではありません。

Qポイントしたサムネイルの画像がメイン画像に表示されるようにしたい。

よろしくお願いいたします。
よく写真を紹介するページで目にするのですが、メインの画像があってその隅に小さな画像が並んでいてそれらをポイントするとメインの画像がポイントされた画像に変わる仕掛けを目にします。
同じようなものを作りたいのですが、どのような方法があるかご教示いただけますと幸いです。
因みに当方の環境はDreamweaver4、Fireworks4でホームページを作っています。

Aベストアンサー

スワップイメージのことかと思います。

参考
ミスティーネット・JavaScript講座
http://java.misty.ne.jp/swap.html

スワップイメージ
http://wakabano.cool.ne.jp/dream/higher/behavior/beh_07.html


人気Q&Aランキング

おすすめ情報