Jump to content

Tio777

Members
 View Profile  See their activity

  • Posts

    3

  • Joined

  • Last visited

 Content Type 

Posts posted by Tio777

    Help with a Javascript button attributes...

    in JavaScript

    Posted

    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.

    Help with a Javascript button attributes...

    in JavaScript

    Posted

    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!

×
×
  • Create New...