Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    HTML/JS - Click image to display video?

    I've a few images across the top of my project website - http://www.joewinfield.net/
    What I'm hoping to do is when I click on one of the images, that a corresponding video will play where the centered image is. Does anyone know any tutorials or sites that can help me with this? Thanks.

  • #2
    New Coder
    Join Date
    May 2009
    Posts
    34
    Thanks
    0
    Thanked 3 Times in 3 Posts
    You can try using a "swap div content" type of solution. The example below uses links as the navigation. By clicking a link, you change the content within the div. In your case, change the textual links to your image links. Here's an example: www.codesoaked.com/demo/swap-div-content.html

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    
    <style type="text/css">
    
    body {
    	font-family: Arial, Helvetica, sans-serif;
    	margin: 15px;	
    	font-size:13px;
    }
    
    a {
    	text-decoration:none;
    	color: #000;	
    }
    
    a:hover {
    	text-decoration: underline;	
    }
    
    #swap {
    	float:left;
    	height: 200px;
    	width: 200px;
    	overflow: hidden;
    }
    
    #one, #two, #three {
    	height: 200px;
    	background-color:#000;
    	color:#FFF;
    	padding: 10px;
    }
    
    </style>
    
    </head>
    
    <body>
    
    <strong>Click:</strong> <a href="#one">One</a> <a href="#two">Two</a> <a href="#three">Three</a>
    
    <div style="clear: both;"></div><br />
    
    <div id="swap">
    	<div id="one">Content One</div>
    	<div id="two">Content Two</div>
    	<div id="three">Content Three</div>
    </div>
    
    </body>
    </html>

  • Users who have thanked michaelbt2 for this post:

    Cerebralj (04-01-2013)

  • #3
    New Coder
    Join Date
    Dec 2011
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Wow, this is perfect, thanks!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •