画像をクリックするとメインの画像が動的に切り替わる処理を実装しているのですが
うまくいきません
例としては真ん中にメインの画像があり
その、左にミニ画像が5つ並んでいます
そのミニ画像をクリックするとクリックした画像にメインの画像
が動的に変更するようにしたいです
多分、クリックしたらちゃんと挙動はありますが変更後の画像が表示されないので
多分『 elem.src = '../image/${id}/${image1}';』のパスの変数がうまく展開されていない
のかと思いますがいろいろ調べてみましたがやはり動かず...
最初にPHPに変数を入れていますがそれを
var image1 = <?php echo json_encode($image1); ?>;
でjavascript用の変数にPHPの変数を代入しております
変数の中身は画像の名前になります(例 test.png)
javascript
1 <!--メイン画像--> 2 <?php print '<img class="image1" id="image1" src="../image/'.$id.'/'.$image1.'" >'; ?> 3 4 5 6<!--ここでPHPの変数をjavascriptの変数に代入--> 7 8 9 <script type="text/javascript"> 10var id = <?php echo json_encode($id); ?>; 11var image1 = <?php echo json_encode($image1); ?>; 12var image2 = <?php echo json_encode($image2); ?>; 13var image3 = <?php echo json_encode($image3); ?>; 14var image4 = <?php echo json_encode($image4); ?>; 15var image5 = <?php echo json_encode($image5); ?>; 16var image6 = <?php echo json_encode($image6); ?>; 17 18<!--alertで変数の代入が成功している事を確認済み--> 19alert(image3); 20 21<!--動的にメイン画像が変わるように実装--> 22 23 function LinkClick(param) { 24 var elem = document.getElementById("image1"); 25 26 switch (param) { 27 case 1: 28 elem.src = '../image/${id}/${image1}'; 29 break; 30 case 2: 31 elem.src = '../image/${id}/${image2}'; 32 break; 33 case 3: 34 elem.src = '../image/${id}/${image3}'; 35 break; 36 case 4: 37 elem.src = '../image/${id}/${image4}'; 38 break; 39 case 5: 40 elem.src = '../image/${id}/${image5}'; 41 break; 42 43 } 44 } 45 </script> 46 47 48<!-- ミニ画像の表示aタグでクリックにも対応--> 49 50 <a href="javascript:void(0);" onclick="LinkClick(1);"> <?php print '<img class="image01" id="image1" src="../image/'.$id.'/'.$image1.'" >'; ?> </a> <br/> 51 52 <a href="javascript:void(0);" onclick="LinkClick(2);"> <?php print '<img class="image2" id="image2" src="../image/'.$id.'/'.$image2.'" >'; ?> </a> <br/> 53 54 <a href="javascript:void(0);" onclick="LinkClick(3);"> <?php print '<img class="image3" id="image3" src="../image/'.$id.'/'.$image3.'" >'; ?> </a> <br/> 55 56 <a href="javascript:void(0);" onclick="LinkClick(4);"> <?php print '<img class="image4" id="image4" src="../image/'.$id.'/'.$image4.'" >'; ?> </a> <br/> 57 58 <a href="javascript:void(0);" onclick="LinkClick(5);"> <?php print '<img class="image5" id="image5" src="../image/'.$id.'/'.$image5.'" >'; ?> </a> <br/>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/08/05 13:36