PDA

View Full Version : Layering a Flash element over a standard HTML tabled image?


Rukey
04-09-2012, 01:42 PM
Hello,

Quite an amateur question I admit, and I know this can be done with images using some simple CSS and Div tags, making absolute positions for elements but not sure how to go about this with a flash element.

As you can see on my base website: http://matthewrukas.site11.com (http://matthewrukas.site11.com/) - That is just an image taken straight from Photoshop and placed inside a table. Now as you can see, there a space in the middle of the image as to where I want the flash element to be placed.
This one to be exact: http://megaswf.com/serve/2337611 - Flash Gallery I made, as most website have them these days.

How do I go about placing those on top of one another?

Code I have for the minute:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Matthew Rukas - Portfolio</title>
<style type="text/css">
body {
background-color: #f0f0f0;
}
</style>
</head>

<body>
<table width="1080" border="0" align="center">
<tr>
<td><img src="Images/fulll.jpg" width="1100" height="1150" border="0" usemap="#Map" /></td>
</tr>
</table>

<map name="Map" id="Map"><area shape="rect" coords="962,1060,1000,1095" href="#" />
<area shape="rect" coords="356,27,770,126" href="#" alt="Logo" />
<area shape="rect" coords="1002,1059,1040,1094" href="#" /><area shape="circle" coords="938,806,94" href="#" alt="tuts" />
<area shape="rect" coords="920,1059,958,1094" href="#" />
<area shape="circle" coords="446,806,94" href="#" alt="tuts" /><area shape="circle" coords="695,808,94" href="#" alt="tuts" />
<area shape="circle" coords="186,804,94" href="#" alt="tuts" />
</map>
</body>
</html>
Thanks for any help, if it can be offered!

Corrosive
04-09-2012, 02:20 PM
There's not much point in mocking it up like this is there? I mean when you carve up your image and lay it out using HTML/CSS you will have a div tag in which to put your flash video. Laying it on top of a big image for demo purposes seems like a waste of time to me.

Rukey
04-09-2012, 02:29 PM
How would you suggest otherwise? The reason I've gone around it this way is because most of the content will not be edited very often, only a few images here and there. As the portfolio will be very simple.

Corrosive
04-09-2012, 02:37 PM
So you are planning to leave your website as just a big image then? Text and all?

Rukey
04-09-2012, 02:44 PM
Call it bad practise but yes, only because most of the content will be static and can easily be changed around in Photoshop.

Corrosive
04-09-2012, 02:55 PM
It's not just (very, very) bad practice but it is going to cause you many more problems than you think it is going to solve.

That said, look at how to use z-index to place a div tag over the top of other elements. That should point you in the right direction; http://reference.sitepoint.com/css/z-index

Good luck (you are going to need it).

edbr
04-10-2012, 02:25 AM
Call it bad practice but yes, only because most of the content will be static and can easily be changed around in Photoshop.

I would agree very bad practice. lose any advantage of the text in the image or flash. Just seems senseless and the argument that it wont change much is not what websites are about.

Rukey
04-11-2012, 08:11 PM
I would agree very bad practice. lose any advantage of the text in the image or flash. Just seems senseless and the argument that it wont change much is not what websites are about.

I understand your points a view. I usually work with CMS myself, like wordpress and haven't for along time dabbled in CSS. I probably know more actionscript than I do HTML / CSS at the end of the day.

I have tried to start something myself but would like some advice (if possible):

<style type="text/css">

body {background-color:#f0f0f0;}

#backimage {position:absolute; top:20px; left:100px; z:index:10;}
#flashgallery {position:absolute; top:150px; left:165px; z:index:5;}
</style>

</head>
<body>

<div id="box">
<img id="backimage" alt="" src="Images/backimage.jpg" height="1150" width="1100" />
<embed src="Portfolio/FlashGallery.swf" height="460" width="960" />
</div>
</body>
</html>As the code stands, the background is my specific colour with the foreground image over, and then the flash element over the foreground image, but in the corner of the screen, as I don't know how to reference the element to give it's absolute position (If it's even possible) as the <img id="" is not relevant to flash.

Also is there an easy way to centre elements rather than giving specific pixel references?

Thanks.

Ricky55
04-11-2012, 10:34 PM
If you know Flash and ActionScript why don't you just build the whole thing in Flash?

Not ideal for none desktop users but seems a better solution to what you;ve come up with so far.

domedia
04-12-2012, 02:30 PM
Actionscript is a language to be used in Flash.

For the web, there's three languages; HTML, CSS, and JavaScript.

They're for different purposes, although AS can talk to the page through JS.

If you want to center (a relative position) an element, then you can absolutely positioning (an absolute position).