http://www.dospara.co.jp/5goods_pc/pc_detail.php …
ドスパラのHPみたいにポインタを画像の上にのせると左の画像が変わるjavascriptのサンプルがあったら教えていただけないでしょうか。
よろしくお願いします。
A 回答 (5件)
- 最新から表示
- 回答順に表示
No.5
- 回答日時:
No.4です。
修正します。前のサンプルだと、どこにマウスオーバーしても画像が変わってしまうので、function eventadd()を直しました。
<script type="text/javascript" charset="utf-8">
<!--
window.onload = function () {
imgset();
eventadd();
}
function imgset(){
var lielm,targetelm;
var imgsrc=new Array("/ff.jpg","/ff.jpg","/ff.jpg","/ff.jpg","/ff.jpg");
var targetelm=document.getElementById("gazou_r").getElementsByTagName("ul");
for (var i=0;i<imgsrc.length;i++){
lielm=document.createElement("li");
lielm.innerHTML='<img src="'+imgsrc[i]+'" alt="gazou" />';
targetelm[0].appendChild(lielm);
}
document.getElementById("gazou_l").setAttribute("src",targetelm[0].firstChild.firstChild.getAttribute("src"));
}
function eventadd(){
//@cc_on
document./*@if( @_jscript ) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/
'mouseover', (function(evt){
var e = evt./*@if( @_jscript ) srcElement @else@*/ target /*@end@*/;
if(e.nodeName=="IMG" && e.parentNode.parentNode.parentNode.id=="gazou_r"){
document.getElementById("gazou_l").setAttribute("src",e.getAttribute("src"));
}
}),false);
}
// -->
</script>
</head>
<body>
<div id="gazou">
<hr />
<div>
<div id="gazou_r">
<ul></ul>
</div>
<img src="about:blank" id="gazou_l">
<div class="clear"><hr /></div>
</div>
<hr />
</div>
</body>
</html>
No.4
- 回答日時:
javascriptのサンプルです。
(画像の配置はcssで調整しています。)
こおいう感じで
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP">
<head>
<title></title>
<style type="text/css">
#gazou_r {float:right;width:50%;}
#gazou_l {width:50%;}
#gazou_r ul li {
float:left;
padding-left:10px;
list-style:none;
width:40%;
}
#gazou_r ul li img {width:100%;}
.clear { clear:both; }
.clear hr { display:none; }
</style>
<script type="text/javascript">
<!--
window.onload = function () {
imgset();
eventadd();
}
function imgset(){
var lielm,targetelm;
var imgsrc=new Array("/ff.jpg","/ff.jpg","/ff.jpg","/ff.jpg","/ff.jpg");
var targetelm=document.getElementById("gazou_r").getElementsByTagName("ul");
for (var i=0;i<imgsrc.length;i++){
lielm=document.createElement("li");
lielm.innerHTML='<img src="'+imgsrc[i]+'" alt="gazou" />';
targetelm[0].appendChild(lielm);
}
}
function eventadd(){
//@cc_on
document./*@if( @_jscript ) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/
'mouseover', (function(evt){
var e = evt./*@if( @_jscript ) srcElement @else@*/ target /*@end@*/;
document.getElementById("gazou_l").setAttribute("src",e.getAttribute("src"));
}),false);
}
// -->
</script>
</head>
<body>
<hr />
<div>
<div>
<div id="gazou_r">
<ul></ul>
</div>
<img src="/ff.jpg" id="gazou_l">
<div class="clear"><hr /></div>
</div>
</div>
<hr />
</body>
</html>
No.3
- 回答日時:
#2様が詳しく解説なさっていますが、仕組みについての補足を…
小さな画像の部分はテーブルになっていて、それぞれのセル(<td>)は以下のような構造になっています。
<td>
<a href="javascript:void(0)" onMouseOver="setimg('7')">
<img src="icon8.jpg" width="50" height="50" border="0"
style="filter:alpha(opacity=50);"
onMouseOver="this.filters['alpha'].opacity=100"
onMouseOut="this.filters['alpha'].opacity=50">
</a>
</td>
「onmouseover」がマウスを乗せたときのイベントハンドラを示していて、<a>タグにオンマウスすると、setimg()というファンクションが呼び出されます。
setimg()は引数(↑例では7番)で渡された画像を拡大表示のスペースに表示する機能を持っているという仕組みになっています。
もう一つ、<a>タグの中の<img>にもonmouseoverとonmouseoutのイベントが設定されています。
こちらは、丁度、画像のロールオーバーなどと同じで、マウスオンのときに表示効果、マウスオフのときにもとに戻すという記述になっています。
""内に直接スクリプトのコードが書かれていますが、画像の透明度を変えるように設定されていて、マウスオフで半透明、マウスオンでクリアに表示されるようになっています。
ただし、ここで使われているfilter効果はIE専用なので、対応していないブラウザだと何の変化も起きません。(エラーにはならないらしい←未確認)
ありがとうございます。
HTMLやCSSは分かるのですが、javascriptはあんまり分かりません…。
やってみますね。
お手数おかけして申し訳ありません。
No.2
- 回答日時:
サンプルをご所望のようですが、これはこのままドスパラのホームページを参考にされた方が早いのではないでしょうか。
とは言っても、ドスパラのホームページのソースをいきなり見てもどこで何をやっているのかすぐに見つける事はできないかも知れませんので、私がよくやっているソースの参考方法をお知らせします。ちなみに以下の手順は Internet Explorer 8 によるものです。
1.イベントが発生している画像のファイル名を調べる。
今回ので言うと、右側にあるいくつかの画像ですが、ポインタをのせると反応している画像ですね。この画像のどれかを右クリックして「名前を付けて画像を保存」を選択します。実際に保存はしなくてもいいのですが、保存しようとしてファイル名の入力ダイアログが出て、その画像のファイル名が初期値で表示されると思いますので覚えておきます。クリップボードなどに記憶させたら、キャンセルボタンで戻ります。
ここでは「icon1.jpg」が取得できました。
2.ソース上から1の画像ファイル名を検索する。
ホームページ上の何もないところを右クリックして「ソースの表示」を選択します。設定されているテキストエディタなどでソースが確認できるようになります。そのエディタ上で先ほど覚えたファイル名を検索します。
ここでは「icon1」を検索すると以下の部分が見つかりました。
<img src="/5goods_pc/img/note_pic/galleria_gs/icon1.jpg"
3.イベントで何をしているか調べて、処理を追う。
2で見つけた付近に、これに関係したイベントがあります。直前の <a> タグです。
<a href="javascript:void(0)" onMouseOver="setimg('0')">
ここでは、マウスポインタがのった時に「setimg」が呼ばれています。
次に「setimg」を検索してみますと、以下の部分が見つかります。
function setimg(n) {
document.images['TOP_IMG'].src = img[n];
}
おもむろに画像を変更している処理ですね。
TOP_IMG が何なのか検索してみると、配置位置的に画像が変わっている左の画像のようですので、この処理と見て間違いないでしょう。
では img[n] が何なのかを検索します。
と言ってもエディタで検索しても、うまく見つかりません。
ちょちょっとソースをながめて見ると、すぐ上で img を定義している部分がありました。
img = new Array(
img1_path,
img2_path,
img3_path,
img4_path,
img5_path,
img6_path,
img7_path,
img8_path
);
ふむふむ。
で img1_path はと言うと、さらにすぐ上でなんだりかんだり定義していますが、どうも変化する画像ファイルのパスのようですので、これと見て間違いないでしょう。
今回は、これだけの手続きで、画像の差し替えがされているようです。
以上が、私の参考方法です。
これらの一連の流れを参考にされたら、これがひとつのサンプルになるのではないでしょうか。
今回参考にしたドスパラのホームページでは、とてもわかりやすい記述で JavaScript がコーディングされていましたので楽でしたが、場合によっては、このような参考にされるのをさけるためか、とても解読困難なホームページもあります。
それでも、特別な場合を除き、追跡して追跡できないわけでもないと思いますので、真似したいホームページがあればどんどん追跡してみてください。
それから。
ポインタがのった時に自分自身の画像も変化していますが、これについてはよく見ていません。何か少々面倒な事をしているような感じがしています。
こちらの動作も必要でしたら、質問者様の方で研究してみてください。
ありがとうございます。
日ごろHPを見てて「いいな」と思うjavascriptはたくさん
ありますので、このようにサンプルを作っていけばいいんですね。
とても参考になりました。
お手数おかけしました。
No.1
- 回答日時:
他の回答者が解答しやすいように、条件を明確に
下のHTMLでCSSとJavascriptを使って、実現せよとか
<body>
<div>
<div class="left">
<img src="abouit:blank" />
<div class="rigth">
<ul>
<li><img src="img1.jpg"></li>
<li><img src="img1.jpg"></li>
<li><img src="img1.jpg"></li>
<li><img src="img1.jpg"></li>
</ul>
</div>
</body>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- WordPress(ワードプレス) ワードプレスで、左寄せ画像と文字を横並びにせず、画像の下に文字を表示される方法を教えてください 1 2022/04/24 11:06
- Excel(エクセル) iphonからone driveに保存してあるExcelを閲覧すると表示の仕方がちがうデータ 2 2022/12/21 13:51
- 画像編集・動画編集・音楽編集 エクスプローラー サムネイル表示されない 1 2022/12/22 10:14
- JavaScript JavaScriptでゲームプログラミングをしています。 次のように画像に動きをつけたいのですが、ど 1 2022/09/29 20:06
- JavaScript HTML&CSS Javascriptによる動的テーブル 1 2023/03/27 19:51
- HTML・CSS 差し込み画像にをcssで大きさ指定したい 1 2022/11/23 23:14
- PDF 画像調整してスクショし保存した画像をPC画面と同画質で印刷する方法 1 2022/03/31 19:09
- その他(IT・Webサービス) 画像調整してスクショし保存した画像をPC画面と同画質で印刷する方法 3 2022/03/31 19:11
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- Excel(エクセル) ある文字を含む際に、値を返す数式についてです 5 2022/08/28 16:58
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
position relativeの位置について
-
画像と背景色の幅が合わない
-
マウスをのせた時に画像の色を...
-
複数の画像を横にスクロールさ...
-
ボタンをセル内一杯に表示させ...
-
CSS実装されない
-
フォームのボタンをsubmitから...
-
画像を隙間なく配置する方法
-
複数の画像を連動してロールオ...
-
学校でポートフォリオサイトを...
-
リンクを知らせる手のマークが...
-
gif動画のサイズを変えてUPした...
-
floatさせたdtの内容が多い場合...
-
クリッカブルマップで画像と画...
-
html オンマウスで変化する画...
-
画像にリンクを張ると画像がず...
-
1から100までの自然数のうち、2...
-
htmlの文字が縦書きになる
-
ポップアップメニューを表のよ...
-
smallにtext-allignが効かない
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ボタンをセル内一杯に表示させ...
-
リンクを知らせる手のマークが...
-
htmlで画像を2個ずつ並べていき...
-
ポップアップウィンドウのサイ...
-
画像のサイズが変わらない
-
【HTML/CSS】ボタンの枠が伸び...
-
画像の場合のみ、下線を消す方...
-
cssで、チェックボックスの画像...
-
HTMLのIMAGEに。。
-
XML画像データををHTMLで簡単に...
-
画像の横に文字をうまく配置で...
-
table で画像をピッタリとくっ...
-
画像をリンクさせると紫の枠が...
-
レスポンシブ対応のHTML・CSS(...
-
3つの画像を中央に寄せて表示さ...
-
UDP通信を使うチャットプログラ...
-
水面の波紋
-
cssヘッダー画像の下に配置した...
-
画像とテーブルの隙間をなくす。
-
HTMLは、シングルクォートかダ...
おすすめ情報