How to show a hidden swf movie? - javascript

I have 2 swf in my html page which are video and popup. When mouse over to video.swf the hidden popup.swf will show and play.
<body>
<object id="video" class="video" width="300" height="250">
<param name="movie" value="thumbnail.swf">
<embed src="thumbnail.swf" quality="high" width="300" height="250" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/>
</object>
<img class="image" src="300x250.jpg">
<object id="popup" class="popup" width="790" height="290">
<param name="movie" value="790x290.swf">
<embed src="790x290.swf" width="300" height="250"> </embed>
</object>
<script>
document.getElementById("video").onmouseover = over;
(function over()
{
alert("mouseovertest");
});
</script>
The mouseover on video.swf is working fine but Im not sure how to make the popup.swf shows and play.

put this in your <script> section:
document.getElementById("popup").onmouseover = over;

Related

Change Color of Element when Printing

I am trying to print the my whole website, normally the background turns white which is good, but i cant get the background color of an element to change to white to save ink.
This is the code
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="900" height="700" id="Kirchhoff" align="middle">
<param name="movie" value="Kirchoff.swf">
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="bgcolor" value="#ffffff">
<embed src="Kirchhoff.swf" quality="high" bgcolor="#DDB85F" width="900" height="700" name="Kirchhoff" align="middle" allowScriptAccess="sameDomain" pluginspage="http://www.macromedia.com/go/getflashplayer" wmode="opaque" />
<br>
and this it the print code so far
SCRIPT LANGUAGE="JavaScript">
if (window.print) {
document.write('<form> '
+ '<input type=button name=print value="Imprimir" '
+ 'onClick="javascript:window.print()"></form>');
}
</script>
You should do this with CSS, not JavaScript.
#media print{
.element {
background-color: white;
}
}
#JoshSpears this would be the new one
<link rel="stylesheet" href="styles.css">
</head>
<body bgcolor="#7CF8EC">
<br>
<br>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="900" height="700" id="Kirchhoff" align="middle">
<param name="movie" value="Kirchoff.swf">
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="bgcolor" value="#ffffff">
<embed src="Kirchhoff.swf" quality="high" bgcolor="#DDB85F" width="900" height="700" name="Kirchhoff" align="middle" allowScriptAccess="sameDomain" pluginspage="http://www.macromedia.com/go/getflashplayer" wmode="opaque" />
<br>
<center><SCRIPT LANGUAGE="JavaScript">
if (window.print) {
document.write('<form> '
+ '<input type=button name=print value="Imprimir" '
+ 'onClick="javascript:window.print()"></form>');
}
</script>
</center>
</body>
</html>

How to load new page on click flash object

Am working on a flash slider.I have 2 images embeded in it.. is it possible to click on the images and load a new html page?Here is my code:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="308" height="118" title="location">
<param name="movie" value="<?=base_url()?>flash/home/locationsliders.swf">
<param name="quality" value="high">
<embed src="<?=base_url()?>flash/home/locationsliders.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="308" height="118" ></embed>
</object>
<script type="text/javascript">
AC_FL_RunContent('codebase',
'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','308','height',
'118','title','location','src',
'<=base_url()>flash/home/locationsliders',
'quality','high','pluginspage',
'http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash',
'movie','<?=base_url()?>flash/home/locationsliders' ); //end AC code
</script>

Pass URL Parameter from Javascript to Flash Object in HTML

