image swap (make appear larger) not working

I’m having a very rough time getting the image switch mechanism from this link,       , to function. It’s exactly what I need please help, fellows. I’ve thoroughly checked my image relations and switched the locations of scripts around.

<div id="big-image">
    <img id="main" src="images/goldenkoa_huge.png" width="400" height="400" alt="Canadian Maple, Engineered Luxury Click Vinyl Plank flooring"><br />
 
<a href="images/GoldenKoa-208x166_NEW3_big.gif" onclick="swap(this); return false;"><img src="images/GoldenKoa-208x166_NEW3.gif"></a>
<a href="images/picture2_big.jpg" onclick="swap(this); return false;"><img src="images/picture2_small.jpg"></a>
<a href="images/picture3_big.jpg" onclick="swap(this); return false;"><img src="images/picture3_small.jpg"></a>

Open in new window


http://stackoverflow.com/questions/1640727/javascript-clicking-thumbnails-to-switch-a-larger-image-best-method
I have the following scripts loaded at the end of my head (I’ve also tried to move scripts to above body closing tag) :
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script type="text/javascript">
         function swap(image) {
             document.getElementById("main").src = image.href;
         }
     </script>
</head>

Open in new window

netsajAsked:
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.

Julian HansenCommented:
The code works for me
<!doctype html>
<html>
<head>
<title>Test</title>
<link href="css/bootstrap.css" rel="stylesheet" />
<style type="text/css">
a img {
   width: 100px;
}
</style>
</head>
<body>
<div class="container">
  <div id="big-image">
    <img id="main" src="images/background4.jpg" width="400" alt="Canadian Maple, Engineered Luxury Click Vinyl Plank flooring"><br />
    <a href="images/background5.jpg" onclick="swap(this); return false;"><img src="images/background5.jpg"></a>
    <a href="images/background6.jpg" onclick="swap(this); return false;"><img src="images/background6.jpg"></a>
  </div><script src="js/psource.js"></script>
</div>
<script src="http://code.jquery.com/jquery.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.js"></script>
<script type="text/javascript">
 function swap(image) {
   document.getElementById("main").src = image.href;
 }
</script>
</body>
</html>

Open in new window


Working sample here
Julian HansenCommented:
It is possible that you have a javascript error on your page that is preventing the swap function running.

Check your console window for errors.

Put the following inside the swap() function
console.log('Fired');

Open in new window

Check the console to ensure this is showing
netsajAuthor Commented:
Hi. Thanks for your demo. I tried it in my page and it does not work. My console returns 2 errors, but only unrelated ones:
1.) z-index bug for fixed header content  2.) expanding box problem for div container holding the content(I moved the image-swap div with no success in making it work outside of this div, though).
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Julian HansenCommented:
As you can see I have adapted your code in my sample. If it does not work then there is something on your page that you are not showing that is causing the problem.

You say there were two unrelated errors - what were they?

Do you have a link I can look at? Or a full page listing?
netsajAuthor Commented:
<!DOCTYPE HTML>
<!--
	Archetype by Pixelarity
	pixelarity.com @pixelarity
	License: pixelarity.com/license
-->
<html>
<head>
		<title>Engineered Vinyl Hardwood Flooring: Golden Koa  |  Arcade Green</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
		<link rel="stylesheet" href="assets/css/style.css" />
		<link rel="stylesheet" href="assets/css/lightbox.css" />
		<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css"> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script type="text/javascript">
      function swap(image) {
             document.getElementById("main").src = image.href;
         }
     </script>       
		<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
		<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
