How do I embed a link in an image?

Turn image into video onclick?

• I'm making a webpage with youtube videos. I want the videos to appear as thumbnail images, and then when the user clicks on them, the video itself plays. I don't want it to be a link to another page; I want it to open in the same page without reloading. Like on Facebook. I know how to embed videos, but I'm not sure what to use for the image/button replacing action.

• Answer:

  You'll need to do this in JavaScript and CSS. Put both elements on the page and make the video container 'display: none' in CSS. You'll need to make the parent container DIV (or whatever) 'position: relative' and each of the elements (image and video container) 'position: absolute' with top and left set appropriately so that they occupy the same space on the page. Then you need to set the onclick handler on the IMG so that it calls a JavaScript function when clicked. Yahoo answers messes up the formatting and angle brackets so it is hard to type, so I'll use [] rather than angle brackets: [IMG id='imgcontainer' src='...' alt='...' onclick='showvideo()' /] Then the script to show the video, ideally in the head section of your page: [script type='text/javascript'] function showvideo(){ document.getElementById("imgcontainer").… = "none"; document.getElementById("videocontainer"… = "block"; } [/script] That assumes we have put id="videocontainer" on the DIV containing the video. Whether you can actually get the video to start playing depends on the YouTube API, but if there is a suitable call, you can call it in the same function.