admin管理员组

文章数量:1405587

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!

• javascript
• html
• css

Share Improve this question Follow edited May 6, 2011 at 17:32 SLaks 889k181181 gold badges1.9k1.9k silver badges2k2k bronze badges asked May 6, 2011 at 16:52 Jon KyteJon Kyte 2,02033 gold badges2828 silver badges4141 bronze badges 0

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

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

本文标签： javascriptShow ltdivgt without JSStack Overflow