html in javascript

Forum Moderators: open

Message Too Old, No Replies

html in javascript

LouiseMarie

9:29 am on Mar 24, 2010 (gmt 0)

I've got a script at the top of a web page that checks if flash can play. Inside the else part which is html instead of flash content I've got an image that I would like to add a rollover to but the quotation marks are messing it up.

Heres my code:

if (MM_FlashCanPlay) {
document.write('<object type="application/x-shockwave-flash" data="flash/header.swf" width="500px" height="225px"></object>');
} else {
document.write('');
}

Inside the else part i've got this image:
<img src="images/w2.gif" alt="" style="border:0px;" onmouseover="this.src ='images/w2_ro.gif;'" onmouseout="this.src='images/w2.gif;'" />

can someone help with how to get this to work?

Thanks in advance

astupidname

12:01 pm on Mar 24, 2010 (gmt 0)

If the image is being printed out by javascript with the document.write in the else, then you need to escape the offending quotes most likely. Although most javascript/flash apps these days simply use direct replacement. Idea being the image is in the page by default (not written to page with javascript), and gets replaced by the flash content if flash & javascript supported. Ala swfobject2, which you should maybe look in to switching to instead of the archaic MM_ crap. Just a suggestion.

LouiseMarie

12:20 pm on Mar 24, 2010 (gmt 0)

Thanks for your reply.

I don't know much about javascrip, I can work out what parts i need to change in existing scripts but i'm no good at writing the function from scratch.

How would I "escape the offending quotes"?
or do you know where I could find a link to some alternative methods of checking for flash and displaying html instead?

thanks in advance

Fotiman

1:05 pm on Mar 24, 2010 (gmt 0)

swfobject [code.google.com] is the most common method for embedding Flash content. You should look into that.
To escape quotes, you would would use " instead of " in your string. For example:


document.write("<img src='images/w2.gif' onmouseover='this.src=&quot;images/w2_ro.gif;&quot;' \/>");

Note also that you should escape the / that closes the tag by writing it as \/.

astupidname

1:08 pm on Mar 24, 2010 (gmt 0)

Hi again, LouiseMarie,
I guess I was imagining your scenario at present like this:

if (MM_FlashCanPlay) {
document.write('<object type="application/x-shockwave-flash" data="flash/header.swf" width="500px" height="225px"></object>');
} else {
document.write('<img src="images/w2.gif" alt="" style="border:0px;" onmouseover="this.src =\'images/w2_ro.gif;\'" onmouseout="this.src=\'images/w2.gif;\'" \/>');
}

Note that the document.write uses single quotes to wrap the contents of what it is writing. So any single quotes within the contents being written need to be escaped as above. For example, this will document.write a single quote: document.write('\'');

What I was referring to as far as alternative embedding methods goes, is swfobject2 [code.google.com].

Using swfobject2, and using it's 'dynamic' method in this example, you could do something like:

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("flash/header.swf", "myContent", "500", "225", "9.0.0", "expressInstall.swf"); //checking for version 9 or greater
</script>
</head>
<body>
<div id="myContent">
Alternative content goes here in case flash/javascript not supported
<img src="images/w2.gif" alt="" style="border:0px;" onmouseover="this.src ='images/w2_ro.gif;'" onmouseout="this.src='images/w2.gif;'" />
</div>

Note the image is simply there already, in the placeholder for the swf/flash content which has the id 'myContent'. The contents of that div will be replaced with the flash content if flash & javascript is supported. Plus swfobject2 also gives you ability to check for version support also, the "9.0.0" above. Consult the documentation for passing flashvars/parameters/attributes (or ask me, if interested at all).
swfobject also has a 'static' method you could use instead of the dynamic method, which would go like:

<script type="text/javascript" src="swfobject.js"></script>

<script type="text/javascript">
swfobject.registerObject("myId", "9.0.115", "expressInstall.swf");
</script>

</head>
<body>
<div>

<object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="500" height="225">
<param name="movie" value="flash/header.swf" />

<object type="application/x-shockwave-flash" data="flash/header.swf" width="500" height="225">

<p>Alternative content<img src="images/w2.gif" alt="" style="border:0px;" onmouseover="this.src ='images/w2_ro.gif;'" onmouseout="this.src='images/w2.gif;'" /></p>

</object>

</object>
</div>

There again, the 'alternative content' (your image) will be displayed if no flash support. I personally use the 'dynamic' method, it's very simple really once you get used to it.
[edited=caught the '\/' thanks foti]

LouiseMarie

11:35 am on Mar 30, 2010 (gmt 0)

Ok, thanks for all your help, really appreciate it. I used the escaping quotes for a quick fix last week so that we could publish the site.

I've just implemented the swfobject2 dynamic code and it's great! Loads so much faster than the old script and it's 22 lines less code!

thanks for all your help :)