HTML and CSS Reference
In-Depth Information
Listing 11-13.
Synced Ad Example 728 Ad
<!DOCTYPE HTML>
<html lang=en>
<head>
</head>
<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;
}
</style>
<body align=center>
<div id="ad728">728x90</div>
</body>
<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 );
</script>
</html>
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
.
