Tio777 Posted April 6, 2015 Share Posted April 6, 2015 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! Link to comment Share on other sites More sharing options...
justsomeguy Posted April 6, 2015 Share Posted April 6, 2015 What happens when you run that? Are you checking for error messages in the console? Link to comment Share on other sites More sharing options...
Tio777 Posted April 6, 2015 Author Share Posted April 6, 2015 the script works. No errors. I just don't know where to place the button attributes in order for them to work. Link to comment Share on other sites More sharing options...
justsomeguy Posted April 6, 2015 Share Posted April 6, 2015 the script worksI just don't know where to place the button attributes in order for them to work.So it works, or it doesn't work? What attributes are you referring to, the event handlers? Link to comment Share on other sites More sharing options...
Tio777 Posted April 7, 2015 Author Share Posted April 7, 2015 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted April 7, 2015 Share Posted April 7, 2015 Would it not be better to add id or className, rather than inline style attribute and all those css properties. Link to comment Share on other sites More sharing options...
justsomeguy Posted April 7, 2015 Share Posted April 7, 2015 It doesn't work because you put the function definitions inside the jwplayer().onComplete callback, so they are only defined inside that function. If you move the definitions out then they will be defined globally. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now