Web Workshop - altered images in Navigator and IE.

My Internet Explorer-only animated pushbuttons in issue 148 of PC Plus magazine brought howls of anguish from Netscape afficionados, so this month I'm making amends with altered images (or image substitution, to give it its proper title). By changing the source files of image tags 'in flight', you can create effects from simple 'rollover' animations to - yes - animated pushbuttons. What's more, it works with Netscape Navigator and Microsoft Internet Explorer.


Altered Images Guidebook
Reference
Microsoft
Netscape
Paul's Pages
Image substitution is a bit of Dynamic HTML which - amazingly - works in both the leading browsers (and in versions earlier than 4.0, too). It involves changing the .src (image file name) property of an object representing an <IMG> tag, causing the browser to display a different image at the tag's screen position, without reloading the entire page.

By doing this in conjunction with mouse-handling events such as onclick and onmouseover, you can create 'rollover' graphics which 'animate' when the mouse pointer moves over them, and buttons which 'light up' or 'pop out' when clicked. You can also create multi-image slide shows, and timer-controlled effects such as the 'video wall' at the top of this page.

Image substitution is very easy in Internet Explorer 4.0 (you just say something like 'MyPic.src="newimage.gif"), but to make it work with Netscape Navigator you have to use slightly more complex techniques. This is because Navigator doesn't let you reference <IMG> tag objects directly, and doesn't support onclick or onmouseover/out events on <IMG>s either. Luckily the workarounds aren't too difficult, and they also work with IE.

In my Altered Images Guide you'll find details of how to use Netscape/IE-compatible code to produce rollover animations and push buttons, plus radio-group buttons (where selecting one button deselects another), independently toggled on/off buttons, and slide shows. I've written JavaScript libraries to handle toggle and radio buttons, and you can download them to your local disk from the toggle and radio button sections of the Guide.

To be Netscape-compatible, you have to 'wrap' your alterable images in hyperlink (<A>...<>/A>) containers, and the Guide has a section on ways of configuring hyperlinks to be inactive, or conventional HREF= page-loaders, or JavaScript function-callers.

Internet Client SDK Is Dead, Long Live SiteBuilder Workshop (but watch your phone bill!).

The bad news is that Microsoft's brilliant Internet Client SDK, a set of HTML pages containing reference and tutorials on everything from basic HTML tags to JavaScript, is no more. The good news is that the SDK material has been transferred to Microsoft's  new, even more comprehensive and extremely stylish SiteBuilder Workshop section, which includes material on the forthcoming IE5.

However there is a major drawback - unlike the old SDK, the Workshop pages can't be downloaded in bulk for local browsing from your hard disk. Microsoft's excuse is that the pages are so 'dynamic' that you need to get the latest versions from the server each time (click here to view their excuse page), although another reason could be that they just haven't finished writing them yet. 'Snapshots' on CD are promised for some time in the future.

Meanwhile Netscape's DevEdge Online isn't quite as slickly presented as Microsoft's site and doesn't, of course, cover IE4 Dynamic HTML, but its various HTML-based guides are downloadable in .zip form (Tip - check the sections in the left-hand menu to find topics such as HTML tags and JavaScript).

Until next month, happy authoring!


Back to Menu