Background/Start Menu
Maybe I am going about this wrong but basically I have defined title 1 as not having any video asset. So at start no video plays. Instead you see a background image ("BACKGROUND") and a little menu panel ("TRAY"):
<styling>
<style id="BTNSTYLE" style:position="absolute" style:backgroundFrame="0"
style:width="88px" style:height="88px"
style:y="5px" style:x="5px"/>
<style id="TRAYTEXT" style:position="absolute" style:backgroundFrame="0"
style:backgroundImage="url('MENU/TRAY_TEXT.png')"
style:width="622px" style:height="50px"
style:y="95px" style:x="55px" />
<style id="BACKGROUND" style:position="absolute" style:backgroundFrame="0"
style:backgroundImage="url('MENU/BKG.png')"
style:y="0px" style:x="0px"
style:width="1280px" style:height="720px" />
</styling>
<body>
<div id="TRAY"
style:position="absolute" style:x="250px" style:y="900px"
style:width="1007px" style:height="177px"
style:backgroundImage="url('MENU/TRAY.png')">
<div style:position="absolute" style:x="75px" style:y="0px"
style:width="95px" style:height="95px">
<button id="BTN01" style="BTNSTYLE" accessKey="VK_1"
style:backgroundImage="url('MENU/BTN_NORM.png')
url('MENU/BTN_FOC.png')
url('MENU/BTN_FOC_ACT.png')" />
</div>
<div style:position="absolute" style:x="205px" style:y="0px"
style:width="95px" style:height="95px">
<button id="BTN02" style="BTNSTYLE" accessKey="VK_1"
style:backgroundImage="url('MENU/BTN_NORM.png')
url('MENU/BTN_FOC.png')
url('MENU/BTN_FOC_ACT.png')" />
</div>
<div style:position="absolute" style:x="335px" style:y="0px"
style:width="95px" style:height="95px">
<button id="BTN03" style="BTNSTYLE" accessKey="VK_1"
style:backgroundImage="url('MENU/BTN_NORM.png')
url('MENU/BTN_FOC.png')
url('MENU/BTN_FOC_ACT.png') " />
</div>
<div style:position="absolute" style:x="575px" style:y="0px"
style:width="95px" style:height="95px">
<button id="BTN04" style="BTNSTYLE" accessKey="VK_1"
style:backgroundImage="url('MENU/BTN_NORM.png')
url('MENU/BTN_FOC.png')
url('MENU/BTN_FOC_ACT.png') " />
</div>
<div style="TRAYTEXT">
</div>
</div>
<div style="BACKGROUND">
</div>
</body>
Then what I do is attempt to set visibility on the background to "hidden" in the js when a video item is selected:
function OnStartButtonPressed(evt) {
document.BTN01.style.backgroundFrame = "0";
document.BTN02.style.backgroundFrame = "0";
document.BTN03.style.backgroundFrame = "0";
evt.target.style.backgroundFrame = "2";
evt.target.state.actioned = "true";
evt.target.state.unsetProperty("actioned");
var id = evt.target.getAttribute("id");
if (id == "BTN01") {
document.BACKGROUND.style.visibility = "hidden";
Player.playlist.titles["greenday"].jump("00:01:10:00", false);
}
if (id == "BTN02") {
Player.playlist.titles["greenday"].jump("00:02:10:00", false);
}
if (id == "BTN03") {
Player.playlist.titles["greenday"].jump("00:02:50:00", false);
}
if (id == "BTN04") {
Player.playlist.titles["greenday"].jump("00:02:50:00", false);
}
}
That however is not working. The background images stays, covering the video. :(
Perhaps I am simply not understanding a basic principle of how to put these elements together? It seems like building a front page menu that is a gateway to video content should be straightforward.
[16272 byte] By [wmerydith] at [2008-2-21] 