<script language="JavaScript">
image1 = new Image(500,423); image1.src = "http://poshopzil.com/bbs/member_imgBox/1/mininfo-1.jpg";
image2 = new Image(500,423); image2.src = "http://poshopzil.com/bbs/member_imgBox/1/mininfo-2.jpg";
function swapImage(divID, imageID, imageToSwap) {
globalDivID = divID;
globalImageID = imageID;
if (document.getElementById(imageID).src.indexOf(eval(imageToSwap+".src")) == -1) {
setOpacity(0, imageID);
document.getElementById(imageID).src = eval(imageToSwap+".src");
fadeElementSetup(imageID, 0, 100, 10);
}
}
function highlightImage(imageID) {
var imageSrc = document.getElementById(imageID).style.backgroundImage;
if (imageSrc.indexOf("-on") != -1) {
// alert("Already On");
} else {
if (typeof(lastChangedID) != "undefined") {
var lastSrc = document.getElementById(lastChangedID).style.backgroundImage;
var lastType = lastSrc.substring(lastSrc.lastIndexOf('.'), lastSrc.length);
var lastName = lastSrc.substring(0, lastSrc.lastIndexOf('-on'));
document.getElementById(lastChangedID).className = 'pdImg_sp';
}
var fileType = imageSrc.substring(imageSrc.lastIndexOf('.'), imageSrc.length);
var newSrc = imageSrc.replace(fileType, "-on"+fileType);
document.getElementById(imageID).className = 'pdImg_sp_on';
lastChangedID = imageID;
}
}
function fadeElementSetup(theID, fdStart, fdEnd, fdSteps) {
fadeSteps = fdSteps;
fadeCurrent = 0;
fadeAmount = (fdStart - fdEnd) / fadeSteps;
fadeTimer = setInterval("fadeElement('"+theID+"')", 50);
}
function fadeElement(theID) {
fadeCurrent++;
if (fadeAmount < 0) {
setOpacity(Math.abs(fadeCurrent * fadeAmount), theID);
} else {
setOpacity(100 - (fadeCurrent * fadeAmount), theID);
}
if (fadeCurrent == fadeSteps) {
clearInterval(fadeTimer);
}
}
function setOpacity(opacity, theID) {
var object = document.getElementById(theID).style;
if (navigator.userAgent.indexOf("Firefox") != -1) {
if (opacity == 100) { opacity = 99.999; } // This is majorly retarded
}
// Multi-browser opacity setting
object.filter = "alpha(opacity=" + opacity + ")"; // IE/Win
object.KhtmlOpacity = (opacity / 100); // Safari 1.1 or lower, Konqueror
object.MozOpacity = (opacity / 100); // Older Mozilla+Firefox
object.opacity = (opacity / 100); // Safari 1.2, Firefox+Mozilla
}
</script>
<style type="text/css" media="all">
#mainDiv {width:500px; height:423px;}
#mainDiv img{width:500px; height:423px; border:0;}
.pdImg_sp {width:66px; height:56px; border:3px solid #f8f8f8; cursor:pointer;}
.pdImg_sp_on {width:66px; height:56px; border:3px solid #3cc; cursor:pointer;}
#mainDiv_thmD {margin:5px 0 0 0;}
</style>
<div id="mainDiv"><img src="http://poshopzil.com/bbs/member_imgBox/1/mininfo-1.jpg" id="blendDiv" id="image"></div>
<div id="mainDiv_thmD">
<img id="minthumb-1" onclick="swapImage('mainDiv', 'blendDiv', 'image1'); highlightImage('minthumb-1');" class="pdImg_sp" src="http://poshopzil.com/bbs/member_imgBox/1/mininfo-1.jpg" />
<img id="minthumb-2" onclick="swapImage('mainDiv', 'blendDiv', 'image2'); highlightImage('minthumb-2');" class="pdImg_sp" src="http://poshopzil.com/bbs/member_imgBox/1/mininfo-2.jpg" />
</div>
<script language="JavaScript">
highlightImage('minthumb-1', 1);
</script>
|
