PDA

View Full Version : Need to replace an image with flash.


Tripyrenees
11-21-2010, 08:01 AM
Hi
I am new to HTML but I manage my own website and I have been trying to replace my header image (index.png) with a flash file (Test.swf). I am able to replace the image for the flash but when I do so my menu and logo are displaced (they do not sit as they do over the image). I have tried everything (for weeks now) but just cannot seem to get it right.

Is this a simple mistake or can it not be done.

Thanks
Ian

The swf file is here - http://www.pyreneesmultisport.com/Test.swf

And this is the header code;

<div class="outerContainer">

<div class="headContainer" style="background:url(ims/angled_info.png) no-repeat bottom left;">

<!-- -->
<div class="headImageContainer"><div class="headImage" style="background:url(ims/index.png) top left;"></div></div>
<div class="logoContainer"><div class="logoImage"></div></div>
<!-- SUB BARS : Start -->
<div class="subContainer">
<!-- ABOUT US : BAR : Start -->
<div class="subBar" id="aboutSub"><div class="subBarInner">

<div class="subNav" id="accomodation">
<div class="sTitle">&raquo; <a href="./accomodation.html">Accommodation</a></div>
<div class="sDesc">The 19th century farmhouse comfortable base camp.</div>
</div>

<div class="subNav" id="bike Rental">
<div class="sTitle">&raquo; <a href="./facilities.html">Bike Rental</a></div>
<div class="sDesc">Information on Bikes & Prices.</div>
</div>

<div class="subNav" id="contactus">
<div class="sTitle">&raquo; <a href="./contact-us.html">Contact Us</a></div>
<div class="sDesc">How to contact us and how to travel to Luscan.</div>
</div>

<div class="subNav" id="bookwithus">
<div class="sTitle">&raquo; <a href="./book-with-us.html">Book with Us</a></div>
<div class="sDesc">Make a booking now by phone or email.</div>
</div>

<div class="subNav" id="media">
<div class="sTitle">&raquo; <a href="./media.html">Media</a></div>
<div class="sDesc">Pyrénées multisport features in the media.</div>
</div>

<div class="subNav" id="guestbook">
<div class="sTitle">&raquo; <a href="./guestbook.html">Guestbook</a></div>
<div class="sDesc">Read some of our guests feedback.</div>
</div>

</div></div>
<!-- ABOUT US : BAR : End -->

<!-- CYCLING : BAR : Start -->
<div class="subBar" id="cyclingSub"><div class="subBarInner">

<div class="subNav" id="selfguided">
<div class="sTitle">&raquo; <a href="./self-guided-cycling.html">Self Guided</a></div>
<div class="sDesc">Self guided options.</div>
</div>

<div class="subNav" id="bikecamp">
<div class="sTitle">&raquo; <a href="early-season-bike.html">Early Season Bike Camp</a></div>
<div class="sDesc">Great early season conditioner.</div>
</div>

<div class="subNav" id="centrebased">
<div class="sTitle">&raquo; <a href="guided-cycling.html">Centre Based Cycling Tours</a></div>
<div class="sDesc">A nice gentle tour of the Pyrenees.</div>
</div>

<div class="subNav" id="classicclimbs">
<div class="sTitle">&raquo; <a href="classic-tour-climbs.html">Classic Tour Climbs</a></div>
<div class="sDesc">Cycle the climbs ridden by the legends.</div>
</div>

<div class="subNav" id="tourpyrenees">
<div class="sTitle">&raquo; <a href="tour-pyrenees.html">Tour des Pyrenees</a></div>
<div class="sDesc">Multi Stage tour of the Pyrenees.</div>
</div>

<div class="subNav" id="traverse">
<div class="sTitle">&raquo; <a href="./pyrenean-traverse.html">Pyrenean Traverse</a></div>
<div class="sDesc">Join us on our version of the RAID Pyrénées.</div>
</div>

<div class="subNav" id="raid">
<div class="sTitle">&raquo; <a href="./raid-pyrenean.html">RAID Pyrenean</a></div>
<div class="sDesc">Probably the best known and most popular raid in Europe.</div>
</div>

</div></div>
<!-- CYCLING : BAR : End -->


<!-- TRIATHLON : BAR : Start -->
<div class="subBar" id="triathlonSub"><div class="subBarInner">

<div class="subNav" id="ironcamp">
<div class="sTitle">&raquo; <a href="./iron-camp.html">Iron Camp</a></div>
<div class="sDesc">Multi base training camp for ironman athletes.</div>
</div>

