javascriptの動作についてご教授下さい。
ウィンドウ画面が横1275px 縦925pxで
パージ内容が横長の横2350px 縦925pxの
ページ全体を横軸スクロールで表示可能なサイトで、
<img>タグで画像を非表示(配置はセンター付近)し、
ある画像リンクへの文字列をクリックでjavascriptから
その<img>を非表示から表示に切り替えています。
(ページイメージ)
|リンク文字位置|
|img位置|
横2350px----------------------------------------------------→
で、今回の質問なのですが、リンク文字はページ右辺に配置しており
javascriptからimgを可視化するとスクロールが初期位置(横0)に戻ってしまいます。
スクロール位置はそのままで画像の可視化・非可視化を切り替えたいのですが、ムリなのでしょうか??
いちよう可視化後に scroll()でスクロールの位置を指定していても
スクロールが初期位置(横0)に戻ってしまいます。↓↓↓
この現象はJavaScriptの仕様なのでしょうか??
横長のページであることと、リンク文字の配置は仕様として
変更できないものとお願いいたします。
環境
WinXP SP3 IE8(8.06)
画像切り替えソース
//引数urlの画像をimgで表示する関数
function visi(url) {
//imgのプロパティを取得
var jpg = document.getElementById('jpg_link');
jpg.style.visibility = "visible";
jpg.style.display = "block";
jpg.src = url;
//scroll(1500,0); ← 1500まで行くが初期位置に戻る・・・
}
No.1ベストアンサー
- 回答日時:
IE8(8.06)固有の問題なのでしょうか?
IE8.0試してないのですが、IE7.0/Firefox3.5.3だと
ご提示のソースコードそのまんまでちゃんとスクロールします。
画像の入っている<div>に対して<image>をposition:relativeしてますけど。配置の仕方が根本的に異なるのでしょうか、パージ内容の意味がわかりません。
<script type="text/javascript">
function visi(url) {
//imgのプロパティを取得
var jpg = document.getElementById('jpg_link');
jpg.style.visibility = "visible";
jpg.style.display = "block";
jpg.src = url;
scroll(1275,0);
}
</script>
<body style="width:1275px; height:925px;">
<div style="width:2350px; height:925px; background-color: #ccccff;">
<img id="jpg_link" src="fuga.jpg" style="position:relative; left:1175px; visibility:hidden" />
<a href="#" target="_self" onclick="visi('hoge.jpg');return false" style="position:relative;left:2200px;">GazoChange</a>
</div>
</body>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- Visual Basic(VBA) エクセルマクロでアニメを作る方法を教えてください。 1 2023/02/07 14:27
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JavaScriptでサイコロのような...
-
一定時間で入れ替わるバナー画...
-
デフォルト非表示にしたい。【t...
-
JQueryでオープニングアニメー...
-
IE6でmax-width:100px; max-hei...
-
全部のサイコロをjavascriptで...
-
ボタンを押すたびに交互に切り...
-
セレクトボックスで、リンクバ...
-
Colorboxがうまく設置できません
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
jqueryのsortableで一部ソート...
-
removeEventListenerについて
-
Slick.jsのオプションrtlについて
-
JavaScriptで変更した属性の元...
-
どの<li><a> が押されたか判別...
-
複数画像のランダム複数表示(...
-
クリックで色変更後に既に変更...
-
JSPでの画像ファイル表示
-
読み込んだQRコードをフォーム...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
デフォルト非表示にしたい。【t...
-
jQueryで同じクラス名のものを...
-
Colorboxがうまく設置できません
-
Javascript初心者|jQueryの.va...
-
jQueryでのドラッグアンドドロ...
-
アップロードファイルの種類に...
-
embed要素のsrc属性の値を変更...
-
fancyboxのポップアップ時の画...
-
JQueryで画像の上で文字を動かす
-
一定時間で入れ替わるバナー画...
-
ボタンを押すたびに交互に切り...
-
全部のサイコロをjavascriptで...
-
交互に入れ替わる画像を複数配置
-
clear機能を失わずにファイルア...
-
JavaScriptが、Firefoxで動かな...
-
「画像クリックで音声再生」を ...
-
bxsliderで最初に縦に複数表示...
-
JQueryを使用して、画像をドラ...
-
イラストのボタンを押したとき...
-
背景色と連動するスライドショ...
おすすめ情報