javascript - 将 Javascript 超链接替换为 Javascript 按钮

标签 javascript jwplayer imagebutton

我是这里的新手。只是用 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>

有人可以帮忙吗？我希望视频结束，然后让按钮出现在视频中央，背景变灰。

最佳答案

执行此操作的一个具体方法是删除

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');

因为已经没有必要了。 然后在el2.appendChild(txt);之后放入

txt.outerHTML = '<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>';

它必须在 appendChild() 之后发生，因为在 outerHTML 附加到 DOM 之前您无法设置它。您希望确保定义所有事件函数(例如 changeImage)，因此也将脚本放入 HTML 中。

更好的方法是使用 JavaScript 函数正确地重新创建此按钮。这意味着你会做一些类似的事情

var button = document.createElement('a');
button.href = 'http://www.google.com/';
button.addEventListener('mouseover', changeImage); // Make sure you define changeImage
... // Create all the child elements and set their respective properties in JavaScript
el2.appendChild(button);

关于javascript - 将 Javascript 超链接替换为 Javascript 按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29453606/

上一篇：javascript - 这个 Curl POST 命令的 Angular JS 等价物是什么？

下一篇：typeof undefined 和 void 之间的 Javascript 区别？

相关文章：

javascript - jwplayer 不工作

java - 如果应用程序关闭并重新打开，动态创建的图像按钮即使在使用后也为空

java - 在Java中动态创建从ArrayList到RelativeLayout的ImageButton

android - 将 Material Design Touch Ripple 应用于 ImageButton？

javascript - 有谁知道即使页面已刷新，我如何保留 Javascript 变量？

android - 我想了解如何在原生 Android 应用程序上播放直播/点播

html - 如何让我的 jwplayer 视频响应？

javascript - 无法使用 Javascript/Jquery 动态检查单选按钮

javascript - 使用 for 循环将 3 个函数合并为一个函数

javascript - 无法在 Safari 中选择文本

©2024 IT工具网  联系我们