Jump to content

Help with a Javascript button attributes...


Tio777

Recommended Posts

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: [{
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...

 

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();
downImage = new Image();
normalImage = new Image();
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

only the button attributes...

 

These...

 

upImage = new Image();
downImage = new Image();
normalImage = new Image();
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: [{
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: [{
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();
downImage = new Image();
normalImage = new Image();
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

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.

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...