Question

I am trying to create expandable ads that will work without Flash (i.e. on iOS).
I work as a front end web designer with no real Javascript knowledge.
I found a sample code for how I could create the ad however it incorporates flash to activate the expand and retract Javascript functions.

Is it possible to create expandable ads using gif/jpg images?
What I means is a 300×40 mobile ad that expands to 300×400 full screen on a tap.

I would really appreciate any help on this.

Answer 1

I would recommend trying this with CSS3 then as I would imagine as a front end web designer you are more comfortable with CSS.
I am quite sure that a hover equates to a tap on most mobile devices.

Try the below:

<style>
.youradvert {
   overflow: hidden;
   width: 300px;
   height: 40px;
   -webkit-transition: all 1s;
   -moz-transition: all 1s;
   -o-transition: all 1s;
   transition: all 1s;
}
.youradvert:hover {
   height: 400px;
}
</style>

Alternatively as a tap is the same as a click you could set an image with display:none and have a simple Javascript function that changes the display value onclick.
You may find that the click implementation would be more universally implemented than hover but I am not certain. You could use VISIBILITY if DISPLAY doesnt do the trick.

Something like the below:

<script type="text/javascript">
<!--
    function expand(){
        document.getElementById('large_ad').style.display=block;
    }
-->
</script>

<div class="youradvert">
   <img id="small_ad" src="http://example.com/image.jpg" onclick="expand()" alt="" style="width:300px;height:40px;"/>
   <img id="large_ad" src="http://example.com/image.jpg" style="display:none;width:300px;height:400px;" alt=""/>
</div>