[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

How do they do this banner ad?

Posted on 2007-11-20
6
Medium Priority
?
399 Views
Last Modified: 2013-11-19
Hi.  I really like the banner ad found here:

http://www.sql-server-performance.com/articles/dev/encryption_2005_1_p1.aspx

(top right).  I know that it is flash, but is there a way for me to do this without flash?  At least the page "leaf" container?  I would like to be able to display either a rotating slideshow of 5 banner adverts, or a single flash movie using this method.

I would like to use CSS entirely if possible, without javascript (or at least a decent fall-back for non-js browsers) and definately without flash (I need to build this into our existing CMS system with relative ease).

Thanks,

TheFoot
0
Comment
Question by:Barry Jones
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
6 Comments
 
LVL 53

Assisted Solution

by:Ryan Chong
Ryan Chong earned 200 total points
ID: 20324957
You can try make it as a Animated GIF file, so that it animate and without javascript constraint.

Make sense to you?
0
 
LVL 12

Author Comment

by:Barry Jones
ID: 20324996
Yes I understand.  But I need to dictate what ads are shown inside the folding leaf, through ASP.  A web based admin system is used to manage the banner ads.  Therefore the script that displays the ad "leaf" will retrieve the actual advert binary from the database, and then display it inside the "leaf".  

I was thinking along the lines of; the folding leaf is actually a <div>, and its contents is whatever object is the banner ad (images, flash movie etc).  Maybe playing around with the overlap and scrollbars of the <div> could achieve the hidden effect, but the transition of the div "peeling back" would need to be done in javascript yes?

How do I do that?

Thanks, TheFoot
0
 
LVL 26

Accepted Solution

by:
David Brugge earned 1800 total points
ID: 20325046
That banner is pretty neat.

There are two parts to the banner. One is the simple animation that happens on pageload, and yes, it could be done as an animated gif.

The other part is where the page folds down on mouse-ove. That part needs more sophisticated animation (read that java/flash) unless you are willing to settle for a "rollover" type window that is either "peeled back" on mouse-over or "closed" on mouse-out with no animation in between mouse states.

If you are going to try and reproduce the larger "mouse-over" aspect of the banner with a animated gif, it will make for a relatively large file.

I want to see if when you get it done.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 26

Expert Comment

by:David Brugge
ID: 20325054
opps, you got your reply up before I got mine.
0
 
LVL 26

Expert Comment

by:David Brugge
ID: 20325066
I would make a div that is positioned off of the page, and use the mouse-over to reposition it. You can learn  about this technique by searching for CSS drop-down menu tutorials
0
 
LVL 12

Author Comment

by:Barry Jones
ID: 20325210
Hi D Brugge, thanks for your ideas.  Maybe I should set my sights a little lower for now.. and go with the roll-over type effect.  I could use javascript to perform the transition of the div down and left into the page, revealing the ad, and to hide it.  Non-js browsers would just see the css version; a quick opening without any slides or transitions.  And I guess if they dont have css enabled, then I'm shit outta luck! :)

I really like the reflection effect on the reverse of the page leaf.. but maybe I'll leave that for another day.. lol

Thanks, TheFoot

PS.  I dont plan to start coding this for another 4 weeks or so, but Ill post the URL here (if I can) when it is done.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

656 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question