Jump to content

Recommended Posts

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?

Link to comment
https://forums.phpfreaks.com/topic/243989-flv-swap-like-image-swap/
Share on other sites

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>
   <>
<>

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.