Just doesn't work(Changing images)

[ebolt007]

Hello;

 

I'm new to Javascript and I'm missing something here in my code. I'm trying to have my vendor_pic_main image change to the smaller images as they are clicked, but just can't get it to work. Can anyone help me with this?  Here is my code, I'm loading the images from a database, and that's where I get really confused.

 

    <?
    $sql = "SELECT * FROM Vendors WHERE VendorID ='$bridal_id'";

$query_result = mysql_query($sql);

$Content_row = mysql_fetch_assoc($query_result);

$image01 = $Content_row['Image1FileName'];
$image02 = $Content_row['Image2FileName'];
$image03 = $Content_row['Image3FileName'];
$image04 = $Content_row['Image4FileName'];
$image05 = $Content_row['Image5FileName'];
$image06 = $Content_row['Image6FileName'];

    echo "<div class=\"vendor_pic_main\"><img src=\"images/vendors/$image01\" id=\"im\" ALT=\" \" ></div>"."\n"; 
    echo '<div class="vendor_pic_small_holder"> '."\n";
     echo " <div class=\"vendor_pic_small\"><a href=\"\" onclick=\"document.getElementById('im').src='images/vendors/$image01\'\"><img src=\"images/vendors/$image01\" width=\"40\" height=\"40\" ALT=\" \" ></a></div> "."\n";		
      echo " <div class=\"vendor_pic_small\"><a href=\"\"  onclick=\"document.getElementById('im').src='images/vendors/$image02\'\"><img src=\"images/vendors/$image02\" width=\"40\" height=\"40\" ALT=\" \" ></a></div> "."\n";		
      echo " <div class=\"vendor_pic_small\"><a href=\"\"  onclick=\"document.getElementById('im').src='images/vendors/$image03\'\"><img src=\"images/vendors/$image03\" width=\"40\" height=\"40\" ALT=\" \" ></a></div> "."\n";	
      echo " <div class=\"vendor_pic_small\"><a href=\"\"  onclick=\"document.getElementById('im').src='images/vendors/$image03\'\"><img src=\"images/vendors/$image04\" width=\"40\" height=\"40\" ALT=\" \" ></a></div> "."\n";		
      echo " <div class=\"vendor_pic_small\"><a href=\"\"  onclick=\"document.getElementById('im').src='images/vendors/$image03\'\"><img src=\"images/vendors/$image05\" width=\"40\" height=\"40\" ALT=\" \" ></a></div> "."\n";	
      echo " <div class=\"vendor_pic_small\"><a href=\"\"  onclick=\"document.getElementById('im').src='images/vendors/$image03\'\"><img src=\"images/vendors/$image06\" width=\"40\" height=\"40\" ALT=\" \" ></a></div> "."\n";	
     echo '</div>   '."\n";
    ?>

 

The images show up fine, the clicking and changing images just doesn't work.

[F1Fan]

What JS errors are you getting? You should have something in your error console. Also, why are you putting a backslash before the closing single quote on your image source in your onclick?

onclick=\"document.getElementById('im').src='images/vendors/$image01\'\"

should be

onclick=\"document.getElementById('im').src='images/vendors/$image01'\"

 

[ebolt007]

Awesome thanks taking off the \ after the $image worked to change the image, didn't even notice that.  but it only changes for a second then it changes right back to the original $image01 rather than staying on like $image03.

 

Here's what my code now looks like. It seems like it reloads the page and that is when the $image01 reappears after switching to the other image. Hope that makes sence?

 

  <?
    $sql = "SELECT * FROM Vendors WHERE VendorID ='$bridal_id'";

$query_result = mysql_query($sql);

$Content_row = mysql_fetch_assoc($query_result);

$image01 = $Content_row['Image1FileName'];
$image02 = $Content_row['Image2FileName'];
$image03 = $Content_row['Image3FileName'];
$image04 = $Content_row['Image4FileName'];
$image05 = $Content_row['Image5FileName'];
$image06 = $Content_row['Image6FileName'];
         
    echo "<div class=\"vendor_pic_main\"><img src=\"images/vendors/$image01\" id=\"im\" ALT=\" \" ></div>"."\n"; 
    echo '<div class="vendor_pic_small_holder"> '."\n";
      echo " <div class=\"vendor_pic_small\"><a href=\"\"  onclick=\"document.getElementById('im').src='images/vendors/$image01'\"><img src=\"images/vendors/$image01\" width=\"40\" height=\"40\" ALT=\" \" ></a></div> "."\n";		
      echo " <div class=\"vendor_pic_small\"><a href=\"\"  onclick=\"document.getElementById('im').src='images/vendors/$image02'\"><img src=\"images/vendors/$image02\" width=\"40\" height=\"40\" ALT=\" \" ></a></div> "."\n";		
      echo " <div class=\"vendor_pic_small\"><a href=\"\"  onclick=\"document.getElementById('im').src='images/vendors/$image03'\"><img src=\"images/vendors/$image03\" width=\"40\" height=\"40\" ALT=\" \" ></a></div> "."\n";	
      echo " <div class=\"vendor_pic_small\"><a href=\"\"  onclick=\"document.getElementById('im').src='images/vendors/$image04'\"><img src=\"images/vendors/$image04\" width=\"40\" height=\"40\" ALT=\" \" ></a></div> "."\n";		
      echo " <div class=\"vendor_pic_small\"><a href=\"\"  onclick=\"document.getElementById('im').src='images/vendors/$image05'\"><img src=\"images/vendors/$image05\" width=\"40\" height=\"40\" ALT=\" \" ></a></div> "."\n";	
      echo " <div class=\"vendor_pic_small\"><a href=\"\"  onclick=\"document.getElementById('im').src='images/vendors/$image06'\"><img src=\"images/vendors/$image06\" width=\"40\" height=\"40\" ALT=\" \" ></a></div> "."\n";	
     echo '</div>   '."\n";
    ?>

[F1Fan]

Ah, yes I believe the reason is that you have an empty href attribute. You need to add # to it. Like this:

<a href=\"#\"  onclick=\"document.getElementById('im').src='images/vendors/$image01'\"><img src=\"images/vendors/$image01\" width=\"40\" height=\"40\" ALT=\" \" ></a>

 

Otherwise, I believe it just defaults to whatever the current URL is, so clicking on one of those links would reload the page without the #.