I have no HTML knowledge, I just have a simple task that I can't seem to grasp the concept of doing.
I want to take a url parameter and pass it to a swf object. I've figured out getting the parameter via javascript, but getting that return string to the object is my issue.
<!DOCTYPE html>
<html>
<body>
<script>
function myFunction() {
return "http://www.Twitch.tv/swflibs/TwitchPlayer.swf?channel=twitch";
}
</script>
Link Example
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="800" height="600" id="mymoviename">
<embed src="#" onload="this.src=myFunction()" quality="high" bgcolor="#ffffff"
width="800" height="600"
name="mymoviename" align="" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>
</body>
</html>
Markup based on Suggested answer(still does not work)
<!DOCTYPE html>
<html>
<body>
Link Example
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
width="800" height="600" id="mymoviename">
<embed src="#" quality="high" bgcolor="#ffffff" width="800" height="600"
name="mymoviename" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>
<script>
function myFunction() {
return "http://www.Twitch.tv/swflibs/TwitchPlayer.swf?channel=twitch";
}
document.getElementById('mymoviename').src = myFunction();
</script>
</body>
</html>
You can do it by following the following steps.
Move your <script> to just before </body>
And add the below code in <script>:
Code:
function myFunction() {
return "http://www.Twitch.tv/swflibs/TwitchPlayer.swf?channel=twitch";
}
document.getElementById('mymoviename').src = myFunction();
I found this article:
http://www.permadi.com/tutorial/flashVars/
Instead of passing the javascript variable to html markup, just write the markup with the script itself. Here is the working code:
<HTML><HEAD><TITLE>Example</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
var myQueryString=document.location.search;
// remove the '?' sign if exists
if (myQueryString[0]='?')
{
myQueryString=myQueryString.substr(3, myQueryString.length-1);
}
document.write(
'<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://macromedia.com/cabs/swflash.cab#version=6,0,0,0" WIDTH="250" HEIGHT="250" id="flaMovie1"> <embed src="'+myQueryString+'" quality="high" bgcolor="#ffffff" width="800" height="600" name="mymoviename" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">\n'+
'</embed>\n'+
'</OBJECT>');
</SCRIPT>
</BODY>
</HTML>

Working with onStateChange of Youtube player

I was trying to use the onStateChange property of Youtube videos, And I could not get it to work. I searched a lot over it but could not really understand how it works. Here is the code which I tried, I added a console.log, which does not get called. Can someone help me?
This is my code:
<script type="text/javascript">
function onYouTubePlayerReady(playerId) {
var player = document.getElementById("YTplayer");
player.addEventListener("onStateChange", "onplayerStateChange");
}
function onplayerStateChange(newState) {
console.log('test');
}
</script>
<object style="height: 390px; width: 640px">
<param name="movie" value="http://www.youtube.com/v/u1zgFlCw8Aw?version=3">
<param name="allowFullScreen" value="true">
<param name="allowScriptAccess" value="always">
<embed
src="http://www.youtube.com/v/u1zgFlCw8Aw?version=3"
type="application/x-shockwave-flash"
allowfullscreen="true"
allowScriptAccess="always"
width="640" height="390"
id="YTplayer">
</object>
You must define the id in playerapiid pramameter or use the given one in the onYouTubePlayerReady callback
<object style="height: 390px; width: 640px">
<param name="movie" value="http://www.youtube.com/v/u1zgFlCw8Aw?version=3&playerapiid=YTplayer">
<param name="allowFullScreen" value="true">
<param name="allowScriptAccess" value="always">
<embed
src="http://www.youtube.com/v/u1zgFlCw8Aw?version=3&playerapiid=YTplayer"
type="application/x-shockwave-flash"
allowfullscreen="true"
allowScriptAccess="always"
width="640" height="390"
id="YTplayer" />
</object>

Javascript loop to hide all flash

How can I make JavaScript loop left all <object> elements and hide them?
var objects = document.getElementsByTagName('object');
for (var i=0, n=objects.length;i<n;i++) objects[i].style.display='none';
Update. Playing with something I had thought about before. It works in Fx with object, but although I could make it work in IE with divs, I could not make it work in IE - not even with classnames on the object.
<html>
<head>
<title></title>
<style type="text/css">
object {
display:block;
}
</style>
<script type="text/javascript">
// got some of this from http://www.javascriptkit.com/dhtmltutors/externalcss3.shtml
function toggle() {
var mysheet=document.styleSheets[0]
var firstrule=mysheet.cssRules? mysheet.cssRules[0]: mysheet.rules[0]
firstrule.style.display=(firstrule.style.display=="block")?"none":"block"
return false
}
</script>
</head>
<body>
toggle the objects<br />
<object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/tgbNymZ7vqY?fs=1&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/tgbNymZ7vqY?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>
<object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/VnT7pT6zCcA?fs=1&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/VnT7pT6zCcA?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>
<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/PhMCa1_9FYg?fs=1&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/PhMCa1_9FYg?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>
</body>
</html>
I think you can do this with something like this css-rule:
html object { display: none; }
instead of javascript.
or use a class + javascript
html object.no-show { display: none; }
and use a loop to apply the class on all objects.
or toggle the class to the body:
html body.hide-object object { display: none; }
this is with javascript with no loop.

Categories

Resources