How to create expandable ad - without flash?

[ksiugzda]

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

[iBeZi]

You could probably do it using CSS3.

<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>

[GSharp]

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.

[iBeZi]

I'm almost 100% sure that hover equates to a tap on mobile devices.

[GSharp]

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.