I have a very, very simple webpage, It consists of a large background image and a button in the centre of this image (the button is placed in a div to position it), I want this button to be clickable, and when clicked, replaced with ANOTHER div which will show a film trailer.
Every solution I e across implements JS and is to show/hide the div and does not replace the show/hide button.
I simply want to SHOW the div, it does not need to be hidden after (as the button will hopefully be replaced anyway).
Almost identical to this example on the Duke Nukem website : /
When you click play trailer, it appears central. The only difference between this and what I want to do is I want my button to be central also, and show the trailer over the top of the button (with no ability to hide the trailer after it has begun)
If any one is wondering why I don't just put the trailer on the page and not bother with this is the reason for having it 'show' instead of just embedding the video in a div in the center of the page is that the webpage has a large background which I want to be visible first for impact, then show the trailer.
if this is possible in JS and someone can show me an example, I would be open to that too!
I have a very, very simple webpage, It consists of a large background image and a button in the centre of this image (the button is placed in a div to position it), I want this button to be clickable, and when clicked, replaced with ANOTHER div which will show a film trailer.
Every solution I e across implements JS and is to show/hide the div and does not replace the show/hide button.
I simply want to SHOW the div, it does not need to be hidden after (as the button will hopefully be replaced anyway).
Almost identical to this example on the Duke Nukem website : http://www.dukenukemforever./full/us/
When you click play trailer, it appears central. The only difference between this and what I want to do is I want my button to be central also, and show the trailer over the top of the button (with no ability to hide the trailer after it has begun)
If any one is wondering why I don't just put the trailer on the page and not bother with this is the reason for having it 'show' instead of just embedding the video in a div in the center of the page is that the webpage has a large background which I want to be visible first for impact, then show the trailer.
if this is possible in JS and someone can show me an example, I would be open to that too!
Share Improve this question edited May 6, 2011 at 17:32 SLaks 889k181 gold badges1.9k silver badges2k bronze badges asked May 6, 2011 at 16:52 Jon KyteJon Kyte 2,0203 gold badges28 silver badges41 bronze badges 04 Answers
Reset to default 6You can use the :target selector.
Demo
What you could do is to use absolute positioning and z-index rules of css to display the div that shows the trailer on top of the first div, This can be done in javascript using the style property of the div element
There is a way to do this from straight HTML and CSS3 using the :target selector (which is only supported on the most recent of browsers). In the ments below SLaks show you an example if you follow the jsfiddle link.
There are many examples on the internet that will walk you threw showing / hiding a div onclick using JavaScript. Here is an example: http://www.learningjquery./2006/09/slicker-show-and-hide
Could you not use CSS with:
div.button:active {
visibility:visible;
}
You could also use CSS expressions I'm sure, expressions, however, are deprecated and hardly supported.