<div class="subNav" id="tricamp">
<div class="sTitle">&raquo; <a href="./triathlon-camp.html">Tri Camp</a></div>
<div class="sDesc">Triathlon camps for all abilities with a focus on fun!</div>
</div>

<div class="subNav" id="earlytri">
<div class="sTitle">&raquo; <a href="./early-season-triathlon-camp.html">Early Season Camp</a></div>
<div class="sDesc">Want to get a head start for the coming season?</div>
</div>


</div></div>
<!-- TRIATHLON : BAR : End -->


<!-- WALK SKI : BAR : Start -->
<div class="subBar" id="walkSub"><div class="subBarInner">

<div class="subNav" id="ironcamp">
<div class="sTitle">&raquo; <a href="./ski.html">Skiing</a></div>
<div class="sDesc">Skiing holidays in the Pyrénées.</div>
</div>

<div class="subNav" id="tricamp">
<div class="sTitle">&raquo; <a href="./walk.html">Walking</a></div>
<div class="sDesc">Walking holidays in the Pyrénées.</div>
</div>

</div></div>
<!-- WALK SKI : BAR : End -->

</div>
<!-- SUB BARS : End -->



<!-- NAVIGATION BAR : Start -->
<div class="navContainer"><div class="navBar" id="nav">
<div class="primNav" id="home"><a href="./">Home</a></div>
<div class="primNav" id="about"><a href="./about-us.html">About Us</a></div>
<div class="primNav" id="cycling"><a href="./cycling.html">Cycling</a></div>
<div class="primNav" id="triathlon"><a href="./triathlon.html">Triathlon</a></div>
<div class="primNav" id="teams"><a href="./teams-and-clubs.html">Teams &amp; Clubs</a></div>
<div class="primNav" id="walk"><a href="./walk-and-ski.html">Walk &amp; Ski</a></div>
</div></div>
<!-- NAVIGATION BAR : End -->

Ricky55
11-22-2010, 10:33 PM
Yes of course it can be done.

You just need to absolutely position any elements like your navigation over the top of the Flash content and use wmode transparent in the Flash params.

But looking at your animation this doesn't need to be done in Flash at all. Just use jQuery to get your animation. I did something similar the other week. Different style of animation but its the same principal.

http://www.turtletop.co.uk/

The advantage of using jQuery is that your users don't need to have the Flash player installed to view.

Let me know if you need more help.

If you wanna go down the Flash road come back to me and I'll post up a quick example for you.

The jQuery animation used in my example is called the anything slider and is available for free download at csstricks.com but again looking at your example this may be more than you need.

Ricky55
11-22-2010, 10:38 PM
btw your website doesn't view correctly in Firefox on the Mac. All the header is missing completely.

The main slide show that you have also doesn't need to be Flash and judging by how long the page takes to load some of your images aren't web optimised.

Tripyrenees
11-23-2010, 04:30 PM
Thanks Ricky - I will take a look at JQuery. I have not used that before, can you do auto transitions with that.

On the Firefox issue, that is what I use all the time and I see my page OK but your righto n the image loading, I will sort that out.

Cheers
Ian

Ricky55
11-23-2010, 05:54 PM
Do you use a Mac or PC? It didn't view correctly for me anyway and I did refresh the page a couple of times.

Regarding jQuery yes of course you can do transitions and they are smoother than the ones you have currently.

The easiest way for you to get this working will be to use the cycle plugin. Have a look at this its very simple to implement.

http://jquery.malsup.com/cycle

Scroll to the bottom of the page, the Super Basic Demo will do what you want. As you can see from the examples its so simple to use.

If you need any help come back to me.

Which ever method you choose Flash or jQuery the positioning will be the same if you want elements to sit above the animation.

Cheers

Richard

Tripyrenees
11-24-2010, 03:54 PM
Thanks Richard - this is great.

I am near enough there but cannot figure out how to get my logo back to the front. I am searching for "bring to front" type command.

Here is the test page - http://www.pyreneesmultisport.com/test2.html

Cheers
Ian

Tripyrenees
11-24-2010, 05:58 PM
Done it - I found the Z positioning.

Thanks for your help. I will be using the jQuery a lot more from now on.

Ian

Corrosive
11-24-2010, 06:09 PM
I will be using the jQuery a lot more from now on.

JQuery rules!

Ricky55
11-24-2010, 07:11 PM
Sorry mate only just read this, yes z index is the way, do bear in mind though that z index only works when you have an element positioned like you have you can't just stick it on any element as it wont work.

Yes jQuery is much better than Flash for things like that.

Flash does still have a place don't get me wrong but not for animations of this kind.