Advertisement
Help Keep Boards Alive. Support us by going ad free today. See here: https://subscriptions.boards.ie/.
If we do not hit our goal we will be forced to close the site.

Current status: https://keepboardsalive.com/

Annual subs are best for most impact. If you are still undecided on going Ad Free - you can also donate using the Paypal Donate option. All contribution helps. Thank you.
https://www.boards.ie/group/1878-subscribers-forum

Private Group for paid up members of Boards.ie. Join the club.

DHTML expanding banners

  • 27-04-2004 11:11AM
    #1
    whiteshadow
    Registered Users, Registered Users 2 Posts: 771 ✭✭✭


    looked at dynamicdrive, hotscripts etc but still can't find a tutorial about how to set up expanding banners.

    You know the ones.. you scroll over them and they expand in a layer..me thinks.

    Is it DHTML?

    As far as i remember they were quite popular so maybe something happened that made them not so popular anymore.

    Any cons to using them?

    any links on setting them up?

    muchos grassyass.


Comments

  • #2
    Ph3n0m
    Closed Accounts Posts: 4,655 ✭✭✭Ph3n0m


    Originally posted by whiteshadow
    looked at dynamicdrive, hotscripts etc but still can't find a tutorial about how to set up expanding banners.

    You know the ones.. you scroll over them and they expand in a layer..me thinks.

    Is it DHTML?

    As far as i remember they were quite popular so maybe something happened that made them not so popular anymore.

    Any cons to using them?

    any links on setting them up?

    muchos grassyass.

    where have you seen such banners, give us an example, so we know what you are talking about - i.e. url?


  • #3
    whiteshadow
    Registered Users, Registered Users 2 Posts: 771 ✭✭✭whiteshadow


    okay i can't find a live one but this pdf shows what i mean

    http://adcentre.fairfax.com.au/online/pdf/P_Expanding.pdf


  • #4
    tricky D
    Closed Accounts Posts: 9,698 ✭✭✭tricky D


    First you have to realise that most of these menus have poor documentation, so most of the time you have to roll up your sleeves, grab the source files (html, js and css) and figure out what does what (links, text, colours, paddings, borders, positioning etc.)

    Second, gotta search more effectively. Hotscripts recently published Cross Browser DHTML Menus which is great http://www.hotscripts.com/Detailed/33333.html
    and googling for dhtml menus, should suggest more terms like, hierarchical, milonic, milomenu, ypSlideOutMenus to name a few.

    You can also grab most menus you like from the site and mess about as above.
    Any cons to using them?
    They're generally not accessible and don't always work properly. I often have to mess with a few to get one working nicely in all browsers. Today's good bad example is www.fai.ie in netscape where the main nav doesn't work as the links are in drop downs which only work in IE. The search engines might not like that either. They should be viewed as an enhancement for navigation only, so always be sure the site is easily navigated without the menus.

    hth
    \r


  • #5
    whiteshadow
    Registered Users, Registered Users 2 Posts: 771 ✭✭✭whiteshadow


    (I really only use javascript mouseover menus)
    but what im looking for is a banner and not a menu.

    why mention menus? would it be the same code?


  • #6
    tricky D
    Closed Accounts Posts: 9,698 ✭✭✭tricky D


    didn't read fully, apols. In some ways an expanding banner is just a single entry menu which expands over itself.

    still some of my answer could help. If you see one you like grab the files and make some changes.

    else using style sheets you could do
    <html><head>
    <style>
    div a.banner {display: block; position: absolute; top: 0px; left: 0px; height: 40px; color: #000; background-color: #555; background-image: url('smallimg'); }
    div a.banner:hover {display: block; position: absolute; top: 0px; left: 0px; height: 80px; color: #000; background-color: #555; background-image: url('bigimg');}
    </style>
    </head><body>
    <div class="banner"><a href="link" class="banner">img</a></div>
    </body></html>

    or you can use one of the scripts which changes a link img onmouseover to a different sized image (they don't always need to be the same size, that depend on your script)

    if one of those doesn't suit, pm me and I'll get a good answer for you tomorro (busyish today)

    hth
    \r


  • Advertisement
  • #7
    whiteshadow
    Registered Users, Registered Users 2 Posts: 771 ✭✭✭whiteshadow


    nice one...
    think i got it sorted,
    all i have to do is test it with different browsers etc...


Advertisement