www.webdeveloper.com
Results 1 to 5 of 5

Thread: How to create expandable ad - without flash?

  1. #1
    Join Date
    Jan 2013
    Posts
    1

    Question How to create expandable ad - without flash?

    Hi.
    I need to create expandable ads that will work in iOS, thus no Flash.
    I am a front end web designer with no JS knowledge. I have found some sample code for how to create an expandable ad, however, it incorporates flash to activate the expand and retract JS functions.

    Can I create expandable ads using .gif or .jpg image(s)?

    for example: 320x50 mobile ad that expands to 320x480 full screen on tap.

    Any insight how to do this would be greatly appreciated.
    Thanks.

    -Karen

  2. #2
    Join Date
    Dec 2012
    Posts
    98
    You could probably do it using CSS3.

    HTML Code:
    <style>
    .advert {
       overflow: hidden;
       width: 320px;
       height: 50px;
       -webkit-transition: all 1s;
       -moz-transition: all 1s;
       -o-transition: all 1s;
       transition: all 1s;
    }
    .advert:hover {
       height: 480px;
    }
    </style>
    
    <div class="advert">
       <img src="http://placekitten.com/320/480" alt=""/>
    </div>

  3. #3
    Join Date
    May 2008
    Posts
    52
    I don't think the hover property is really what you want to use for iOS. A tap is the same as a click, just set an image with display:none and have a simple javascript function that changed the display value onclick.

  4. #4
    Join Date
    Dec 2012
    Posts
    98
    I'm almost 100% sure that hover equates to a tap on mobile devices.

  5. #5
    Join Date
    May 2008
    Posts
    52
    You're probably right for most browsers on most mobile devices, however I would imagine that the click implementation would be more universally implemented than hover.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles