Jump to content

Help with a Javascript button attributes...


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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...