 |
Following on from my previous post on Embedding data within HTML I thought it might be interesting to see if you could use client-side JavaScript to modify the embedded data in a useful manner. It turns out that modifying the palette of a GIF image is not very difficult, so here is a proof of concept that demonstrates how this colour change can be effected.
You can see the code by viewing the source of this page. The main interesting component (copied below) is that the colours are set by modifying a few particular bytes. Specifically, the hex value of red is set at bytes 43 & 44, green at 46 & 47 and blue at 49 & 50 of my data element. Knowing that, the reading and writing of particular colours is elementary.
function setColour(data, red, green, blue) {
dataOffset = 43;
return(
data.substr(0, dataOffset) +
inHex(red) + '%' +
inHex(green) + '%' +
inHex(blue) +
data.substr(dataOffset + 8)
);
}
An enterprising programmer could no doubt use this to animate a rather more complex image. However, JavaScript is a pretty slow language, so the size of the image and the animation speed would probably be quite limited.
Again I apologise to users of Internet Explorer, but your browser is too old for this demonstration.