- ベストアンサー
【HP作成】移動できる画像について
- ウィンドウの端からマウス移動で画像を表示させ、その画像上に複数のリンクを貼りたいです。どう組めばよいでしょうか。
- 自分で検索してみましたが、適切な用語が分からず、上記のサイトさんのソースを見ても理解できませんでした。
- Java Scriptを使うのは初めてで、普段はHPビルダーV7を使ってサイトを作っています。タグをいじれる程度です。
- eiti
- お礼率75% (3/4)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
短時間の割りに力作だとおもったんだけどなぁ～ これとは違うけど、昨日はかなり力作ばかりだった！ 理解しやすく書くつもりはないけど、がんばって！ <div class="dragimg" style="width:400px;height:100px;position:absolute;top:0px;left:-350px;background:#efe url('ここにファイル名');text-align:right;padding:20px 40px;"> わからないと言わないで、書いたものを出してみる どこが悪いのか一目瞭然！（たぶん） スクリプトなんて無視していいと思うよ！ スタイルシートの部分だけ書き換えれば良いだけよ！
その他の回答 (2)
スタイルシート background:#ffffff url('xxxx.jpg'); 検索してしらべよう
色が付いたところに画像を！ <html> <body> abc <div id="a" class="ragimg" style="width:400px;height:100px;overflow:hidden; position:relative;"> <div class="dragimg" style="width:400px;height:100px;position:absolute;top:0px;left:-350px;background:#fee;text-align:right;padding:20px 40px"> <a href="#">abcde</a> <a href="#">def</a> <a href="#">ghijklm</a> </div> </div> def </div> <div id="a" class="ragimg" style="width:400px;height:100px;overflow:hidden; position:relative;"> <div class="dragimg" style="width:400px;height:100px;position:absolute;top:0px;left:-350px;background:#efe;text-align:right;padding:20px 40px;"> <a href="#">abcde</a> <a href="#">def</a> <a href="#">ghijklm</a> </div> </div> <script> window.onload=function(){ var flag = 0; var sx; window.document.onmousedown= function (e){ var o=e?e.target:event.srcElement; if(o.className !='dragimg') return; flag = 1; sx=((/*@cc_on!@*/false)? event.x :e.pageX) -parseInt(o.style.left); return false; } window.document.onmouseout = function(){ flag=0;return false; } window.document.onmouseup = function(){ flag=0;return false; } window.document.onmousemove = function(e){ if (!flag) return; var o=e?e.target:event.srcElement; var x=((/*@cc_on!@*/false)? event.x :e.pageX)-sx; if(x>0)x=0; if(x<-350)x=-350; o.style.left= x +'px'; return false; } } </script>
お礼
回答ありがとうございました。 やってみましたが、うまくいかず；打ってもらったタグの内容も分からないのに手を出すものではないなと思いました。あまりにも知識不足だっと反省しています； せっかく打ってくださったのに、きちんと活用できなくてすみません；
お礼
返答が大変遅くなってしまい申し訳ございません。 一度お礼文を書き込んだだけで、回答を締め切っていませんでした。 せっかく回答してくださったのに、不愉快な思いをさせてしまってすみませんでした…。 もう少し知識をつけようと思います。 たくさんの回答ありがとうございました！