Jump to content

Tio777

Members
  • Content Count

    3
  • Joined

  • Last visited

Community Reputation

0 Neutral

About Tio777

  • Rank
    Newbie
  1. only the button attributes... These... upImage = new Image(); upImage.src = "http://disc.maximumi...re-Rollover.png"; downImage = new Image(); downImage.src = "http://disc.maximumi...kHere-Click.png" normalImage = new Image(); normalImage.src = "http://disc.maximumi...Here-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; } I don't know where to put them so they work. When I put them in right after the button it doesn't work. So, here's a script that works... <div id="player"></div> <script type="text/javascript"> jwplayer("player").setup({ playlist: [{ image: "http://disc.maximumimpact.ca/videos/DISC-Title.png", sources: [{ file: "http://disc.maximumimpact.ca/videos/DISC Assessment Intro.m4v" },{ file: "http://disc.maximumimpact.ca/videos/DISC Assessment Intro.webm" }] }], width: 853, height: 480, 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 = "#ffffff"; 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 = "center"; el2.style.top = ((playerHeightPX*3)/6) -"40" + "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"; 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); 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>'; 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.google.com"); } 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> Then when I insert the button attributes it doesn't work. Like this... <div id="player"></div> <script type="text/javascript"> jwplayer("player").setup({ playlist: [{ image: "http://disc.maximumimpact.ca/videos/DISC-Title.png", sources: [{ file: "http://disc.maximumimpact.ca/videos/DISC Assessment Intro.m4v" },{ file: "http://disc.maximumimpact.ca/videos/DISC Assessment Intro.webm" }] }], width: 853, height: 480, 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 = "#ffffff"; 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 = "center"; el2.style.top = ((playerHeightPX*3)/6) -"40" + "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"; 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); 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>'; upImage = new Image(); upImage.src = "http://disc.maximumi...re-Rollover.png"; downImage = new Image(); downImage.src = "http://disc.maximumi...kHere-Click.png" normalImage = new Image(); normalImage.src = "http://disc.maximumi...Here-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; } 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.google.com"); } 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> I just want the button to change on mouse rollover and click but keep everything else exactly the same.
  2. the script works. No errors. I just don't know where to place the button attributes in order for them to work.
  3. I have modified this script to include a call-to-action button when a video ends. What I'm trying to do is get the button to work on mouse rollover and click. The button works and comes up after the video ends but I can't seem to place the attributes in a logical place to get them to work. It's a little advanced for me so I'm hoping that someone can do this and explain what they did so I can learn. I've spent hours on this! LOL Here's the whole script... <div id="player"></div> <script type="text/javascript"> jwplayer("player").setup({ playlist: [{ image: "http://disc.maximumimpact.ca/videos/DISC-Title.png", sources: [{ file: "http://disc.maximumimpact.ca/videos/DISC Assessment Intro.m4v" },{ file: "http://disc.maximumimpact.ca/videos/DISC Assessment Intro.webm" }] }], width: 853, height: 480, 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 = "#ffffff"; 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 = "center"; el2.style.top = ((playerHeightPX*3)/6) -"40" + "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"; 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); txt.outerHTML = '<a href="http://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>'; 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://google.com"); } 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> Here is a complete script of the button that works... <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> I'm trying to put them together!
×
×
  • Create New...