</head>
    <body>
   	<section id="main" class="wrapper">
    		<div id="specialheader" style="position:fixed;top:0;"><img src="images/logo_3_2.gif" class="top_logoleft" style="box-shadow: 0 5px 5px #888888; width: 31%"><img src="images/lowes2.gif" width="120" height="50" style="position:fixed; top:11em; right:1.5em;"></div><!-- end #specialheader -->
            
		
	<!-- Main -->
	<section id="main" class="wrapper sidebar left" style="display:block; width:100%;">
            <!-- BEGIN section#main -->
		<div class="inner">
                	<!-- Header -->
			<div id="header">
				<h4 style="line-height: 2.7em; padding-left: 20px;"><a href="#" style="a:hover: fff;">HOME</a> >> Engineered Vinyl Hardwood Flooring</h4></a>			
				<nav id="nav">
					<ul>	
						<li><a href="index.html">HOME</a></li>
						<li><a href="installation.html">INSTALLATION</a></li>
						<li><a href="index.html" class="submenu">OUR PRODUCTS</a>
                        	<ul>
                            	<li><a href="LCVT.html">LUXURY CLICK VINYL TILE</a></li>
                                <li><a href="LCVP.html">LUXURY CLICK VINYL PLANK</a></li>
                                <li><a href="StrandBamboo.html">STRAND BAMBOO</a></li>
                                <li><a href="WPC.html">WPC LUXURY FLOORING</a></li>
                                <li><a href="Cabinets.html">CABINETS</a></li>
                            </ul>
                        </li>
                      <li><a href="contact.html" class="submenu">CONTACT US</a>
                        	<ul>
                            	<li><a href="8088342959">(808) 834-2959</a></li>
                            	<li><a href="mailto:info@arcadegreen.com">EMAIL US</a> </li>                        		
                                <li><a href="locations.html">LOCATE A STORE</a></li>
							</ul>
                      <li>Find Arcade Green</li>
					</ul>
				</nav>
			</div> <!-- end div #header -->
            <br />
      <header class="major">
			  <h3>Engineered Vinyl Hardwood Flooring </h3>
			  <!-- <h2 style="text-shadow: 2px 2px #666;"> -->
              <h2><strong><span class="green2">Golden Koa</span></strong></h2>
			 <!-- <h2 style="text-shadow: 2px 2px #666;"><strong><span class="green2">Golden Koa</span></strong></h2> -->

      </header>				
						
                        <!-- MARGINS AND PADDING REMOVED FROM CONTENT -->
                        										
	  <div class="content" style="width:50%; padding:0; margin-top:0;">	<!-- begin div.content -->
                   
                	
                    <section class="post" style="display: inline-block; margin:0 1.5em 0 1.5em;">												
<p>Creating extra wide planks from the safest, eco-friendly materials we ensure superior moisture resistance. Our expertly engineered planks with easy-click interlocking edges mean simple installation and savings for you!			</p>	

<section>
<div id="TabbedPanels1" class="TabbedPanels">
                          <ul class="TabbedPanelsTabGroup">
                            <li class="TabbedPanelsTab" tabindex="0">Specifications</li>
                            <li class="TabbedPanelsTab" tabindex="0">Description</li>
                            <li class="TabbedPanelsTab" tabindex="0">Warranty</li>
                            <li class="TabbedPanelsTab" tabindex="0">Installation / Care</li>
                          </ul>
                          <div class="TabbedPanelsContentGroup">
                          <div class="TabbedPanelsContent"> <table style="margin: 1em 0 1em 0;">
                    <tr><td>Color: Medium <span class="green"; style="display:inline-block; float:right;">(NEW!)</span> </td></tr>
                    <tr><td>Size: 4.2mm x 152.4mm x 1219.2mm
                    <br>(0.16 x 6" W x 48" L)</td></tr>
        			<tr><td>THICKNESSSSSSSS</td></tr>
                    <tr><td>Water-Resistant </td></tr>
                    <tr><td>Termite-Resistant</td></tr>
                        </table></div>
                        <div class="TabbedPanelContent">
					<table>
                    <tr><td>4-Foot Realistic Planks (24 SF PER  BOX)</td></tr>
					<tr><td>Soft underfoot reduces noise</td></tr>
					<tr><td>Protective urethane layer</td></tr>
                    </table>
</div>
                          <div class="TabbedPanelsContent">
                              <p>Our Limited Lifetime Residential Warranty covers 25 years!</p>
                               <ul class="actions">
						  <li><a href="#" class="button">Learn More</a></li>
		</ul></div><!-- end spry -->
                          <div class="TabbedPanelContent"><p>Our <a href="installation.html"> easy-to-Install</a> (floating) vinyl is just as easy to maintain! Floating installation makes installation of our click-lock vinyl a snap!</p></div>
                        </div>
