The Official Wireshark Blog

Javascript Background Animation

Categories: Tip
The Windows 7 taskbar does this nifty little background animation when you mouse over an open application’s icon. I wanted to see if the effect could be duplicated on a web page. Suppose we have a couple of inline elements: <div> <img class="bgmove" src="wsbadge-empty.png"> </div> <h1> <span class="bgmove">Packets!</span> </h1> The image is mostly transparent: We have a background that’s slightly larger than our elements, which lets us position it using negative offsets: .bgmove { background-image: url('wsbadge-bg.png'); background-repeat: no-repeat; background-position: -50px -20px; } jQuery lets us do two important things: track mouse motion and determine an element’s dimensions. This lets us shift the backround around when we mouse over each element: $(document).ready(function(){ $("div img.bgmove").pngFix(); $(".bgmove").mousemove(function(e){ var elWidth = $(e.target).outerWidth(); var elHeight = $(e.target).outerHeight(); var bgWidth = 279; var bgHeight = 95; var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; //var offX = -1 * (x * (bgWidth - elWidth) / elWidth); // Against the mouse var offX = (x * (bgWidth - elWidth) / elWidth) - (bgWidth - elWidth); // With the mouse var offY = -1 * (y * (bgHeight - elHeight) / elHeight); // Against the mouse //var offY = (y * (bgHeight - elHeight) / elHeight) - (bgHeight - elHeight); // With the mouse bgPos = offX + 'px ' + offY + 'px'; this.

Sharkfest ’10 – Mark your calendar

Categories: Announcement
Sharkfest ’10 will take place at Stanford University from June 14 to 18. I’ll follow up when I have more details.

Chappell Seminars Summit 09 – Mark your calendar

Categories: Announcement
Laura Chappell will be hosting another tools, troubleshooting, and security summit in Santa Clara, CA December 7th, 8th, and 9th where I’ll be a special guest. See you there!