Is it possible to create clickable, animating sprites without relying on Flash? I want the sprites to show a bubble popup when clicked or touched, and then dismiss when the screen is clicked again. However, I'm facing an issue where the clickable areas do not align properly with the sprites.
You can view the webpage using Safari, Chrome, or the default browser for iOS or Android by following this link:
The clickable area for each sprite should be the same size as the sprite itself but centered on the corner from which the steam flows.
I have tested this functionality on various browsers such as Safari 6, iOS 6, Android 4.0's browser, and Chrome (version 21 on Windows 7). The issue persists across all these browsers.
If you have any suggestions on why the alignment is off or how to fix it, please let me know.
The relevant code can be found in index.html. Here are key excerpts:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS sprite demo</title>
<style type="text/css">
.spipe {
position: absolute;
width: 1px;
height: 1px;
background: url(spipe.png) no-repeat 0 0;
background-size: 1px 20px;
-webkit-animation-name: spipe;
-webkit-animation-duration: 1.0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-transform-origin: top left;
}
.left {
-webkit-transform: scale(100, 60);
}
</style>
</head>
<body>
<div id="toppipe" class="popup spipe left" style="top:120px;left:200px;" popupHTML="Hello, Top"></div>
</body>
</html>
To prevent the sprite from rolling between frames, it needs to be scaled down and back up.
The problem seems to arise from the clickable area scaling up from a different origin than the rest of the div. Even changing the transform origin does not resolve the offset issue. Similarly, translating the div affects both the clickable area and the div, making it challenging to correct the alignment discrepancy.