HTML and CSS Reference
In-Depth Information
Listing 11-13. Synced Ad Example 728 Ad
<html lang=en>
<style type="text/css">
#ad728 {
position: absolute;
top: 0px;
left: 0px;
width: 728px;
height: 90px;
border: 1px solid #000;
font-family: Arial;
font-size: 80px;
background-color: red;
color: black;
opacity: 1;
-webkit-transition-property: color;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: cubic-bezier(0.5, 0.2, 0.9, 0.4);
#ad728:hover {
color: white;
<body align=center>
<div id="ad728">728x90</div>
<script type="text/javascript">
var ad300 = "stop";
var ad728 = document.getElementById('ad728');
var ad728value = window.getComputedStyle(ad728,null).getPropertyValue("color");
ad728.addEventListener('webkitTransitionEnd', function(event) {
if(ad728value === "red") {
ad300 = "play";
} else {
ad300 = "stop";
}, false );
In this example, you'll see that the 728 ´ 90 unit gets a transition effect on its CSS color property. Once the user
hovers over the 728 unit, you'll listen for an event of webkitTransitionEnd , which fires when the transition event
ends. This is useful because now you can handle these events and fire off other functions. In this case, you set a value
for the 300 unit to listen for the play value on the variable called ad300 . Listing 11-14 shows the 300 unit listening for
this change in value from stop to play .
Search WWH ::

Custom Search