How do I make 1 big pic and 2 small like on ebay?

@vulfgrlSep 03.2004

I would like to know how to make it so on a page, I have a larger picture and 3 smaller ones next to it. You click on the small picture, it shows up where the bigger one is. Like they do on ebay, and I’ve seen some stores that have this.

to post a comment

JavaScript

@JPnycSep 03.2004 — #You can actually do it with frames and straight HTML. Not the method I would choose, but most definitely the simplest. So if you know HTML you can do it right now. What web technologies are you familiar with?

@steelersfan88Sep 03.2004 — #You mean something like the following? Not exactly sure if this is what you are looking for

[code=php]<!-- DOCTYPE -->
 <html>
 <head>
 <title>Example</title>
 <script type="text/javascript">
 
 function swap(b) {
 var a = "pix0";
 var tmp = document.getElementById(a).src;
 document.getElementById(a).src=document.getElementById(b).src;
 document.getElementById(b).src=tmp;
 }
 
 </script>
 </head>
 <body>
 <div id="mn" style="width:400px;height:300px;">
 <div style="float:left;width:75%">
 <img src="pix0.png" id="pix0" width=300 height=300 alt="...">
 </div>
 <div style="float:left;width:25%">
 <img src="pix1.png" id="pix1" width=100 height=100 onclick="swap(id)" alt="..."><BR>
 <img src="pix2.png" id="pix2" width=100 height=100 onclick="swap(id)" alt="..."><BR>
 <img src="pix3.png" id="pix3" width=100 height=100 onclick="swap(id)" alt="...">
 </div>
 </div>
 </body>
 </html>[/code]

Dr. Script

@steelersfan88Sep 03.2004 — #or very similarly:

[code=php]<!-- DOCTYPE -->
 <html>
 <head>
 <title>Example</title>
 <script type="text/javascript">
 
 function swap(b,c) {
 var a = document.getElementById("pix0");
 var tmp = a.src;
 a.src=c;
 b.src=tmp;
 }
 
 </script>
 </head>
 <body>
 <div id="mn" style="width:400px;height:300px;">
 <div style="float:left;width:75%">
 <img src="pix0.png" id="pix0" width=300 height=300>
 </div>
 <div style="float:left;width:25%">
 <img src="pix1.png" id="pix1" width=100 height=100 onclick="swap(this,src)"><BR>
 <img src="pix2.png" id="pix2" width=100 height=100 onclick="swap(this,src)"><BR>
 <img src="pix3.png" id="pix3" width=100 height=100 onclick="swap(this,src)">
 </div>
 </div>
 </body>
 </html>[/code]

How do I make 1 big pic and 2 small like on ebay?

3 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

How do I make 1 big pic and 2 small like on ebay?

3 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #JavaScript _↴