In the linked fiddle, the example works in both IE 9 and FF; however, it does not work in Chrome, for reasons that elude me. Anyone have any ideas?
http://jsfiddle.net/pkjdzcj5/7/
<div class="test-wrapper">
<h3>Object element with 'data' construct</h3>
<p>For some reason data url is failing (in Chrome), but we can demo image fallback here.</p>
<div class="test-icon icon-color" style="width:400px; height:400px;">
<object type="image/svg+xml" width="320" height="240" data="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTAwIDEwMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTkxLjE3LDgxLjM3NGwwLjAwNi0wLjAwNGwtMC4xMzktMC4yNGMtMC4wNjgtMC4xMjgtMC4xMzQtMC4yNTctMC4yMTYtMC4zNzVsLTM3LjY5LTY1LjI4MyAgIGMtMC42MTEtMS4xMDktMS43NzYtMS44Ny0zLjEzMy0xLjg3Yy0xLjQ3LDAtMi43MzEsMC44ODctMy4yODUsMi4xNTNsLTAuMDA0LTAuMDAyTDkuMzEyLDgwLjUyOWwwLjAzNiwwLjAyMSAgIGMtMC41MDUsMC42MTgtMC44MiwxLjM5Ny0wLjgyLDIuMjU3YzAsMS45ODIsMS42MDcsMy41OSwzLjU4OCwzLjU5aDBoNzUuNzY3djBjMS45ODIsMCwzLjU4OS0xLjYwNywzLjU4OS0zLjU4OSAgIEM5MS40NzIsODIuMjk3LDkxLjM2Miw4MS44MTQsOTEuMTcsODEuMzc0eiBNNTAuMDM1LDc5LjYxN2MtMi44NzQsMC01LjIwMS0yLjI1Ny01LjIwMS01LjEzYzAtMi44NzQsMi4zMjYtNS4yLDUuMjAxLTUuMiAgIGMyLjgwMywwLDUuMTMsMi4zMjUsNS4xMyw1LjJDNTUuMTY2LDc3LjM2LDUyLjgzOCw3OS42MTcsNTAuMDM1LDc5LjYxN3ogTTU1LjE2NSwzNC4yNXYyOC4yOTloLTAuMDAyICAgYzAsMC4wMDUsMC4wMDIsMC4wMSwwLjAwMiwwLjAxNmMwLDEuMTczLTAuOTUsMi4wOTQtMi4wOTQsMi4wOTRjLTAuMDA1LDAtMC4wMDktMC4wMDEtMC4wMTQtMC4wMDF2MC4wMDFoLTYuMDkzICAgYy0xLjE3NCwwLTIuMTIzLTAuOTIxLTIuMTIzLTIuMDk0YzAtMC4wMDUsMC4wMDItMC4wMSwwLjAwMi0wLjAxNmgtMC4wMDJWMzQuMzI2Yy0wLjAwMS0wLjAyNi0wLjAwOC0wLjA1MS0wLjAwOC0wLjA3NyAgIGMwLTEuMTE3LDAuODY1LTEuOTk2LDEuOTM1LTIuMDc4di0wLjAxNmg2LjI4OHYwLjAwMWMxLjE0OSwwLjAwNywyLjA3NCwwLjg5NywyLjEwMywyLjAzOWgwLjAwNXYwLjA1M1YzNC4yNSAgIEM1NS4xNjYsMzQuMjUsNTUuMTY1LDM0LjI1LDU1LjE2NSwzNC4yNXoiLz4KPC9nPgo8L3N2Zz4=">
<img src="http://media.mediatemple.netdna-cdn.com/wp-content/themes/smashing-magazine/images/logo.png" alt="…" />
</object>
</div>
<pre>
<object data="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-alert.svg" type="image/svg+xml">
<img src="http://media.mediatemple.netdna-cdn.com/wp-content/themes/smashing-magazine/images/logo.png" alt="…" />
</object>
</pre>
</div>
Was mislead by the appearances here....
The <object> element itself works just fine in Chrome, just not in an iframe. I did a brief search for bugs, but couldn't find anything.
Have updated the fiddle, http://jsfiddle.net/pkjdzcj5/9/, which behaves pretty much as expected.
<object type="image/svg+xml" width="100" height="100" data="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-alert.svg">
<img src="http://media.mediatemple.netdna-cdn.com/wp-content/themes/smashing-magazine/images/logo.png" alt="…" />
</object>
But, to be clear: data URI works just fine in Chrome
Related
So I have checked some of the other questions here and most of them mention that z-index issues for firefox tend to relate to the fact that one of the items is not position:Absolute.
<div id="AnimatedBanner" style="right:-5px;">
<object style="position:absolute; z-index:-1" width=" 1175" height="400" data="images/AnimatedBanner.swf"></object>
</div>
<div class="banner_text" style="position:absolute; z-index:1;">
</div>
However it always lays the Animatedbanner on top of the banner_text. It works perfectly fine in all of the other browsers but I'm still not sure why it won't work in firefox.
After bit searching i found the solution should be setting "wmode" to "transparent" , so your code should be :
<object style="position:absolute; z-index:-1" width=" 1175" height="400" data="images/AnimatedBanner.swf">
<param name="wmode" value="transparent">
</object>
You can test this fiddle on ff:
http://fiddle.jshell.net/h56q3n09/3/
The image code below works fine in Mozilla, Chrome and Safari but doesn't display in IE9.
It is saved as an image in photoshop for websites and I specified the height and width.
When I write it like this without the slash before "D:"
<img src="D:/obrazki/game.jpg" alt="game" width="1100" height="619" />
it works in IE but then it doesn't display in Mozilla.
<img src="/D:/obrazki/game.jpg" alt="game" width="1100" height="619" />
this code works fine in all browsers apart from IE
<img src="D:/obrazki/game.jpg" alt="game" width="1100" height="619" />
this one works fine in all apart from Mozilla
this is the whole div and there is not css style yet.
<section class="container">
<div class="image_carousel">
<div id="foo2">
<img src="/D:/obrazki/game.jpg" alt="game" width="1100" height="619" />
</div>
</article>
</section>
Do you think it is the extension problem and I should save the image as GIF not jpg. ?
and if I wanted to create separate code for IE would it work if I make comments like these below in my html file? and put the image code inside those comments for IE9?
<!--[if IE]>
<![endif]-->
Shouldn't the image call be:
<img src="/obrazki/game.jpg" alt="game" width="1100" height="619" />
?
Or better yet:
<img src="/obrazki/images/game.jpg" alt="game" width="1100" height="619" />
Where /obrazki would be where you have the pages/scripts to "call" your images..
What about linking to the image on a relative path:
<img src="./link/to/image.jpg"/>
ok, lets do an old and dirty solution...serve up the images for non-ie(s), then serve up the images for ie(s) via conditional comments. (sidenote: there's a few ways to do this, like using a background-image on a wrapper element around the image, but since you are relying on img elements, i'll stick to that method. so
<section class="container">
<article>
<div class="image_carousel">
<div id="foo2">
<img src="/D:/obrazki/game.jpg" alt="game" width="1100" height="619" />
<!--[if lte IE 9]><img src="D:/obrazki/game.jpg" alt="game" width="1100" height="619" /><![endif]-->
</div>
</div>
</article>
</section>
that should work...in theory. you may have fouc or positioning issues, though i doubt the fouc...it's hard to tell without seeing it live, with the rest of the document.
I have an auto generated PDF file by itext and I need to display that PDF file in HTML. My question is: How to display a local PDF file in HTML using pdf.js? Should that PDF file be generated by some standards?
Implementation of a PDF file in your HTML web-page is very easy.
<embed src="file_name.pdf" width="800px" height="2100px" />
Make sure to change the width and height for your needs.
I use Google Docs embeddable PDF viewer. The docs don't have to be uploaded to Google Docs, but they do have to be available online.
<iframe src="https://docs.google.com/gview?url=https://path.com/to/your/pdf.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>
1. Browser-native HTML inline embedding:
<embed
src="http://infolab.stanford.edu/pub/papers/google.pdf#toolbar=0&navpanes=0&scrollbar=0"
type="application/pdf"
frameBorder="0"
scrolling="auto"
height="100%"
width="100%"
></embed>
<iframe
src="http://infolab.stanford.edu/pub/papers/google.pdf#toolbar=0&navpanes=0&scrollbar=0"
frameBorder="0"
scrolling="auto"
height="100%"
width="100%"
></iframe>
Pro:
No PDF file size limitations (even hundreds of MB)
It’s the fastest solution
Cons:
It doesn’t work on mobile browsers
2. Google Docs Viewer:
<iframe
src="https://drive.google.com/viewerng/viewer?embedded=true&url=http://infolab.stanford.edu/pub/papers/google.pdf#toolbar=0&scrollbar=0"
frameBorder="0"
scrolling="auto"
height="100%"
width="100%"
></iframe>
Pro:
Works on desktop and mobile browser
Cons:
25MB file limit
Requires additional time to download viewer
3. Other solutions to embed PDF:
https://mozilla.github.io/pdf.js
https://pdfobject.com
https://viewerjs.org
IMPORTANT NOTE:
Please check the X-Frame-Options HTTP response header. It should be SAMEORIGIN.
X-Frame-Options SAMEORIGIN;
If you want to use pdf.js, I suggest you to read THIS
You can also upload your pdf somewhere (like Google Drive) and use its URL in a iframe
or
<object data="data/test.pdf" type="application/pdf" width="300" height="200">
test.pdf
</object>
you can display easly in a html page like this
<embed src="path_of_your_pdf/your_pdf_file.pdf" type="application/pdf" height="700px" width="500">
In html page for pc is easy to implement
<embed src="study/sample.pdf" type="application/pdf" height="300px" width="100%">
but pdf show in mobile by this code is not possible you must need a plugin
if you have not responsive your site. Then above code pdf not show in mobile but you can put download option after the code
<embed src="study/sample.pdf" type="application/pdf" height="300px" width="100%" class="responsive">
download
The simplest way is to use,
<iframe src="pdf-link">
</iframe>
and if its still getting downloaded instead of viewing, check the server response header, it should have, Content-Disposition:Inline and not, Content-Disposition:Attachment.
Portable Document Format (PDF).
Any Browser « Use _Embeddable Google Document Viewer to embed the PDF file in iframe.
<iframe src="http://docs.google.com/gview?
url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true"
style="width:600px; height:500px;" frameborder="0">
</iframe>
Only for chrome browser « Chrome PDF viewer using plugin. pluginspage=http://www.adobe.com/products/acrobat/readstep2.html.
<embed type="application/pdf"
src="http://www.oracle.com/events/global/en/java-outreach/resources/java-a-beginners-guide-1720064.pdf"
width="100%" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html"
background-color="0xFF525659" top-toolbar-height="56" full-frame="" internalinstanceid="21"
title="CHROME">
Example Sippet:
<html>
<head></head>
<body style=" height: 100%;">
<div style=" position: relative;">
<div style="width: 100%; /*overflow: auto;*/ position: relative;height: auto; margin-top: 70px;">
<p>An
<a href="https://en.wikipedia.org/wiki/Image_file_formats" >image</a> is an artifact that depicts visual perception
</p>
<!-- To make div with scroll data [max-height: 500;]-->
<div style="/* overflow: scroll; */ max-height: 500; float: left; width: 49%; height: 100%; ">
<img width="" height="400" src="https://peach.blender.org/wp-content/uploads/poster_bunny_bunnysize.jpg?x11217" title="Google" style="-webkit-user-select: none;background-position: 0px 0px, 10px 10px;background-size: 20px 20px;background-image:linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);cursor: zoom-in;" />
<p>Streaming an Image form Response Stream (binary data) « This buffers the output in smaller chunks of data rather than sending the entire image as a single block.
<a href="http://www.chestysoft.com/imagefile/streaming.asp" >StreamToBrowser</a>
</p>
</div>
<div style="float: left; width: 10%; background-color: red;"></div>
<div style="float: left;width: 49%; ">
<img width="" height="400" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot"/>
<p>Streaming an Image form Base64 String « embedding images directly into your HTML.
<a href="https://en.wikipedia.org/wiki/Data_URI_scheme">
<sup>Data URI scheme</sup>
</a>
<a href="https://codebeautify.org/image-to-base64-converter">
<sup>, Convert Your Image to Base64</sup>
</a>
<pre>data:[<media type>][;base64],<data></pre>
</p>
</div>
</div>
<div style="width: 100%;overflow: auto;position: relative;height: auto; margin-top: 70px;">
<video style="height: 500px;width: 100%;" name="media" controls="controls">
<!-- autoplay -->
<source src="http://download.blender.org/peach/trailer/trailer_400p.ogg" type="video/mp4">
<source src="http://download.blender.org/peach/trailer/trailer_400p.ogg" type="video/ogg">
</video>
<p>Video courtesy of
<a href="https://www.bigbuckbunny.org/" >Big Buck Bunny</a>.
</p>
<div>
<div style="width: 100%;overflow: auto;position: relative;height: auto; margin-top: 70px;">
<p>Portable Document Format
<a href="https://acrobat.adobe.com/us/en/acrobat/about-adobe-pdf.html?promoid=CW7625ZK&mv=other" >(PDF)</a>.
</p>
<div style="float: left;width: 49%; overflow: auto;position: relative;height: auto;">
<embed type="application/pdf" src="http://www.oracle.com/events/global/en/java-outreach/resources/java-a-beginners-guide-1720064.pdf" width="100%" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html" background-color="0xFF525659" top-toolbar-height="56" full-frame="" internalinstanceid="21" title="CHROME">
<p>Chrome PDF viewer
<a href="https://productforums.google.com/forum/#!topic/chrome/MP_1qzVgemo">
<sup>extension</sup>
</a>
<a href="https://chrome.google.com/webstore/detail/surfingkeys/gfbliohnnapiefjpjlpjnehglfpaknnc">
<sup> (surfingkeys)</sup>
</a>
</p>
</div>
<div style="float: left; width: 10%; background-color: red;"></div>
<div style="float: left;width: 49%; ">
<iframe src="https://docs.google.com/gview?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true#:page.7" style="" width="100%" height="500px" allowfullscreen="" webkitallowfullscreen=""></iframe>
<p>Embeddable
<a href="https://googlesystem.blogspot.in/2009/09/embeddable-google-document-viewer.html" >Google</a> Document Viewer. Here's the code I used to embed the PDF file:
<pre>
<iframe
src="http://docs.google.com/gview?
url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true"
style="width:600px; height:500px;" frameborder="0"></iframe>
</pre>
</p>
</div>
</div>
</div>
</body>
</html>
The element is supported by all browsers and defines an embedded object within an HTML document.
Bottom line: OBJECT is Good, EMBED is Old. Beside's IE's PARAM tags, any content between OBJECT tags will get rendered if the browser doesn't support OBJECT's referred plugin, and apparently, the content gets http requested regardless if it gets rendered or not. Reference
Working code: https://www.w3schools.com/code/tryit.asp?filename=G7L8BK6XC0A6
<!DOCTYPE html>
<html>
<body>
<object width="400px" height="400px" data="https://s3.amazonaws.com/dq-blog-files/pandas-cheat-sheet.pdf"></object>
</body>
</html>
I've had something similar before and used normally tags
<strong>click here</strong>
but it's interesting to find out some other ways as above!
Also this method is useful:
Displaying pdf file on desktop and mobile browsers:
<object data="./filename.pdf" type="application/pdf" width="500px" height="600px">
<p>Your web browser doesn't have a PDF plugin.
click here to download the PDF file.</p>
</object>
Update - Adobe PDF Embed API
Adobe released their Adobe PDF Embed API which is completely free. Since they created the PDF format itself, their API is probably the best for this.
It delivers the highest quality PDF rendering available.
You can fully customize user experience and choose how to display a PDF.
You will also have analytics on PDF usage so you can understand how users interact with PDFs, including time spent on a page and searches.
All you have to do is create an api_key and use it in the code snippet.
Displaying PDF as buffer (local file for example)
Here is the example of the code snippet that you can just add to your HTML and take advantage of their API for displaying PDF if you have the buffer (local file for example).
<div id="adobe-dc-view"></div>
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
document.addEventListener("adobe_dc_view_sdk.ready", function(){
var adobeDCView = new AdobeDC.View({clientId: "api_key", divId: "adobe-dc-view"});
adobeDCView.previewFile({
content: { promise: <FILE_PROMISE> }
metaData: { fileName: "file_name_to_display" }
}, {});
});
</script>
You can use
<iframe src="your_pdf_file_path" height="100%" width="100%" scrolling="auto"></iframe>
Or, if you want to make it take up the whole page:
Link
I understand you want to display using HTMl but you can also open the PDF file using php by pointing out the path and the browser will render it in a few simple steps
<?php
$your_file_name = "url_here";
//Content type and this case its a PDF
header("Content-type: application/pdf");
header("Content-Length: " . filesize($your_file_name ));
//Display the file
readfile($your_file_name );
?>
The answer provided by gofilord is right but I might also add that if you create an empty bucket to pour your pdf into you should give it a src="" like...
<embed id="fooEmbed" src="">
...in the HTML and in the javascript...
document.getElementById('fooEmbed').src = 'bar.pdf';
...it will work. If instead you do this...
<embed id="fooEmbed">
...it will not work.
If you're working with a local file this is the solution that worked for me.
const objectUrl = URL.createObjectURL(file);
<iframe src={objectUrl} width="100%" height="100%" />
source: https://developer.mozilla.org/en-US/docs/Web/API/File_API/Using_files_from_web_applications
I'm using CSS to stylize a website and have an embedded youtube clip inside of several DIVs like so:
<body>
<div id="wrap">
<div id="outer">
<img src="images/sidebar.png"/ class="sidepic">
<div id="look">
<iframe width="500px" class="youtube-player" type="text/html" height="280px" src="http://www.youtube.com/embed/J-U9aYeLvX0?wmode=opaque&feature=player_profilepage&showinfo=0" frameborder="0" allowfullscreen seamless></iframe>
<img src="images/content-01.png" class="bigpic" />
</div>
</div>
</div>
This works fine in Internet Explorer, but doesn't work in Chrome. The video doesn't detect any hover or clicking, as though it's a static image or hidden.
I've tried to use the ?wmode=opaque / transparent tags recommended in other threads on this site, but it doesn't seem to work. Removing the iframe from the DIV tags allows the video to play, but distorts the rest of the page.
I want to make it so that when I click anywhere on the embedded Flash element, it takes me to a destination URL.
Here is my current code, which does not produce the desired effect:
<div class="contentdiv" style="margin:-72px 0 10px 0px; cursor:pointer;" onclick="location.href='http://example.com/';">
<object height="410" width="720">
<param name="movie" value="images/tri.swf">
<embed src="images/tri.swf" height="400" width="700">
</embed>
</object>
</div>
Right now it is making the space behind the .swf file clickable for the link, but the Flash element is not clickable.
If the right thing to do is to edit the .swf file somehow, please let me know that. I don't consider myself a Flash developer, but are there any resources on where to get started or how to do something this basic with an existing .swf file?
Any suggestions are much appreciated!
I had the same problem, found this thread, but ended up creating my own solution.
I added transparent element to the link, then made it overlap the embeded swf
<a href="http://example.com/" target="_blank">
<object height="410" width="720"><param name="movie" value="http://www.theslap.com/swf/slap_logo.swf">
<embed src="http://www.theslap.com/swf/slap_logo.swf" height="400" width="700"></embed>
</object>
<i style="display:block; height: 410px; width: 720px; position: relative; z-index: 9; margin-top: -410px;"></i>
</a>
Note - you should probably include the css in a separate file for production code.
Update after more research:
This question has been asked before, and the best answer is that you have to create the link within flash.
Usually this is done dynamically by passing a parameter (conventionally named clickTAG) to the .swf to tell it where to link to.
In your case (since someone else provided your swf files) I can see 2 options:
Your .swf author may have already implemented the clickTAG method (you can ask them, or just try it out on the .swf to see if it works.)
You could make a flash wrapper file that implements clickTag, and have it load and display your .swf file. I know this seems like a hack, but I can't see any other alternatives.
Hope this helps!
I've also seen something like this used [edit: but I can't get it to work! Googling suggests that it's not possible]
<a href="http://example.com/" target="_blank">
<object height="410" width="720"><param name="movie" value="images/tri.swf">
<embed src="images/tri.swf" height="400" width="700"></embed>
</object>
</a>
(For example here)
Put a transparent .gif or .png file over the flash using z-index and just anchor that transparent image with your URL.
You could create your own swf (or have someone do it for you) that has a button editable with FlashVars over the stage and that loads in your subject swf underneath that button.
I've created one for you: Download.
You just need to add two FlashVars when you embed it:
url - The URL that will be visited if the swf is clicked.
swf - The swf file to load.
I got mad to solve the issue.... I tried several tricks including jquery and javascript.
Definitely the SOLUTION that works and works in ALL browser is the one above my reply.
Thanks user user2628529
<div class="containe">
<div style="position:absolute;"> </div>
<div >
<object type='application/x-shockwave-flash' data='http://www.sample.it/banner/banner-one.swf' width='190' height='505'>
<param name='flashvars' value='clickTag=&clickTarget=_self' />
<param name='allowScriptAccess' value='always' />
<param name='movie' value='banner-one.swf' />
<param name='wmode' value='transparent' >
</object>
</div>
</div>
There is a best way i've got found
<div class="flash-wrap">
<a class="flash-link" href="#"></a>
<object type="application/x-shockwave-flash" data="flash.swf" width="180" height="220">
<param name="wmode" value="opaque">
<param name="movie" value="flash.swf" />
<param name="quality" value="high" />
</object>
</div>
.flash-wrap{
position: relative;
}
.flash-link{
position: absolute; top:0px; left:0px;
width:180px; /*Flash Size*/
height:220px;
/*background: url('images/0.gif') no-repeat;*/ /*You should uncommented this line for support old IE version.*/
}
https://gist.github.com/m-pokrovskii/6558817
<div id="logo" >
<div id="linklogo" style="position:absolute;"><img src="transparent.png"></div>
<div id="flashlogo" >
<object type='application/x-shockwave-flash' data='1.swf' width='200' height='86'> <param name='flashvars' value='clickTag=&clickTarget=_self' /><param name='allowScriptAccess' value='always' /><param name='movie' value='1.swf' /><param name="wmode" value="transparent"></object>
</div>
certainly
eliminates the problem in all cases
This worked for me:
<a target="_blank" href="{{ entity.link }}">
<object type="application/x-shockwave-flash" data="{{ entity.file.path }}?clickTAG={{ entity.link }}" width="120" height="600" style="visibility: visible;">
<param name="quality" value="high">
<param name="play" value="true">
<param name="LOOP" value="false">
<param name="wmode" value="transparent">
<param name="allowScriptAccess" value="true">
</object>
</a>
Thank You!
now. It worked
<div style="width: 400px; height: 100px;">
<a href="http://www.sample.com" target="_blank">
<object height="100" width="400"><param name="movie" value="1.swf">
<embed src="1.swf" quality="high" type="application/x-shockwave-flash" wmode="transparent" width="400" height="100" pluginspage="http://www.macromedia.com/go/getflashplayer" allowScriptAccess="always"></embed>
</object>
<i style="display: block; height: 100px; width: 400px; position: relative;z-index: 9;margin-top: -102px;"></i>
</a>
</div>
You can't add a link to a flash object, but you can overlap a transparent image with a link, over the flash object.
This is my example:
<div style="position: relative;">
<div style="position: absolute;
left: 250px;
top: 0px;
z-index: 9999;">
<a href="http://terrazasmedicina.com.ar/hometerrazas.html">
<img src="logoLinkTR.png" width="504" height="103"></a>
</div>
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','1024','height','106','src','banner','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','banner' ); //end AC code
</script></div>
In my case the object is embeded by a script, but it should work the same.
You have to wrap in a relative div the object and a div with the image, and then position as absolute the div with the image aligning it by left, top, right and bottom properties, and asigning z-index property to overlap the image.