2
我是一个新手。只需用Javascript切割我的牙齿。今天我花了很长时间去经历每个论坛，我都试图找到解决方案。我发现学习这些东西很有趣！用JavaScript替换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>
任何人都可以帮忙吗？我希望视频结束，然后让该按钮出现在视频中心，背景呈灰色。
我非常感谢您的回复Wio！非常感谢！ – 2015-04-05 13:57:45
这个作品真棒！我唯一需要的方向就是在哪里调整按钮的位置。在玩家窗口的右边看起来太远了。看到这个截图：http://maximumimpact.ca/images/Screenshot-js.png我会用什么元素来调整？ – 2015-04-05 20:33:21
您可以修改它的顶部和左侧CSS属性，或者如果这不起作用，请修改其边距属性。 – Wio 2015-04-06 03:47:19