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.