</section>

 <a href="LCVT.html"><p class="align-right">Back to Hardwood Vinyl Flooring >> </a></p>  
 </section>
              
   
        <p>&nbsp;</p>
        <p><br>    
                 
	  </div><!-- end div.content images on the right of page -->
                    <!-- open div.sidebar -->
                    <div class="sidebar" style="width:50%">
     			<section>

<div id="big-image">
    <img id="main" src="images/goldenkoa_huge.png" width="400" height="400" alt="Canadian Maple, Engineered Luxury Click Vinyl Plank flooring"><br />
<a href="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQV0TizaFIS4djTY-YgucL1dHDNseSPN9Ib74LVY40R1zYja6AV" onclick="swap(this); return false;"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQV0TizaFIS4djTY-YgucL1dHDNseSPN9Ib74LVY40R1zYja6AV" height="50px"></a>
<a href="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRqQOQHwPkBuYIcoUI4MpbDdbz0WUM2ql5l2HQ9keK-urytm8Vdgg" onclick="swap(this); return false;"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRqQOQHwPkBuYIcoUI4MpbDdbz0WUM2ql5l2HQ9keK-urytm8Vdgg" height="50px"></a>
  </div><!-- close div #big-image -->




<div style="position:fixed; top:1.4em; right:3.8em; height: 15px; width: 120px; z-index:1000000;">
<script>
  (function() {
    var cx = '004635119122513223366:sihnav7htje';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>
</div>

    		</section>
   	 			 </div><!-- end div.sidebar -->
           
<footer>
	  <ul class="actions">
	<li><a href="Warranty.html" class="button">Warranty Details</a></li>
	  </ul>
</footer>
          </section>
          <section></section><!-- end div.inner -->
    </section><!-- end section #main -->
                    
  	<!-- Footer -->
	<footer id="footer" style="width:100%;">
				<div class="content">
					<div class="inner">
						<section class="about">
							<h3>free consultation</h3>
							<p>Contact us to explore and compare your options.</p>
							<ul class="actions">
								<li><a href="#" class="button">Learn More</a></li>
							</ul>
						</section>
						<ul class="icons bulleted">
							<li class="icon fa-map-marker">
								<h3>Address</h3>
								<p>Arcade Green<br />
								2959 Koapaka St<br />
								Honolulu Hawaii, 96819 USA</p>
							</li>
						</ul>
						<ul class="icons bulleted">
							<li class="icon fa-phone">
								<h3>Phone</h3>
								<p>(808) 834-2959</p>
							</li>
							<li class="icon fa-envelope-o">
								<h3>Email</h3>
								<p><a href="info@arcadegreen.com">info@arcadegreen.com</a></p>
							</li>
						</ul>
					</div>
				</div>
				<p class="copyright">&copy; 2014 Arcade Green. All rights reserved.<br />
				<a href="termsandconditions.html">Terms of Use</a> | <a href="#">Privacy Policy</a> | <a href="#">Contact</a></p>
			</footer>  
<!-- SCRIPTS -->             
<script type="text/javascript">
function swap(image) {
             document.getElementById("main").src = image.href;
         }
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>

Open in new window

netsajAuthor Commented:
Colsole Errors: 27/35 and 118

Any content that does not fit in a fixed-width or -height box causes the box to expand to fit the content rather than letting the content overflow.

Affects: Internet Explorer 6.0
Likelihood: Likely

Any content that does not fit in a fixed-width or -height box causes the box to expand to fit the content rather than letting the content overflow.

Affects: Internet Explorer 6.0
netsajAuthor Commented:
I just noticed the id "main" is used twice using html validator... changing the id of the swap image fixed things!

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
Julian HansenCommented:
That would do it. For next time post as much information as you can - if you had posted your source or a link the duplicate id might have been discovered earlier.

Glad you got sorted.
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
HTML

From novice to tech pro — start learning today.