【HP作成】　移動できる画像について

解決済

質問者：eiti
質問日時：2008/10/10 19:36
回答数：3件

初めまして。
下のサイトさんのように、
ttp://waikyoku.slowly.jp/material/junk/houtai/index.html
ウィンドウの端からマウス移動で画像を表示させ、その画像上に複数のリンクを貼りたいのですが、どう組めばよいでしょうか。
メニューとして使うつもりです。

自分で検索してみましたが、適切な用語が分からないためうまく見つけることが出来ず、上記のサイトさんのソースを見ても理解する事が出来ませんでした…。
本来ならソースを見て分からない時点で諦めるべきだと思うのですが、どうしてもこの方法を使ってみたいと思い質問させて頂きました。
Java Scriptを使うのは初めてで、普段はHPビルダーV7を使ってサイトを作っています。多少タグをいじれる程度ですが、よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

No.1

回答者： _pipi_
回答日時：2008/10/10 20:48

色が付いたところに画像を！

<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>

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございました。
やってみましたが、うまくいかず；打ってもらったタグの内容も分からないのに手を出すものではないなと思いました。あまりにも知識不足だっと反省しています；
せっかく打ってくださったのに、きちんと活用できなくてすみません；

通報する

お礼日時：2008/10/11 18:03

No.2

回答者： _pipi_
回答日時：2008/10/11 18:52

スタイルシート

background:#ffffff url('xxxx.jpg');
検索してしらべよう

- 0
- 件

通報する

No.3ベストアンサー

回答者： _pipi_
回答日時：2008/10/11 19:15

短時間の割りに力作だとおもったんだけどなぁ～

これとは違うけど、昨日はかなり力作ばかりだった！
理解しやすく書くつもりはないけど、がんばって！

<div class="dragimg" style="width:400px;height:100px;position:absolute;top:0px;left:-350px;background:#efe url('ここにファイル名');text-align:right;padding:20px 40px;">

わからないと言わないで、書いたものを出してみる
どこが悪いのか一目瞭然！（たぶん）

スクリプトなんて無視していいと思うよ！
スタイルシートの部分だけ書き換えれば良いだけよ！