javascriptでimgタグの位置を変更しようと考えています。上、下の表示(divタグ)をクリックして上下に移動させたいのですが、上手くいきません。教えていただきたいと思い、投稿させていただきました。よろしくお願いします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=480">
<style type="text/css">
<!--
#wrapper{
width:640px;
height:480px;
position:relative;
}
#kt{
width:250px;
height:250px;
position:absolute;
top:100px;
left:100px;
}
#up{position:absolute; z-index: 1;top:0px;width:20px;height:20px;background-color:#F00;}
#down{position:absolute; z-index: 2;top:30px;width:20px;height:20px;background-color:#F00;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="up">上</div>
<div id="down">下</div>
<img id="kt" src="kt.png">
</div>
<script type="text/javascript">
var up_element = document.getElementById("up");
up_element.addEventListener("click", touchUp, false);
function touchUp() {
document.getElementById("kt").style.top = 50;
}
var down_element = document.getElementById("down");
down_element.addEventListener("click", touchDown, false);
function touchDown() {
document.getElementById("kt").style.top = 200;
}
</script>
</body>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
2回目以降のページロード時には...
-
Q&A掲示板の入力フォームに文字...
-
jQueryでのドラッグアンドドロ...
-
vertical sliderをautoplayしたい
-
特定の条件のHTML要素を一括で...
-
確認ダイアログを次からは表示...
-
JavascriptでXSSの脆弱性への対...
-
JavascriptでDom XSSの脆弱性対...
-
メルカリのメルカードで買い物...
-
「ご処理進めて頂きますようお...
-
エクセルで、日付を入力すると...
-
VBAでループ内で使う変数名を可...
-
エクセルVBAで、MsgBox やInput...
-
【Excel】特定の文字を含むセル...
-
Excelシート上のマクロを登録し...
-
CloseとDisposeの違い
-
switch の範囲指定
-
UPS警告音を止めたい
-
DoEventsがやはり分からない
-
EXCEL VBA マクロ 実行する度に...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavascriptのHTMLクラス表示に...
-
【JavaScript】検索がヒットし...
-
JavascriptでDom XSSの脆弱性対...
-
JavascriptでXSSの脆弱性への対...
-
CSSでreadonlyの機能はあり...
-
formのsubmitを押すとモーダル...
-
javascriptのエラーで質問です。
-
特定の条件のHTML要素を一括で...
-
javascriptで複数の表示・非表...
-
確認ダイアログを次からは表示...
-
2回目以降のページロード時には...
-
jqueryを使ったスムーススクロ...
-
時間帯によって背景を切り替え...
-
jqueryアコーディオンの上部の...
-
クリックすると、色が変わるよ...
-
jQueryでのドラッグアンドドロ...
-
ブラウザの表示領域から高さを...
-
vertical sliderをautoplayしたい
-
動画の上に広告をオーバーレイ...
-
GoogleストリートビューAPIでイ...
おすすめ情報