twilitegxa Posted August 5, 2011 Share Posted August 5, 2011 I need to do something similar to an image swap in CSS, so I am assuming it can be done with this as well. I have two buttons and two flv files. I want one to be already on the page, which is what I already have. I want the buttons, displayed above the video, to display the corresponding video in the spot where the current video is when the page is loaded. Basically, when the user clicks the first button, video1 is loaded onto the spot on the page. If they click button 2, then video2 is displayed on the spot on the page. How can I do this? Would it be similar to how you can swap images with CSS? Or would there be another method? Quote Link to comment Share on other sites More sharing options...
twilitegxa Posted August 6, 2011 Author Share Posted August 6, 2011 I was wondering if I could use an image swap similar to how this one is set up, but just swap the flv instead of the images: <script> function switch1(div) { if (document.getElementById('one')) { var option=['one','two']; for(var i=0; i<option.length; i++) { obj=document.getElementById(option[i]); obj.style.display=(option[i]==div)? "block" : "none"; } } } // function switchImg(i){ document.images["wine"].src = i; } </script> <style> #image-switch ul { margin:0 0 0 20px; color:red; list-style-type:none; } #image-switch li { padding:10px; } #image-switch #two, #image-switch #three { display:none; } #radiobs { width:150px; position:relative; margin:0; } #radiobs input { margin:0; padding:0; position:absolute; margin-left:6em; width:15px; } </style> <!-- gallery --> <div class="gallery"> <div class="display"> <div class="fright"><img src="/wp-content/themes/yorkpeoplefirst/assets/gallery2.jpg" id="wine" /><> <!--<div class="image i2"><img src="/wp-content/themes/yorkpeoplefirst/assets/gallery1.jpg" /><>--> <> <div class="thumbs"> <a href="#" onclick="switchImg('/wp-content/themes/yorkpeoplefirst/assets/gallery2.jpg')" class="first current-menu-item"><span>Informing people, influencing people and educating.</span></a> <a href="#" onclick="switchImg('/wp-content/themes/yorkpeoplefirst/assets/gallery1.jpg')" class="second"><span>Supporting each other through problems.</span></a> <> <> Quote Link to comment Share on other sites More sharing options...
twilitegxa Posted August 7, 2011 Author Share Posted August 7, 2011 Someone told me how to do this with a Flowplayer playlist (some JavaScript and HTML). Thanks for the help anyway! I guess I was in the wrong section of the forum! 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.