How can you turn a SWFObject into a clickable link?

Is there a way to create a clickable link using a .swf flash file with swfObject?

I want the entire video to be clickable, but I'm struggling to figure out how to do it.

If you take a look at this example here: , you'll see that they were able to make a swf object into a link on the left thumbnails.

Does anyone know how they did it? I've tried overlaying a div over the flash, but my browser doesn't seem to respond to the click.

Your assistance would be greatly appreciated, thank you!

Edit: Unfortunately, I can't insert a link directly into the flash file because 1. I don't have access to the project file and 2. I need to incorporate PHP code in the link.

htmlcssflashhyperlinkswfobject

Answer №1

Here is a simplified explanation of how the page achieves that effect:

.video-thumb-holder,
.video-link {
    position: absolute;
}
.video-link {
    display: block;
    width: 54px;
    height: 96px;
}

http://jsfiddle.net/xBzWv/1/

The elements have a z-index that is automatically set and are positioned absolutely, allowing the flow of the elements to determine their stacking order. In this case, the next element will have a "higher" z-index than the previous one containing the object.

This method works in Firefox 5, but may not be compatible with other browsers or versions such as IE6.

EDIT

Unfortunately, this approach does not work in IE9.

EDIT

IE uses a Flash object and applies the 

<param NAME="wmode" VALUE="transparent">
method for achieving transparency. However, even with this modification, the following fiddle still does not work: http://jsfiddle.net/xBzWv/11/

Answer №2

Not necessarily. One option would be to use absolute positioning for an <a> element on top of the video (ensuring that the z-index of the swfObject container is lower than that of the <a> tag).

Answer №3

In order to ensure cross-browser compatibility, my approach would be to develop a wrapper SWF that can load the video SWF file. By placing a button above the video, you can then choose to either make it communicate with the webpage through ExternalInterface or receive necessary information from PHP using FlashVars.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is preventing this DIV from stretching to the full width of its children?

Why isn't my container DIV expanding to the width of the large table? <html> <head> <link rel="stylesheet" href="http://www.blueprintcss.org/blueprint/screen.css" type="text/css" media="screen, projection" /> <link ...

htmlcss

Creating a full-height page with collapsible content using Bootstrap 4 and flex

I'm attempting to create a collapsible div with a fixed height within a full-height page using flex and bootstrap 4 (also encountering the same issue with bootstrap 3). The current code snippet functions correctly on Firefox, but encounters a problem ...

csstwitter-bootstrapflexboxbootstrap-4

What could be causing the issues with the compatibility of <input type="text" and flex properties?

I'm having an issue where the search box expands in size when I apply display:flex in my CSS. Can someone explain why this happens and offer a solution to return the search box to its normal height? Additionally, I would like the search bar and the se ...

htmlcssflexbox

What is the best way to align li elements in a ul list at the

How can I center ul elements on a web page? I have checked similar questions on this site and tried using text-align in my CSS file to center the elements, but it didn't work as expected. I also attempted to use margins which did center the elements, ...

htmlcsstwitter-bootstrap

The Limits of JavaScript Tables

Currently facing an issue with a webpage under development. To provide some context, here is the basic layout of the problematic section: The page features a form where users can select from four checkboxes and a dropdown menu. Once at least one checkbox ...

javascriptjqueryhtmlcss

Having trouble getting the innerHTML update to be triggered by onchange

Hey there, I am looking to tweak my file upload button so that it triggers a change in a specific span, signaling to the user that a file has indeed been selected. <script type="text/javascript"> function get_fileName(fileSelector, fileId) { var ...

javascripthtmldominput

Concealing the print option while utilizing PDFObject in conjunction with PDF.js

When displaying a file using pdf.js, I encountered issues with the print button and other functionalities. I was able to hide the buttons using CSS for Chrome, but not for Internet Explorer, where I had to resort to using JavaScript. While the JavaScript ...

javascriptjquerycsspdf.jspdfobject

CSS issue: Font size

Can someone help me out with a CSS issue that has been tripping me up? I've been working with CSS for three years now, and this particular problem is stumping me. I have defined some styles in my CSS file that should be applied to the content of my w ...

htmlcsswordpress

Message displayed on picture carousel

<div class="slider"> <div> <img src="http://kenwheeler.github.io/slick/img/fonz1.png" /> <p class="projectname">Project</p> <p class="clientname">Client Name</p> </div> &l ...

javascriptjquerycss

Horizontal rule located within a table but spanning the entire width

I wrote the following code: <table> {item.awards.map((obj,i) => <tbody> <tr> <td>Name</td> <td>:</td> <td>{obj.title}</td> </tr> ...

javascripthtmlcssreactjs

The <a> tag does not lead to a different webpage and cannot be clicked on

I have developed a web component that includes a method to generate a copyright string: '<p>Copyright © 2020 John Doe<a href="https://www.example.com">. Terms of Use</a></p>' After creating the string, I conver ...

javascripthtmltypescriptweb-component

Is it possible for individuals on the local network to view the webpage?

Recently, I developed a login page in HTML that prompts users for their username and password. The information is then sent to ABC.php, and upon successful authentication, they are redirected to another website. To make this work, I set up a xampp server. ...

phphtmlwebserver

Flask-WTForms QuerySelectField not displaying properly when rendered with Bootstrap causing <select> HTML tag issue

I am facing an issue while constructing a Flask form that includes a QuerySelectField. Despite having everything in place, Bootstrap is displaying the <select> as if it were a text input field. Upon inspecting the page source, I noticed that the fie ...

cssjinja2flask-wtformsbootstrap-5

Unusual behavior observed while looping through an HTMLCollection returned by the getElementsByClassName method

After spending some time debugging, I discovered an issue with my function that changes the class of elements to modify their properties. Surprisingly, only specific elements were being affected by this change. It took me a while to troubleshoot and resolv ...

javascripthtmlgetelementsbyclassnamehtmlcollection

toggle the outer div along with its corresponding inner div simultaneously

On one of my pages (let's call it "page1"), I have multiple divs, some nested within others. These divs are initially hidden and toggle on when a specific link is clicked (and off when clicked again). To view a nested div, the outer div must be opened ...

javascripthtmlcssnested

Creating dynamic styles with Material-UI's useStyles

Attempting to implement the same logic using material-ui's useStyle feature <div className={'container ' + (state.unlocked ? 'containerUnlocked' : '')}> I thought it might look like this: <div className={`${clas ...

javascriptcssreactjsmaterial-ui

Struggling to fetch option value from a dynamic add/remove list using a combination of PHP, jQuery, and HTML5

Having trouble accessing and displaying values from a select list. Constructed an add/remove list functionality using JQuery but unable to showcase the values using foreach and for loops. Specifically trying to obtain $existing_mID[$j] values from the &apo ...

javascriptphpjqueryhtml

jQuery - Enlarge Tree View to the level of the selected node

I am struggling to figure out how to expand the tree view up to a selected node level. If anyone has any ideas on how to accomplish this, please let me know. For instance, if we click on 'Parent d' in the 'Category list', I want to exp ...

javascriptjqueryhtmlcss

Displaying a variable in a live HTML user interface

I have successfully created a Python program that captures data from an Arduino Potentiometer and shows it on the Python console. Now, I am working on enhancing the output by displaying it in a local HTML file. I am seeking guidance on how to incorporate t ...

javascriptpythonhtmlcss

Insert a new class within the container div

I am looking to insert a 'disabled' class within a parent div named 'anchorxx' The disabled class div can be located anywhere within the anchorXX divs Is it achievable using jquery? I am unsure how to approach this task. Appreciate y ...

javascriptjqueryhtml