Faire réapparaître un lien après la lecture de la video
cindyy
-
cindyy -
cindyy -
Bonjour,
Je voulais savoir comment faire pour faire réapparaître le lien sur lequel je clip pour lancer la vidéo, une fois celle-ci terminée.
PS : Le lien se trouve au centre de ma video en premier plan, il y a ensuite un calque avec une opacité en second plan et ma vidéo en troisième plan.
Une autre petite question, j'aimerais faire apparaitre des petites barres verticales blanches entre chaque mot de mon menu.
Voila mon code si ça peut aider:
XHTML :
<!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">
<div id="mon-conteneur">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<link href="habillage.css" rel="stylesheet" type="text/css" />
<div id="menu">
<ul>
<li><a href="#"><img src="1.png" height="60" /></a></li>
<li><a href="#"><img src="2.png" height="60" /></a>
<ul>
<li><a href="#">Sous-item 1</a></li>
<li><a href="#">Sous-item 2</a></li>
<li><a href="#">Sous-item 3</a></li>
</ul>
</li>
<li><a href="#"><img src="3.png" height="60" /></a>
<ul>
<li><a href="#">Sous-item 1</a></li>
<li><a href="#">Sous-item 2</a></li>
<li><a href="#">Sous-item 3</a></li>
</ul>
</li>
<li><a href="#"><img src="4.png" height="60" /></a>
<ul>
<li><a href="#">Sous-item 1</a></li>
<li><a href="#">Sous-item 2</a></li>
<li><a href="#">Sous-item 3</a></li>
</ul>
</li>
<li><a href="#"><img src="5.png" height="60" /></a>
<ul>
<li><a href="#">Sous-item 1</a></li>
<li><a href="#">Sous-item 2</a></li>
<li><a href="#">Sous-item 3</a></li>
</ul>
</li>
<li><a href="#"><img src="6.png" height="60" /></a>
<ul>
<li><a href="#"><p><label for= "textfield"></label>
<input name="textfield" type="text" id="textfield" value="RECHERCHE" size="30" /></p></a></li>
</ul>
</li>
</ul>
</div>
</head>
<body>
<div id="opac"></div>
<span id="click_here"><img src="TITRE.png" width="70%" /></span>
<video width="100%" height="600" controls="controls" preload="auto" id="video">
<source src="VOGUE Bal Masqué (Jan '11).MP4" type="video/mp4"/>
</video>
javascript
<script type="text/javascript">
var vid = document.getElementById("video");
var op = document.getElementById("opac");
var cli = document.getElementById("click_here");
cli.onclick = function() {
op.style.display = "none";
cli.style.display = "none";
vid.play();
}
</script>
<div id="bottom">
<img src="ysl.jpg" width="100%" /></div>
<script language="javascript">top.resizeTo(window.screen.availWidth,
window.screen.availHeight);</script>
</body>
</div>
</html>
CSS :
@charset "UTF-8";
/* CSS Document */
body {
background-color: #000;
margin: 0; /* pour éviter les marges */
width:100%;
}
#menu {
position:absolute;
z-index: 200;
}
#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
top:50px;
}
#menu li {
float:left;
margin:auto;
padding:0;
background-color:black;
}
#menu li a {
display:block;
width:100px;
color:white;
text-decoration:none;
padding:5px;
border:medium;
border-left-color:#FFFFFF;
margin-left:5px;
margin-right:5px;
}
#menu li a:hover {
color:#FFD700;
}
#menu ul li ul {
display:none;
}
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;
}
#menu li ul {
position:absolute;
}
#video{
width:1000px;
}
#opac {
margin-top:50px;
position: absolute;
background-color: black;
opacity: 0.8;
z-index: 100;
height: 500px;
width: 100%;
}
video {
z-index: -100;
}
#click_here {
color: white;
font-size: 30px;
left: 20%;
top: 290px;
z-index: 200;
position: absolute;
font:Tahoma, Geneva, sans-serif;
text-decoration:underline;
}
#mon-conteneur{
margin: auto;
width: 960px;
}
#bottom{
padding-bottom: 30px;
}
Je voulais savoir comment faire pour faire réapparaître le lien sur lequel je clip pour lancer la vidéo, une fois celle-ci terminée.
PS : Le lien se trouve au centre de ma video en premier plan, il y a ensuite un calque avec une opacité en second plan et ma vidéo en troisième plan.
Une autre petite question, j'aimerais faire apparaitre des petites barres verticales blanches entre chaque mot de mon menu.
Voila mon code si ça peut aider:
XHTML :
<!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">
<div id="mon-conteneur">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<link href="habillage.css" rel="stylesheet" type="text/css" />
<div id="menu">
<ul>
<li><a href="#"><img src="1.png" height="60" /></a></li>
<li><a href="#"><img src="2.png" height="60" /></a>
<ul>
<li><a href="#">Sous-item 1</a></li>
<li><a href="#">Sous-item 2</a></li>
<li><a href="#">Sous-item 3</a></li>
</ul>
</li>
<li><a href="#"><img src="3.png" height="60" /></a>
<ul>
<li><a href="#">Sous-item 1</a></li>
<li><a href="#">Sous-item 2</a></li>
<li><a href="#">Sous-item 3</a></li>
</ul>
</li>
<li><a href="#"><img src="4.png" height="60" /></a>
<ul>
<li><a href="#">Sous-item 1</a></li>
<li><a href="#">Sous-item 2</a></li>
<li><a href="#">Sous-item 3</a></li>
</ul>
</li>
<li><a href="#"><img src="5.png" height="60" /></a>
<ul>
<li><a href="#">Sous-item 1</a></li>
<li><a href="#">Sous-item 2</a></li>
<li><a href="#">Sous-item 3</a></li>
</ul>
</li>
<li><a href="#"><img src="6.png" height="60" /></a>
<ul>
<li><a href="#"><p><label for= "textfield"></label>
<input name="textfield" type="text" id="textfield" value="RECHERCHE" size="30" /></p></a></li>
</ul>
</li>
</ul>
</div>
</head>
<body>
<div id="opac"></div>
<span id="click_here"><img src="TITRE.png" width="70%" /></span>
<video width="100%" height="600" controls="controls" preload="auto" id="video">
<source src="VOGUE Bal Masqué (Jan '11).MP4" type="video/mp4"/>
</video>
javascript
<script type="text/javascript">
var vid = document.getElementById("video");
var op = document.getElementById("opac");
var cli = document.getElementById("click_here");
cli.onclick = function() {
op.style.display = "none";
cli.style.display = "none";
vid.play();
}
</script>
<div id="bottom">
<img src="ysl.jpg" width="100%" /></div>
<script language="javascript">top.resizeTo(window.screen.availWidth,
window.screen.availHeight);</script>
</body>
</div>
</html>
CSS :
@charset "UTF-8";
/* CSS Document */
body {
background-color: #000;
margin: 0; /* pour éviter les marges */
width:100%;
}
#menu {
position:absolute;
z-index: 200;
}
#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
top:50px;
}
#menu li {
float:left;
margin:auto;
padding:0;
background-color:black;
}
#menu li a {
display:block;
width:100px;
color:white;
text-decoration:none;
padding:5px;
border:medium;
border-left-color:#FFFFFF;
margin-left:5px;
margin-right:5px;
}
#menu li a:hover {
color:#FFD700;
}
#menu ul li ul {
display:none;
}
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;
}
#menu li ul {
position:absolute;
}
#video{
width:1000px;
}
#opac {
margin-top:50px;
position: absolute;
background-color: black;
opacity: 0.8;
z-index: 100;
height: 500px;
width: 100%;
}
video {
z-index: -100;
}
#click_here {
color: white;
font-size: 30px;
left: 20%;
top: 290px;
z-index: 200;
position: absolute;
font:Tahoma, Geneva, sans-serif;
text-decoration:underline;
}
#mon-conteneur{
margin: auto;
width: 960px;
}
#bottom{
padding-bottom: 30px;
}
A voir également:
- Faire réapparaître un lien après la lecture de la video
- Créer un lien pour partager des photos - Guide
- Montage video windows - Guide
- Lien url - Guide
- Nommez une application d'appel vidéo ou de visioconférence - Guide
- Comment télécharger une vidéo youtube - Guide
1 réponse
salut, je vois que je t'ai corrigé ton code tout à l'heure pour rien, tu as gardé celui bourré d'erreurs....tampis
cindyy
Mon menu ne marchait plus quand j'ai fais les corrections, du coup j'ai remis l'ancien code, mais je suis en train de bien relire vos conseils car j'ai du faire une erreur en le recopiant.
