Load together Image and SWF file using css as Background
I would like to load the image which i have prepared and the Flash swf file at the same time. I am loading image using CSS Stylesheet and as background. But when i tried to do the same thing with SFW file it could not load together.
Any one knows how to load image and SWF file together using CSS. The image currently coming as following
#content{
margin: 0;
padding: 160px 0 0 0;
background: url(content_top.jpg) left top no-repeat;
}
and i have tried to do following :
#content{
margin: 0;
padding: 160px 0 0 0;
background: url(content_top.jpg) left top no-repeat;
backgound-ulr: {content.swf);
load: swf;
}
it doesn't work, i think something wrong.
looking for a solution...
want to load image & swf together using CSS
Dear Eye for video,
thanks for your attention, sorry i was in balckout for last 4 to 5 days as ISP was down. Well, i have managed to load the flash object as an object in DIV tag using normal way but my drop down menu appears behind the flash file so i can not see and use some of the links under particular tab as they appear behind the flash file.
could you pleaseshow me some way to over come this issue. please find following code which i have used.
<div id="wrapper">
<div id="header">
<h1>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx </h1>
<!-- <p class="strapline">xxxxxxxxxxxxxxxxxxxxxxxx</p> !-->
</div>
<div id="outer-image" align="justify">
<div id="inner-image" align="center">
<object id="bannertop" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="80%" height="138" align="middle">
<param name="movie" value="styles/installedstyles/RedKeys/banner2_top.swf">
<param name="quality" value="high">
<embed src="styles/installedstyles/RedKeys/banner2_top.swf" width="80%" height="138" align="middle" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
</object>
</div>
</div>
<div id="navbar">
<ul>
<li id="navli121166"><a href="index.htm">Home
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li id="navli121167"><a href="ContactUs0.htm">Enquiries</a></li>
<li id="navli121168"><a href="Search.htm">Search</a></li>
<li id="navli121169"><a href="TermsOfBusiness.htm">Terms of Business</a></li>
<li id="navli121170"><a href="PrivacyStatement.htm">Privacy Statement</a></li>
<li id="navli121171"><a href="FirmStatus.htm">Firm Status</a></li>
<li id="navli121172"><a href="MortgageFees.htm">Mortgage Terms</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li id="navli121174"><a href="AboutUs.htm">About Us
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li id="navli121175"><a href="Services.htm">Services
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li id="navli121176"><a href="Pensions.htm">Pensions
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li id="navli121177"><a href="Pensionsimplification.htm">Pension simplification</a></li>
<li id="navli121178"><a href="PersonalPensions.htm">Personal Pensions</a></li>
<li id="navli121179"><a href="Stakeholder.htm">Stakeholder</a></li>
<li id="navli121180"><a href="CompanySchemes.htm">Company Schemes</a></li>
<li id="navli121181"><a href="Annuities.htm">Annuities</a></li>
<li id="navli121182"><a href="PhasedRetirement.htm">Phased Retirement</a></li>
<li id="navli121183"><a href="Incomedrawdown.htm">Income drawdown</a></li>
<li id="navli121188"><a href="companyfinalsal.htm">Final Salary Schemes</a></li>
<li id="navli121190"><a href="AlternativelySecuredPensions.htm">Alternativ ely Secured Pensions</a></li>
<li id="navli121192"><a href="FinalSalaryCalculator.htm">Final Salary Calculator</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li id="navli121193"><a href="LifeAssurance.htm">Life Assurance
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li id="navli121194"><a href="Wholeoflife.htm">Whole of life</a></li>
<li id="navli121195"><a href="TermAssurance.htm">Term Assurance</a></li>
<li id="navli121196"><a href="BusinessCover.htm">Business Cover</a></li>
<li id="navli121197"><a href="MortgageProtection.htm">Mortgage Protection</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li id="navli121199"><a href="Investments.htm">Investments
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li id="navli121200"><a href="RiskandRewrad.htm">Risk and Reward</a></li>
<li id="navli121201"><a href="UnitTrusts.htm">Unit Trusts</a></li>
<li id="navli121202"><a href="OEICs.htm">OEICs</a></li>
<li id="navli121203"><a href="InvestmentTrusts.htm">Investment Trusts</a></li>
<li id="navli121204"><a href="ISAs.htm">ISAs</a></li>
<li id="navli121205"><a href="SselectISA.htm">Self Select ISA</a></li>
<li id="navli121206"><a href="GovernmentGilts.htm">Government Gilts</a></li>
<li id="navli121207"><a href="CorporateBonds.htm">Corporate Bonds</a></li>
<li id="navli121210"><a href="SavingsCalculator.htm">Savings Calculator</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li id="navli121211"><a href="Mortgages.htm">Mortgages
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li id="navli121212"><a href="CapitalInterest.htm">Capital & Interest</a></li>
<li id="navli121213"><a href="InterestOnly.htm">Interest Only</a></li>
<li id="navli121214"><a href="Flexible.htm">Flexible</a></li>
<li id="navli121216"><a href="LifetimeMortgages.htm">Lifetime Mortgages</a></li>
<li id="navli121217"><a href="ReversionSchemes.htm">Reversion Schemes</a></li>
<li id="navli121225"><a href="MortgageCalculator.htm">Mortgage Calculator</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li id="navli121226"><a href="Corporate.htm">Corporate
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
<div id="content">
<div id="contactdetails">
<ul>
<li>ABC</li>
<li>ccd road</li>
<li>xyz Town, pqr</li>
<li>xxx xxx</li>
<li class="tel">Tel: 888 8888 8888</li>
<li class="email">Email: <a href="mailto:[email protected]">[email protected]</a></li>
<li class="fax">Fax: 888 8888 8888</li>
</ul>
</div>
<div id="lists">
<div id="subsection">
<h2>Home </h2>
<ul>
<li> <a href="ContactUs0.htm" id="Subsections_rptSubsections__ctl0_a">Enquiries </a> </li>
<li> <a href="Search.htm" id="Subsections_rptSubsections__ctl1_a">Search</a> </li>
<li> <a href="TermsOfBusiness.htm" id="Subsections_rptSubsections__ctl2_a">Terms of Business</a> </li>
<li> <a href="PrivacyStatement.htm" id="Subsections_rptSubsections__ctl3_a">Privacy Statement</a> </li>
<li> <a href="FirmStatus.htm" id="Subsections_rptSubsections__ctl4_a">Firm Status</a> </li>
<li> <a href="MortgageFees.htm" id="Subsections_rptSubsections__ctl5_a">Mortgage Terms</a> </li>
</ul>
</div>
and now CSS code:
#navbar {
height: 24px;
top: 45px;
width: 900px;
position: absolute;
z-index: 100;
left: 0;
}
* html #navbar {
width: 900px;
w\idth: 900px;
}
#navbar ul {
padding: 0;
margin: 0;
list-style-type: none;
}
#navbar li {
float: left;
width: auto;
position: relative;
padding: 0 0 0 10px;
background: url(nav_li.png) left bottom no-repeat;
}
#navbar a, #navbar a:visited {
display: inline-block;
font-size: 1.2em;
text-decoration: none;
color: #666;
height: 24px;
margin: 0;
padding: 0 10px 0 0;
line-height: 24px;
background: url(nav_li.png) right bottom no-repeat;
}
* html #navbar a, * html #navbar a:visited {
width: auto;
w\idth: auto;
}
#navbar ul ul {
visibility: hidden;
position: absolute;
height: 0;
padding: 0 0 1px 0;
top: 24px;
left: -1px;
width: 149px;
border-bottom: 1px solid #254c8b;
}
* html #navbar ul ul {
top: 24px;
t\op: 24px;
}
#navbar table {
position: absolute;
top: 0;
left: 0;
border-collapse: collapse;
;
}
#navbar ul ul li, #navbar .active ul li{
background: #ececec!important;
padding: 0;
}
#navbar ul li.active{
background: url(nav_active.png) left bottom no-repeat;
}
#navbar ul li.active a{
background: url(nav_active.png) right bottom no-repeat;
color: #fff;
}
#navbar ul ul a, #navbar ul ul a:visited, #navbar li.active ul a, #navbar ul .active ul a{
font-weight: normal!important;
background: #ececec!important;
color: #254c8b;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
border-bottom: 1px solid #ddd;
display: block;
height: auto;
line-height: 20px;
padding: 0 10px 0 10px!important;
margin: 0 0 0 0;
width: 130px;
}
* html #navbar ul ul a, * html #navbar ul ul a:visited {
width: 150px;
width: 128px;
}
#navbar a:hover{
color: #333!important;
}
#navbar ul ul a:hover, #navbar ul a.active ul a:hover{
background-color: #ccc!important;
color: #fff!important;
text-decoration: none;
}
#navbar :hover > a, #navbar ul ul :hover > a {
color: #333!important;
}
#navbar ul li:hover ul,
#navbar ul a:hover ul {
visibility: visible;
}
CSS CODE FOR FLASH & IMAGE
#content{
margin: 0;
padding: 10px 0 0 0;
background: url(content_top.jpg) left top no-repeat;
/* background: url(content_org.jpg) left top no-repeat;
/* background-ulr: {banner2_top.swf) center no repeat;
load: swf; */
}
#inner-image {
margin-left:auto;
margin-right:auto;
padding: 0px 0 0 0;
vertical-align: middle;
width:80%;
/* background-ulr: {banner2_top.swf) center no repeat;
load: swf; */
z-index: 110;
}
could you please find me solution to this.
many thanks for your kind attention
om.
any way to load it using CSS
Hi , that thing did helped but after that the left part of the flash is not visible. It gets cut. I have tried changing and playing with all Like height, width, alignment, also tired the same things on <div>tag and tried in CSS too. no luck.
One morething i would like to know have you ever tried calling/loading SWF file using css.
is there any way to load it normally. I look forward to hearing from you. many thanks.
Quote:
Originally Posted by
Eye for Video
For starters, give you Flash object a window mode.
Window Mode (wmode) - What's It For?
There are three window modes.
Window
Opaque
Transparent
By default, the Flash Player gets its own hWnd in Windows. This means that the Flash movie actually exists in a display instance within Windows that lives above the core browser display window. So though it appears to be in the browser window, technically, it isn't. It is most efficient for Flash to draw this way and this is the fastest, most efficient rendering mode. However, it is drawing independently of the browser's HTML rendering surface. This is why this default mode (which is equivalent to wmode="window") doesn't allow proper compositing with DHTML layers. This is why your JavaScripted drop-down menus will drop behind your Flash movie.
In windowless modes (like opaque), Flash Player doesn't have a hWnd. This means that the browser tells the Flash Player when and where to draw onto the browser's own rendering surface. The Flash movie is no longer being rendered on a higher level if you will. It's right there in the page with the rest of the page elements. The Flash buffer is simply drawn into whatever rectangle the browser says, with any Flash stage space not occupied by objects receiving the movie's background color.
If that doesn't cure the problem, then revisit the positioning css.
Best wishes,
EfV