【发布时间】：2015-04-05 02:47:18
【问题描述】：
我是这里的新手。只是用 Javascript 咬牙切齿。我今天花了很长时间浏览每个论坛，我可以尝试找到解决方案。我发现学习这些东西很有趣！
无论如何，我正在使用以下脚本，该脚本与 jw 播放器建立号召性用语链接...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Call to Action</title>
<script type='text/javascript' src='http://p.jwpcdn.com/6/6/jwplayer.js'>
</script>
<style type="text/css">
body {
margin: 0; padding: 0
}
</style>
</head>
<body>
<div id="player"></div>
<script type="text/javascript">
jwplayer("player").setup({
playlist: [{
image: "http://content.bitsontherun.com/thumbs/w5co0c24-480.jpg",
sources: [{
file: "http://content.bitsontherun.com/videos/w5co0c24-hV866gPy.mp4"
},{
file: "http://content.bitsontherun.com/videos/w5co0c24-hV866gPy.webm"
}]
}],
width: 600,
height: 300,
stretching: "fill"
});
jwplayer().onComplete(function() {
var el = document.createElement("div");
var el2 = document.createElement("div");
var el3 = document.createElement("div");
var el4 = document.createElement("div");
var txt = document.createElement('a');
if (jwplayer().getRenderingMode() == "html5"){
var theBody = document.getElementById(player.id);
} else {
var theBody = document.getElementById(player.id+"_wrapper");
}
var playerWidthPX2 = theBody.style.width;
var playerWidthPX = parseFloat(playerWidthPX2);
var playerHeightPX2 = theBody.style.height;
var playerHeightPX = parseFloat(playerHeightPX2);
el3.setAttribute('id', 'bg');
el3.style.height = playerHeightPX + "px";
el3.style.width = playerWidthPX2;
el3.style.background = "#333333";
el3.style.opacity = "0.70";
el3.style.position = "absolute";
el3.style.backgroundImage="url('background.png')";
el.setAttribute('src', 'background.png');
if (jwplayer().getRenderingMode() == "html5"){
} else {
el3.style.top = playerHeightPX-playerHeightPX+"px";
}
el3.style.zIndex = "999";
el3.width = playerWidthPX;
el3.height = playerHeightPX;
el2.setAttribute('id', 'bg2');
el2.style.height = playerHeightPX + "px";
el2.style.width = playerWidthPX2;
el2.style.position = "absolute";
el2.style.zIndex = "999";
el2.width = playerWidthPX;
el2.height = playerHeightPX;
theBody.appendChild(el3);
theBody.appendChild(el2);
el2.style.textAlign = "center";
el2.style.left = ((playerWidthPX*2)/6) -"5" + "px";
el2.style.top = ((playerHeightPX*3)/6) -"30" + "px";
el.setAttribute('id', 'hyperlink');
el.style.height = "30px";
el.style.width = "30px";
el2.width = "30";
el2.height = "30";
el.style.position = "relative";
el.setAttribute('frameBorder', '0');
el.style.top = "11px";
el.style.left = "202px";
el.style.textAlign = "center";
el.style.marginBottom = "-16px";
el.style.marginRight = "8px";
var message = 'Did you like the Trailer?<br />Then <u>see the full movie! </u>';
txt.innerHTML = message;
txt.href = "http://www.youtube.com/watch?v=TEgQM6ZhkWg";
txt.target = "_blank";
txt.style.textDecoration = "none";
txt.style.outline = "0";
txt.style.MozUserSelect = 'none';
txt.style.KhtmlUserSelect = 'none';
txt.style.WebkitUserSelect = 'none';
txt.style.OUserSelect = 'none';
txt.style.UserSelect = 'none';
txt.style.fontSize = "18px";
txt.style.color = "#ffffff"
txt.style.position = "absolute";
txt.style.marginLeft = "6px";
txt.style.marginTop = "4px";
txt.style.fontFamily = "arial,_sans";
txt.setAttribute('id', 'txt');
el4.setAttribute('id', 'replay');
el4.style.height = "20px";
el4.style.width = "20px";
el4.height = "20";
el4.width = "20";
el4.style.position = "absolute";
el4.style.top = "-" + playerHeightPX/2 + "px";
el4.style.marginTop = "50px";
el4.style.left = playerWidthPX/2 + "px";
el4.style.marginLeft = "50px";
el4.style.backgroundImage="url('replay.png')";
el4.setAttribute('src', 'replay.png');
el2.appendChild(txt);
el2.appendChild(el);
el2.appendChild(el4);
el.style.backgroundImage="url('hyperlink.png')";
el.setAttribute('src', 'hyperlink.png');
el.style.cursor = "pointer";
el.style.display = "table";
el2.style.display = "table";
el3.style.display = "table";
el4.style.display = "table";
txt.style.display = "table";
el.onmouseup = function(){
window.open("http://www.youtube.com/watch?v=TEgQM6ZhkWg");
}
el4.style.cursor = "pointer";
el4.onmouseup = function(){
el.style.display = "none";
el2.style.display = "none";
el3.style.display = "none";
el4.style.display = "none";
txt.style.display = "none";
jwplayer().play();
}
});
</script>
</body>
</html>
我想用一个按钮替换文本。具体来说，这个按钮...
<a href="http://www.google.com/"
onMouseOver="return changeImage()"
onMouseOut= "return changeImageBack()"
onMouseDown="return handleMDown()"
onMouseUp="return handleMUp()"
><img
name="jsbutton" src="http://disc.maximumimpact.ca/button/ClickHere-Normal.png" width="402" height="127" border="0"
alt="javascript button"></a>
<script language="JavaScript">
upImage = new Image();
upImage.src = "http://disc.maximumimpact.ca/button/ClickHere-Rollover.png";
downImage = new Image();
downImage.src = "http://disc.maximumimpact.ca/button/ClickHere-Click.png"
normalImage = new Image();
normalImage.src = "http://disc.maximumimpact.ca/button/ClickHere-Normal.png";
function changeImage()
{
document.images["jsbutton"].src= upImage.src;
return true;
}
function changeImageBack()
{
document.images["jsbutton"].src = normalImage.src;
return true;
}
function handleMDown()
{
document.images["jsbutton"].src = downImage.src;
return true;
}
function handleMUp()
{
changeImage();
return true;
}
</script>
有人可以帮忙吗？我希望视频结束，然后按钮出现在视频的中心，背景为灰色。
【问题讨论】：
标签： javascript jwplayer imagebutton