IE-only transition effect
This is an IE-only transition effect. I never use IE, but I quite like this. (I really should get some better images though, eh?)
HTML
<div id="transition">
<h1>IE-only transition effect</h1>
<ul id="buttons">
<li><a href="#n" onclick="transition('wine')"><img src="wine50.jpg" height="50" alt="wine" /></a></li>
<li><a href="#n" onclick="transition('beer')"><img src="beer50.jpg" height="50" alt="beer" /></a></li>
<li><a href="#n" onclick="transition('whisky')"><img src="whisky50.jpg" height="50" alt="whisky" /></a></li>
</ul>
<div id="imagebox">
<a id="bigpicLink" href="http://whisky.com"><img id="bigpic" src="wine200.jpg" height="200" alt="WINE" /></a>
<img id="caption" src="wine_cap.jpg" height="30" alt="Mmmm... WINE" />
</div>
<p>This is an IE-only transition effect. I never use IE, but I quite like this. (I really should get some better images though, eh?)</p>
</div>
CSS
#transition #buttons {
width:162px;
margin:10px auto;
list-style:none;
}
#transition #buttons:after {
content:"";
clear:both;
display:block;
}
#transition #buttons li,
#transition #buttons a {
float:left;
margin:1px;
display:inline;
}
#transition #imagebox{
width:200px;
margin:auto;
border:1px solid gray;
}
#transition #imagebox img {
display:block;
}
Javascript
var filterstring="progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0, wipeStyle=1, Duration=1, motion='forward')";
var filterstringcapt="revealTrans(transition=6,duration=1)";
var choices= new Array(3);
choices[0]= new Array(5);
choices[0][0]= 'wine200.jpg'; // big image
choices[0][1]= 'wine'; // alt text
choices[0][2]= 'wine_cap.jpg'; // caption
choices[0][3]= 'Mmmm... WINE'; // caption alt
choices[0][4]= 'http://wine.com'; // link
choices[1]= new Array(5);
choices[1][0]= 'beer200.jpg'; // big image
choices[1][1]= 'beer'; // alt text
choices[1][2]= 'beer_cap.jpg'; // caption
choices[1][3]= 'Mmmm... BEER'; // caption alt
choices[1][4]= 'http://beer.com'; // link
choices[2]= new Array(5);
choices[2][0]= 'whisky200.jpg'; // big image
choices[2][1]= 'whisky'; // alt text
choices[2][2]= 'whisky_cap.jpg'; // caption
choices[2][3]= 'Mmmm... WHISKY'; // caption alt
choices[2][4]= 'http://whisky.com'; // link
function transition(image) {
var list=['wine','beer','whisky'];
for(var i=0; i<list.length; i++) { // this finds which one you want to show
if (list[i]==image) {
var choice=i;
}
}
theimg = document.getElementById("bigpic"); // the original big pic
thecaption = document.getElementById("caption"); // the original caption
thelink = document.getElementById("bigpicLink"); // the original big pic link
if (theimg.filters && window.createPopup) {
theimg.style.filter=filterstring;
theimg.filters[0].Apply();
theimg.filters[0].Play();
setTimeout("modifyImageSrc("+choice+", true)", 1000); // pauses before showing new image
return false;
}
modifyImageSrc(choice);
return false;
}
function modifyImageSrc(choice, filterInit)
{
if(filterInit)
{
theimg.style.filter="blendTrans(duration=1)"; // IE-only style rule
theimg.filters[0].Apply();
theimg.filters[0].Play();
thecaption.style.filter=filterstringcapt;
thecaption.filters[0].Apply();
thecaption.filters[0].Play();
}
theimg.src = choices[choice][0]; // change the image
theimg.alt = choices[choice][1];
thecaption.src= choices[choice][2];
thecaption.alt= choices[choice][3];
thelink.href = choices[choice][4];
}