イメージをキャプチャして別のページに表示するHTML

-6

初心者からHTMLへ...自分の家具をデザインするのに役立つカスタムデザインのタブを使用してカスタムの家具のウェブサイトを作成しています。クリックした画像をキャプチャしたいあなたのセカンドページにナビゲートしてソファの色を選択すると、セカンダリ.htmlページに選択された画像が表示されます。コードの下イメージをキャプチャして別のページに表示するHTML

main.htmlを

<div class="red"> 
    <div class="blue">4 Seater <img src="images/4_Seater_Default.jpg" alt="4_Seater_Default.jpg" onclick="showImage('4_Seater_Default.jpg');" /></a></div> 
    <div class="blue">3 Seater<img src="images/3_Seater_Default.jpg" alt="3_Seater_Default.jpg" onclick="showImage('3_Seater_Default.jpg');" /></a></div> 
    <div class="blue">2 Seater<img src="images/2_Seater_Default.jpg" alt="2_Seater_Default.jpg" onclick="showImage('2_Seater_Default.jpg');" /></a></div> 
    <div class="blue">1 Seater<img src="images/1_Seater_Default.jpg" alt="1_Seater_Default.jpg" onclick="showImage('1_Seater_Default.jpg');" /></a></div>

出典

2016-05-31 NAREN H

ページ1：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" 
    pageEncoding="ISO-8859-1"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Page 1</title> 
<script type="text/javascript"> 
function filename(){ 
    var fullPath = document.getElementById("image").src; 
    var filename = fullPath.replace(/^.*[\\\/]/, ''); 
    var fileid = filename.split("\.")[0];; 
    window.location.href = "test2.jsp?imgid="+fileid; 
} 
</script> 
</head> 
<body> 
<IMG id="image" SRC="images/1.png" width="100px" alt="Logo" onclick="filename();"> 
</body> 
</html>

ページ2：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" 
    pageEncoding="ISO-8859-1"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Page 2</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript"> 

$(document).ready(function(){ 
var imageId = location.search.split('imgid=')[1]; 
document.getElementById('image').src = "images/"+imageId+".png"; \\it will set the value of the img src to 1.png which is passed from the previous page 
}); 
</script> 
</head> 
<body> 
<IMG id="image" SRC="images/2.png" width="400px"> 
</body> 
</html>

EDITのPage1のonclickイベントで

我々は単にfilename()関数を呼び出しています。この関数は、2番目のページのURLにimageIdを追加します。ここで2番目のページに着くと、$(document).ready(function(){})はURLからimageIdを取得し、画像1.pngの<IMG>タグのSRCを設定しています。

出典

2016-05-31 11:01:18 Leo

Hi Leo ..表示された

NARENH ...私の答えの編集セクションを参照してください。 – Leo

試してみてください。

function showImage(imagePath){ 

window.location.href= "www.yourdomain.com/yourDirectory/path/showImage?image_path="+imagePath; 
}

と上記URLにあなたがイメージ+他のコンテンツを表示するには、このパスを使用することができ、何が必要です。

出典

2016-05-31 10:11:21 abhinsit

このコードを配置する場所を説明して、var + imagePathを？ –

このコードは、HTMLページのスクリプトブロックに追加できるjavascript関数です。イメージにonclick関数を追加したので、それは同じのハンドラです – abhinsit

イメージをキャプチャして別のページに表示するHTML

答えて

関連する問題