ebolt007 Posted June 2, 2010 Share Posted June 2, 2010 I have s project where I have 6 thumbnails and when you click on a thumbnail the image changes in the main area, with an onclick. This works fine, but now I need to ad text that is read from the database as well underneath the image and have that change correspondingly with the image. Here is the code I have that changes fine with the images, and the text is loading under the picture, but how do I get the text to also change on an onclick event? Thanks <? echo "<h3>$Business<br></h3>"; echo "<div class=\"vendor_pic_main\"><img src=\"images/vendors/$image01\" id=\"im\" ALT=\"$Business\" width=\"300\"> <br /> <div class=\"vendor_pic_main_tag\" id='changeText'> $tag_01</div></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"; ?> Quote Link to comment Share on other sites More sharing options...
Psycho Posted June 2, 2010 Share Posted June 2, 2010 Interesting, this looks like the exact same layout that someone else was asking about the other day. Is this, by any chance, a homework problem? You are going to have to create a function to do the replacement and will need to change your onclick events to call that function. (you should of used a function in the first place instead of doing the logic in-line). Is there some reason you build all the code within echo statements? There's no reason to do that unless you are populating dynamic content into the links. So, assuming you are pulling the information from a db, here is an example: Example: <?php $query = "SELECT path, description FROM table"; $result = mysql_query($query); //Create vars for javascript arrays and thumbs $jsImageArray = ''; $jsTextArray = ''; $htmlThumbs = ''; $index = 0; while($row = mysql_fetch_assoc($result))) { $image = $row['path']; $text = $row['description']; if(!isset($first_image)) { $first_image = $image; $first_text = $text; } $jsImageArray = "image_files[{$index}] = '{$image}';\n"; $jsTextArray = "image_text[{$index}] = '{$text}';\n"; $htmlThumbs = "<div class=\"vendor_pic_small\"><a href=\"#\" onclick=\"changeImage({$index});\">"; $htmlThumbs = "<img src=\"images/vendors/{$image}\" width=\"40\" height=\"40\" alt=\"\" />"; $htmlThumbs = "</a></div>\n"; $index++; } ?> <html> <head> <script type="text/javascript"> var image_files = new Array(); <?php echo $jsImageArray; ?> var image_text = new Array(); <?php echo $jsTextArray; ?> function changeImage(imgIndex) { var imgObj = document.getElementById('im'); var txtObj = document.getElementById('changeText'); imgObj.src = 'images/vendors/' + image_files[imgIndex]; txtObj.innerHTML = image_text[imgIndex]; return; } </script> </head> <body> <h3><?php echo $Business; ?></h3> <br> <div class="vendor_pic_main"> <img src="images/vendors/<?php echo $first_image; ?>" id="im" ALT="<?php echo $Business; ?>" width="300"><br /> <div class="vendor_pic_main_tag" id='changeText'><?php echo $first_text; ?></div> </div> <div class=vendor_pic_small_holder> '.\n; <?php echo $htmlThumbs; ?> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
ebolt007 Posted June 3, 2010 Author Share Posted June 3, 2010 Naw, not homework, just a regular work problem I'm tryin to figure out. I'm not a big scripter, more on the graphics side but trying to learn and jumping in head first. Your script didn't work. Seems like the $htmlThumbs needs to be named something else, I couldn't get the thumbs to array out using your script. I think it's close from looking at it, but I just can't get it, and yeah I'm pulling from a database which is why everything is echoed out in the code. Any other suggestions? I got it to pull in the big picture and the description, but the code you provided doesn't do anything with the Thumbs at all. The database has 6 images, Image1FileName, Image2FileName, Image3FileName, etc. Then a Description of course, but I really suck with arrays and itterating thru them, and am really focusing now on learning them, so this project will really help me out on learning this. Thanks so much. Quote Link to comment Share on other sites More sharing options...
Psycho Posted June 3, 2010 Share Posted June 3, 2010 Well there may have been some typos. Since I don't have your database or images I just wrote it on-the-fly. But, the logic is sound. Below is an HTML static version of the above which works perfectly. The only things the PHP code was doing was programatically creating 1) the javascript arrays, 2) setting the first image and description, and 3) creating the divs for the thumbs. So, take the working example below and add PHP for each of the above. Do one thing at a time and ensure the output the PHP produces is in the same format as the working example: <html> <head> <script type="text/javascript"> var image_files = new Array(); image_files[0] = 'imageA.jpg'; image_files[1] = 'imageB.jpg'; image_files[2] = 'imageC.jpg'; var image_text = new Array(); image_text[0] = 'Description for imageA.jpg'; image_text[1] = 'Description for imageB.jpg'; image_text[2] = 'Description for imageC.jpg'; function changeImage(imgIndex) { var imgObj = document.getElementById('im'); var txtObj = document.getElementById('changeText'); imgObj.src = 'images/vendors/' + image_files[imgIndex]; txtObj.innerHTML = image_text[imgIndex]; return; } </script> </head> <body> <h3>Business</h3> <br> <div class="vendor_pic_main"> <img src="images/vendors/imageA.jpg" id="im" ALT="Business" width="300"><br /> <div class="vendor_pic_main_tag" id="changeText">Description for imageA.jpg</div> </div> <div class=vendor_pic_small_holder> <div class="vendor_pic_small"> <a href="#" onclick="changeImage(0);"> <img src="images/vendors/imageA.jpg" width="40" height="40" alt="" /> </a> </div> <div class="vendor_pic_small"> <a href="#" onclick="changeImage(1);"> <img src="images/vendors/imageB.jpg" width="40" height="40" alt="" /> </a> </div> <div class="vendor_pic_small"> <a href="#" onclick="changeImage(2);"> <img src="images/vendors/imageC.jpg" width="40" height="40" alt="" /> </a> </div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.