How to transfer 2 images from page1 to page2.

I have 2 files a.htm and b.htm
a.htm contains

<div id="products">
<img src="p1.jpg" id="p1">
<img src="p2.jpg" id="p2">
</div>
<div id="fabrics">
<img src="f1.jpg" id="f1">
<img src="f2.jpg" id="f2">
</div>
<input type="button" id="btnnext" value="Click me">
From here, at a time only 1 image can be clicked and 1 fabric can be clicked.
The moment the btnnext is pressed, the product and fabrics image should be assigned to i1 tag and i2 tag in b.htm


b.htm
<div id="products">
<img src="i1" src="">
</div>

<div id="fabrics">
<img src="i2" src="">
</div>
searchsanjaysharmaAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

nap0leonCommented:
I presume this is actually a form on a.htm and btnnext posts the form to b.htm.

Here is some CSS and HTML that shows how to use images as radio button where the radio button is placed off-screen so that no one actually sees the radio button, only the image which is a label for the button.

<style>
.hideThis{position: absolute;left: -9999px;style=-moz-opacity:0;filter:alpha(opacity:0);opacity:0;}
</style>
<form name="myForm" action="" method="get">
<div id="products">
	<label for="product1"><input type="radio" id="product1" name="product" class="hideThis" value="p1"><img src="p1.jpg" id="p1"></label>
	<label for="product2"><input type="radio" id="product2" name="product" class="hideThis" value="p2"><img src="p2.jpg" id="p2"></label>
</div>
<div id="fabrics">
	<label for="fabric1"><input type="radio" id="fabric1" name="fabric" class="hideThis" value="f1"><img src="f1.jpg" id="f1"></label>
	<label for="fabric2"><input type="radio" id="fabric2" name="fabric" class="hideThis" value="f2"><img src="f2.jpg" id="f2"></label>
</div>
<input type="submit" id="btnnext" value="Click me">
</form>

Open in new window


Once the form is submitted, you can handle the assignments on b.htm using your server-side language.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
searchsanjaysharmaAuthor Commented:
ok
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.