電子書籍の厳選無料作品が豊富！

javascriptで画像の移動

解決済

お世話になります。
画像をクリックすると、クリックした画像のaltの内容をinput type="text"に表示する。
左に移動ボタン押下でクリックされた画像を１つ左に移動、
右に移動ボタン押下で１つ右に移動する。

１．移動ボタン押下で移動させるにはどうすればよいでしょうか？
※HTMLはtableタグでなくてもよいと思っております。
２．クリックした画像が分かるようにしたいのですが
何かいい方法などありますでしょうか？

<html>
<head>
<script>
var clickId ="";
function down(id){
clickId = id;
document.getElementById("comment").value = document.getElementById(id).alt ;
}
function move(d){
}
</script>
</head>
<body>
<table>
<tr>
<td id="p1"><a href="#" onClick="down('1');"><img id="1" alt="alt1" src="1.gif" /></a></td>
<td id="p2"><a href="#" onClick="down('2');"><img id="2" alt="alt2" src="2.gif" /></a></td>
<td id="p3"><a href="#" onClick="down('3');"><img id="3" alt="alt3" src="3.gif" /></a></td>
</tr>
<tr>
<td align="left"><a href="#" onClick="move('1');"><img alt="左に移動" src="L.gif" /></a></td>
<td align="right"><a href="#" onClick="move('0');"><img alt="右に移動" src="R.gif" /></a></td>
</tr>
</table>
<input type="text" id="comment" />
</body>
</html>

通報する

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

質問の本文を隠す

A 回答 (1件)

No.1ベストアンサー

  • 回答者： talepanda
  • 回答日時：

<html>


<head>
<script>
var E=null,T=null;
function blink(f){if(!E){return;}E.childNodes[0].style.display=f?"":"none";T=setTimeout(function(){blink(1-f);},250);}
function down(e){if(T)clearTimeout(T);if(E)E.childNodes[0].style.display="";E=e;document.getElementById("comment").value = e.childNodes[0].alt;blink(1);}
function move(d){
if(!E)return;
var t=E.innerHTML;
if(d==1){
if(E.parentNode.previousSibling){
E.innerHTML=E.parentNode.previousSibling.childNodes[0].innerHTML;
E.parentNode.previousSibling.childNodes[0].innerHTML=t;
down(E.parentNode.previousSibling.childNodes[0]);
}}else if(d==0){
if(E.parentNode.nextSibling){
E.innerHTML=E.parentNode.nextSibling.childNodes[0].innerHTML;
E.parentNode.nextSibling.childNodes[0].innerHTML=t;
down(E.parentNode.nextSibling.childNodes[0]);
}}}
</script>
</head>
<body>
<table>
<tr>
<td id="p1"><a href="#" onClick="down(this);"><img alt="alt1" src="1.gif" /></a></td>
<td id="p2"><a href="#" onClick="down(this);"><img alt="alt2" src="2.gif" /></a></td>
<td id="p3"><a href="#" onClick="down(this);"><img alt="alt3" src="3.gif" /></a></td>
</tr>
<tr>
<td align="left"><a href="#" onClick="move('1');"><img alt="左に移動" src="L.gif" /></a></td>
<td align="right"><a href="#" onClick="move('0');"><img alt="右に移動" src="R.gif" /></a></td>
</tr>
</table>
<input type="text" id="comment" />
</body>
</html>
    • good
    • 1
    • 件
通報する
この回答へのお礼

talepanda様、ご教授有難う御座います。
正常に動作いたしました。
私にはソースが少し難解なので、これから解読していきたいと思います。
どうも有難う御座いました。

通報する
お礼日時：2006/09/26 12:08

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

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報