canadianjameson
07-10-2007, 10:52 PM
Hi,
I can't quite figure out why, but the horizontal image set I have contained in the div 'logoC' wraps onto a second line if the user's browser isn't maximized (or big enough), and even after the user maximizes the window the images stay stuck where they were: you can see it here www.enviromark.ca/head/ (open it in a shrunken browser window)
Does anybody know why this is occurring? I would like it so that regardless of window size they display horizontally in one line
/* CSS Document */
* {
padding: 0;
margin: 0;
outline: 0;
}
* html #pageContainer {
height:100%;
}
* img {
border: 0
}
#pageContainer {
min-height: 100%;
}
.clear {
clear:both;
font-size:0;
line-height:0px;
}
#topText {
position: relative;
margin-top:75px;
margin-left: 75px;
}
#logoC {
margin-left: 175px
}
#bottomText {
margin-left: 75px;
margin-top: 67px
}
#links_BW {
float: left;
position: absolute;
display: block;
margin-left: 75px;
margin-top: 25px;
width: 70px;
}
#topBorder {
position: relative;
display: block;
margin-top:75px;
margin-left: 75px;
}
#contentarea {
position: relative;
margin-left: 155px;
margin-top: 27px;
margin-right: 150px;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Testing</title>
<link rel="stylesheet" href="css/main.css" type="text/css">
<script language="JavaScript" type="text/javascript" src="js/dynamic_content.js"></script>
<script language="JavaScript" type="text/javascript">
<!--
// Common Functions
// By Vic Phillips (30-June-2007) http://www.vicsjavascripts.org.uk
// Functional Code - No Need to Change
var zxcEvt=0;
function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
if (zxcp){ zxcp.appendChild(zxcele); }
if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
return zxcele;
}
function zxcStyleValue(zxcobj,zxcp){ // pass object and property, returns property value
if (zxcobj.currentStyle) return zxcobj.currentStyle[zxcp.replace('-','')];
return document.defaultView.getComputedStyle(zxcobj,null).getPropertyValue(zxcp.toLowerCase());
}
function zxcStyleRules(){
var zxcssheets=document.styleSheets;
var zxcruleary=[];
var zxcstyleary=[];
for (var zxc0=0;zxc0<zxcssheets.length;zxc0++){ zxcstyleary.push((document.all)?zxcssheets[zxc0].cssText:zxcssheets[zxc0]); }
if (document.all){
for (var zxc1=0;zxc1<zxcstyleary.length;zxc1++){
zxcstyleary[zxc1]=zxcstyleary[zxc1].split('}');
for (var zxc1a=0;zxc1a<zxcstyleary[zxc1].length-1;zxc1a++){
zxcruleary.push(zxcstyleary[zxc1][zxc1a].replace(/\s/g,'')+'}');
}
}
}
else {
for (var zxc1=0;zxc1<zxcstyleary.length;zxc1++){
for (var zxc1a=0;zxc1a<zxcstyleary[zxc1].cssRules.length;zxc1a++){
zxcruleary.push(zxcstyleary[zxc1].cssRules[zxc1a].cssText.replace(/\s/g,''));
}
}
}
return zxcruleary
}
function zxcPos(zxcobj){
zxclft=zxcobj.offsetLeft;
zxctop=zxcobj.offsetTop;
while(zxcobj.offsetParent!=null){
zxcpar=zxcobj.offsetParent;
zxclft+=zxcpar.offsetLeft;
zxctop+=zxcpar.offsetTop;
zxcobj=zxcpar;
}
return [zxclft,zxctop];
}
function zxcWWHS(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTo p];
}
function zxcNoTxtNodes(zxcp){
var zxcclds=zxcp.childNodes,zxcary=[];
for (var zxca=0;zxca<zxcclds.length;zxca++){ if (zxcclds[zxca].nodeType!=1) zxcary.push(zxcclds[zxca]); }
for (var zxcb=0;zxcb<zxcary.length;zxcb++){ zxcp.removeChild(zxcary[zxcb]); }
return zxcclds;
}
function zxcMse(zxcevt){
if(!zxcevt) var zxcevt=window.event;
if (document.all) return [zxcevt.clientX+zxcDocS()[0],zxcevt.clientY+zxcDocS()[1]];
return [zxcevt.pageX,zxcevt.pageY];
}
function zxcDocS(){
if (!document.body.scrollTop) return [document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.scrollLeft,document.body.scrollTop];
}
function zxcEventAdd(zxco,zxct,zxcf) {
if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
else {
var zxcPrev=zxco["on" + zxct];
if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
else { zxco['on'+zxct]=zxco[zxcf]; }
}
}
function zxcAddEvent(zxc,zxcfun,zxcevt){
if (zxc.addEvent){ return; }
zxc.addEvent=window[zxcfun];
zxcEventAdd(zxc,zxcevt,'addEvent');
}
function zxcAddEvt(zxc,zxcfun,zxcevt){
zxc['zxcaddEvt'+zxcEvt]=window[zxcfun];
zxcEventAdd(zxc,zxcevt,'zxcaddEvt'+zxcEvt);
zxcEvt++;
}
function zxcRemoveEvt(zxcfun,zxcevt){
if ( zxco.removeEventListener ){ zxco.removeEventListener(zxcevt,zxcfun,false); }
else if (zxco.detachEvent){ zxco.detachEvent('on'+zxcevt,zxcfun); }
}
function zxcOpacity(zxcobj,zxcopc) {
if (zxcopc<0||zxcopc>100){ return; }
if (zxcobj.style.MozOpacity!=null){ zxcobj.style.MozOpacity=(zxcopc/100)-.001; }
else if (zxcobj.style.opacity!=null){ zxcobj.style.opacity=(zxcopc/100)-.001; }
else if (zxcobj.style.filter!=null){ zxcobj.style.filter = 'alpha(opacity='+zxcopc+')'; }
else if (zxcobj.KHTMLOpacity!=null){ zxcobj.KHTMLOpacity=(zxcopc/100)-.001; }
}
function zxcCkEventObj(zxce){
if (!zxce) var zxce=window.event;
zxce.cancelBubble=true;
if (zxce.stopPropagation) zxce.stopPropagation();
if (zxce.target) zxceobj=zxce.target;
else if (zxce.srcElement) zxceobj=zxce.srcElement;
if (zxceobj.nodeType==3) zxceobj=tt_eobj.parentNode;
var zxcft;
if (zxce.type=='mouseout'){ zxcft=zxcEventTo(zxce); }
else { zxcft=zxcEventFrom(zxce); }
if (zxcft.oop){ return false; }
while (zxcft.parentNode){
if (zxcft.oop){ return false; }
zxcft=zxcft.parentNode;
}
return true;
}
function zxcCkEventObj(zxce){
if (!zxce) var zxce=window.event;
zxce.cancelBubble=true;
if (zxce.stopPropagation) zxce.stopPropagation();
var zxceobj=(zxce.relatedTarget)?zxce.relatedTarget:(zxce.type=='mouseout')?zxce.toElement:zxce.fromElem ent;
while (zxceobj.parentNode){
if (window['zxc'+zxceobj.id]){ return false; }
zxceobj=zxceobj.parentNode;
}
return true;
}
//-->
</script><script language="JavaScript" type="text/javascript">
<!--
function zxcResetImages(zxcid2){
var zxcp=document.getElementById(zxcid2);
zxcp.hold=null;
if (zxcp.ary){
for (var zxc0=0;zxc0<zxcp.ary.length;zxc0++){
if (zxcp.mirror[zxc0][2].oop){
if (zxcp.mirror[zxc0][2].oop.inc>0) zxcFadeDo(zxcp.mirror[zxc0][2],'mouseout');
}
if (!zxcCkOpactiy(zxcp.mirror[zxc0][2])) zxcES(zxcp.mirror[zxc0][2].childNodes[0],{zIndex:'2'});
if (zxcp.ary[zxc0][2].oop){
if (zxcp.ary[zxc0][2].oop.inc>0) zxcFadeDo(zxcp.ary[zxc0][2],'mouseout');
}
if (!zxcCkOpactiy(zxcp.ary[zxc0][2])) zxcES(zxcp.ary[zxc0][2].childNodes[0],{zIndex:'2'});
}
}
}
function zxcInitImages(zxcid1,zxcid2){
var zxcp1=document.getElementById(zxcid1);
var zxcp2=document.getElementById(zxcid2);
zxcNoTxtNodes(zxcp1);
zxcNoTxtNodes(zxcp2);
var zxcimgs1=zxcp1.getElementsByTagName('IMG');
var zxcimgs2=zxcp2.getElementsByTagName('IMG');
zxcp2.mirror=[];
zxcp2.ary=[];
for (var zxc1=0;zxc1<zxcimgs1.length;zxc1++) zxcp2.mirror[zxc1]=[zxcimgs1[zxc1],zxcimgs2[zxc1],zxcES('DIV',{position:'absolute',left:(zxcimgs1[zxc1].offsetLeft)+'px',top:zxcimgs1[zxc1].offsetTop+'px',width:zxcimgs1[zxc1].width+'px',height:zxcimgs1[zxc1].height+'px',border:'solid black 0px'},zxcp1)];
for (var zxc3=0;zxc3<zxcimgs2.length;zxc3++) zxcp2.ary[zxc3]=[zxcimgs2[zxc3],zxcimgs1[zxc3],zxcES('DIV',{position:'absolute',left:(zxcimgs2[zxc3].offsetLeft)+'px',top:zxcimgs2[zxc3].offsetTop+'px',width:zxcimgs2[zxc3].width+'px',height:zxcimgs2[zxc3].height+'px',border:'solid black 0px'},zxcp2)];
for (var zxc2=0;zxc2<zxcp2.mirror.length;zxc2++){
zxcES(zxcp2.mirror[zxc2][0],{position:'absolute',zIndex:'2',left:'0px',top:'0px'},zxcp2.mirror[zxc2][2]);
var zxcdiv=zxcES(zxcp2.mirror[zxc2][2].cloneNode(false),{left:'0px',top:'0px'},zxcp2.mirror[zxc2][2])
zxcES(zxcp2.mirror[zxc2][1].cloneNode(false),{position:'absolute',left:'0px',top:'0px'},zxcdiv);
}
for (var zxc4=0;zxc4<zxcp2.ary.length;zxc4++){
zxcES(zxcp2.ary[zxc4][0],{position:'absolute',zIndex:'2',left:'0px',top:'0px'},zxcp2.ary[zxc4][2]);
zxcp2.ary[zxc4][2].onclick=zxcp2.ary[zxc4][0].onclick;
var zxcdiv=zxcES(zxcp2.ary[zxc4][2].cloneNode(false),{position:'absolute',zIndex:'1',left:'0px',top:'0px'},zxcp2.ary[zxc4][2])
zxcES(zxcp2.ary[zxc4][1].cloneNode(false),{position:'absolute',left:'0px',top:'0px'},zxcdiv);
zxcAddEvt(zxcp2.ary[zxc4][2],'zxcMseOverOut','mouseover');
zxcAddEvt(zxcp2.ary[zxc4][2],'zxcMseOverOut','mouseout');
zxcAddEvt(zxcp2.ary[zxc4][2],'zxcMseOverOut','click');
}
zxcp2.hold=null;
zxcp2.holdmirror=null;
}
function zxcMseOverOut(zxcevt){
var zxcp=this.parentNode;
var zxcdivs=zxcp.childNodes;
for (var zxc0=0;zxc0<zxcdivs.length;zxc0++){
if (zxcdivs[zxc0]==this) break;
}
if (zxcevt.type=='click'){
if (zxcp.hold&&zxcp.hold!=this) zxcFadeDo(zxcp.hold,'mouseout'); // to fix * If I click a second time on an image in links_BW (double-click slowly), the image fades back from colored to gray and stays that way. Can you set the script to verify that an image in links_BW is not already "set to color" to avoid this?
zxcp.hold=this;
if (zxcp.holdmirror) zxcFadeDo(zxcp.holdmirror,'mouseout');
zxcp.holdmirror=zxcp.mirror[zxc0][2];
zxcFadeDo(zxcp.holdmirror,'mouseover');
}
else if (this!=zxcp.hold){
zxcFadeDo(this,zxcevt.type);
// zxcFadeDo(zxcp.mirror[zxc0][2],zxcevt.type); // to make horizontal fade onmouseover
}
}
function zxcFadeDo(zxcobj,zxcmde){
if (!zxcCkOpactiy(zxcobj)) zxcES(zxcobj.childNodes[0],{zIndex:(zxcevt.type=='mouseover')?'0':'2'});
if (!zxcobj.oop) zxcobj.oop=new zxcFadeOOP(zxcobj);
clearTimeout(zxcobj.oop.to);
zxcobj.oop.ud=(zxcmde=='mouseover')?2:-2; // adjust speed here
if (zxcobj.oop.ud<0&&zxcobj.oop.inc<50) zxcobj.oop.cont();
else zxcobj.oop.swap();
}
function zxcCkOpactiy(zxcobj){
if (zxcobj.style.MozOpacity!=null&&zxcobj.style.opacity!=null&&zxcobj.style.filter!=null&&zxcobj.KHTMLOpacity!=null) return false;
return true;
}
var zxcOOPCnt=0;
function zxcFadeOOP(zxcobj,zxcident){
this.to=null;
this.ref='oop'+zxcOOPCnt++;
window[this.ref]=this;
this.obj=zxcobj.childNodes[1];
zxcES(zxcobj.childNodes[0],{zIndex:'0'});
this.ud=0;
this.inc=0;
this.opacity(0);
}
zxcFadeOOP.prototype.swap=function(){
if ((this.ud>0&&this.inc<=100-this.ud)||(this.ud<0&&this.inc>=0-this.ud)){
this.opacity(this.inc+=this.ud);
this.setTimeOut('swap()',10);
}
}
zxcFadeOOP.prototype.cont=function(){
if ((this.ud<0&&this.inc<50)||(this.ud>0&&this.inc>0)){ // change the '50' to change the min-fade delay
this.opacity(this.inc-=this.ud);
this.setTimeOut('cont()',10);
}
else if (this.ud<0&&this.inc>0){
this.ud=-this.ud
this.setTimeOut('cont()',10);
}
}
zxcFadeOOP.prototype.opacity=function(zxcopc){
if (zxcopc<0||zxcopc>100) return;
if (this.obj.style.MozOpacity!=null) this.obj.style.MozOpacity=(zxcopc/100)-.001;
else if (this.obj.style.opacity!=null) this.obj.style.opacity=(zxcopc/100)-.001;
else if (this.obj.style.filter!=null) this.obj.style.filter='alpha(opacity='+zxcopc+')';
else if (this.obj.KHTMLOpacity!=null) this.obj.KHTMLOpacity=(zxcopc/100)-.001;
}
zxcFadeOOP.prototype.setTimeOut=function(zxcf,zxcd){
this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
}
//-->
</script>
</head>
<body onload="zxcInitImages('logoC','links_BW')">
<div id="pageContainer">
<div id="topText"><img src="images/logoButtons/top_text.gif"></div>
<div id="logoC">
<img src="images/logoButtons/info_C.gif" >
<img src="images/logoButtons/YPP_C.gif" >
<img src="images/logoButtons/social_C.gif" >
<img src="images/logoButtons/med_C.gif" >
<img src="images/logoButtons/legal_C.gif" >
<img src="images/logoButtons/J2K_C.gif" >
<img src="images/logoButtons/street_C.gif" >
</div>
<div id="bottomText"><img src="images/logoButtons/bottom_text.gif"></div>
<div id="links_BW">
<img src="images/logoButtons/info_BW.jpg" onclick="ajaxpage('YPP.htm', 'contentarea'); loadobjs('css/pages.css')">
<img src="images/logoButtons/YPP_BW.jpg" >
<img src="images/logoButtons/social_BW.jpg" >
<img src="images/logoButtons/med_BW.jpg" >
<img src="images/logoButtons/legal_BW.jpg" >
<img src="images/logoButtons/J2K_BW.jpg" >
<img src="images/logoButtons/street_BW.jpg" >
</div>
<div class="clear"></div>
<div id="contentarea"></div>
<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:hidden;top:420px;left:0px;" >
<input size=10 name=Show0 >
<input size=10 name=Show1 >
<input size=10 name=Show2 >
<input size=10 name=Show3 >
<input size=10 name=Show4 >
<input size=10 name=Show5 >
<input size=10 name=Show6 >
<input size=10 name=Show7 >
<input size=10 name=Show8 >
<input size=10 name=Show9 ><br>
<textarea name=TA rows=10 cols=100 ></textarea>
</form>
</div>
</body>
</html>
Thanks :D
I can't quite figure out why, but the horizontal image set I have contained in the div 'logoC' wraps onto a second line if the user's browser isn't maximized (or big enough), and even after the user maximizes the window the images stay stuck where they were: you can see it here www.enviromark.ca/head/ (open it in a shrunken browser window)
Does anybody know why this is occurring? I would like it so that regardless of window size they display horizontally in one line
/* CSS Document */
* {
padding: 0;
margin: 0;
outline: 0;
}
* html #pageContainer {
height:100%;
}
* img {
border: 0
}
#pageContainer {
min-height: 100%;
}
.clear {
clear:both;
font-size:0;
line-height:0px;
}
#topText {
position: relative;
margin-top:75px;
margin-left: 75px;
}
#logoC {
margin-left: 175px
}
#bottomText {
margin-left: 75px;
margin-top: 67px
}
#links_BW {
float: left;
position: absolute;
display: block;
margin-left: 75px;
margin-top: 25px;
width: 70px;
}
#topBorder {
position: relative;
display: block;
margin-top:75px;
margin-left: 75px;
}
#contentarea {
position: relative;
margin-left: 155px;
margin-top: 27px;
margin-right: 150px;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Testing</title>
<link rel="stylesheet" href="css/main.css" type="text/css">
<script language="JavaScript" type="text/javascript" src="js/dynamic_content.js"></script>
<script language="JavaScript" type="text/javascript">
<!--
// Common Functions
// By Vic Phillips (30-June-2007) http://www.vicsjavascripts.org.uk
// Functional Code - No Need to Change
var zxcEvt=0;
function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
if (zxcp){ zxcp.appendChild(zxcele); }
if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
return zxcele;
}
function zxcStyleValue(zxcobj,zxcp){ // pass object and property, returns property value
if (zxcobj.currentStyle) return zxcobj.currentStyle[zxcp.replace('-','')];
return document.defaultView.getComputedStyle(zxcobj,null).getPropertyValue(zxcp.toLowerCase());
}
function zxcStyleRules(){
var zxcssheets=document.styleSheets;
var zxcruleary=[];
var zxcstyleary=[];
for (var zxc0=0;zxc0<zxcssheets.length;zxc0++){ zxcstyleary.push((document.all)?zxcssheets[zxc0].cssText:zxcssheets[zxc0]); }
if (document.all){
for (var zxc1=0;zxc1<zxcstyleary.length;zxc1++){
zxcstyleary[zxc1]=zxcstyleary[zxc1].split('}');
for (var zxc1a=0;zxc1a<zxcstyleary[zxc1].length-1;zxc1a++){
zxcruleary.push(zxcstyleary[zxc1][zxc1a].replace(/\s/g,'')+'}');
}
}
}
else {
for (var zxc1=0;zxc1<zxcstyleary.length;zxc1++){
for (var zxc1a=0;zxc1a<zxcstyleary[zxc1].cssRules.length;zxc1a++){
zxcruleary.push(zxcstyleary[zxc1].cssRules[zxc1a].cssText.replace(/\s/g,''));
}
}
}
return zxcruleary
}
function zxcPos(zxcobj){
zxclft=zxcobj.offsetLeft;
zxctop=zxcobj.offsetTop;
while(zxcobj.offsetParent!=null){
zxcpar=zxcobj.offsetParent;
zxclft+=zxcpar.offsetLeft;
zxctop+=zxcpar.offsetTop;
zxcobj=zxcpar;
}
return [zxclft,zxctop];
}
function zxcWWHS(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTo p];
}
function zxcNoTxtNodes(zxcp){
var zxcclds=zxcp.childNodes,zxcary=[];
for (var zxca=0;zxca<zxcclds.length;zxca++){ if (zxcclds[zxca].nodeType!=1) zxcary.push(zxcclds[zxca]); }
for (var zxcb=0;zxcb<zxcary.length;zxcb++){ zxcp.removeChild(zxcary[zxcb]); }
return zxcclds;
}
function zxcMse(zxcevt){
if(!zxcevt) var zxcevt=window.event;
if (document.all) return [zxcevt.clientX+zxcDocS()[0],zxcevt.clientY+zxcDocS()[1]];
return [zxcevt.pageX,zxcevt.pageY];
}
function zxcDocS(){
if (!document.body.scrollTop) return [document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.scrollLeft,document.body.scrollTop];
}
function zxcEventAdd(zxco,zxct,zxcf) {
if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
else {
var zxcPrev=zxco["on" + zxct];
if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
else { zxco['on'+zxct]=zxco[zxcf]; }
}
}
function zxcAddEvent(zxc,zxcfun,zxcevt){
if (zxc.addEvent){ return; }
zxc.addEvent=window[zxcfun];
zxcEventAdd(zxc,zxcevt,'addEvent');
}
function zxcAddEvt(zxc,zxcfun,zxcevt){
zxc['zxcaddEvt'+zxcEvt]=window[zxcfun];
zxcEventAdd(zxc,zxcevt,'zxcaddEvt'+zxcEvt);
zxcEvt++;
}
function zxcRemoveEvt(zxcfun,zxcevt){
if ( zxco.removeEventListener ){ zxco.removeEventListener(zxcevt,zxcfun,false); }
else if (zxco.detachEvent){ zxco.detachEvent('on'+zxcevt,zxcfun); }
}
function zxcOpacity(zxcobj,zxcopc) {
if (zxcopc<0||zxcopc>100){ return; }
if (zxcobj.style.MozOpacity!=null){ zxcobj.style.MozOpacity=(zxcopc/100)-.001; }
else if (zxcobj.style.opacity!=null){ zxcobj.style.opacity=(zxcopc/100)-.001; }
else if (zxcobj.style.filter!=null){ zxcobj.style.filter = 'alpha(opacity='+zxcopc+')'; }
else if (zxcobj.KHTMLOpacity!=null){ zxcobj.KHTMLOpacity=(zxcopc/100)-.001; }
}
function zxcCkEventObj(zxce){
if (!zxce) var zxce=window.event;
zxce.cancelBubble=true;
if (zxce.stopPropagation) zxce.stopPropagation();
if (zxce.target) zxceobj=zxce.target;
else if (zxce.srcElement) zxceobj=zxce.srcElement;
if (zxceobj.nodeType==3) zxceobj=tt_eobj.parentNode;
var zxcft;
if (zxce.type=='mouseout'){ zxcft=zxcEventTo(zxce); }
else { zxcft=zxcEventFrom(zxce); }
if (zxcft.oop){ return false; }
while (zxcft.parentNode){
if (zxcft.oop){ return false; }
zxcft=zxcft.parentNode;
}
return true;
}
function zxcCkEventObj(zxce){
if (!zxce) var zxce=window.event;
zxce.cancelBubble=true;
if (zxce.stopPropagation) zxce.stopPropagation();
var zxceobj=(zxce.relatedTarget)?zxce.relatedTarget:(zxce.type=='mouseout')?zxce.toElement:zxce.fromElem ent;
while (zxceobj.parentNode){
if (window['zxc'+zxceobj.id]){ return false; }
zxceobj=zxceobj.parentNode;
}
return true;
}
//-->
</script><script language="JavaScript" type="text/javascript">
<!--
function zxcResetImages(zxcid2){
var zxcp=document.getElementById(zxcid2);
zxcp.hold=null;
if (zxcp.ary){
for (var zxc0=0;zxc0<zxcp.ary.length;zxc0++){
if (zxcp.mirror[zxc0][2].oop){
if (zxcp.mirror[zxc0][2].oop.inc>0) zxcFadeDo(zxcp.mirror[zxc0][2],'mouseout');
}
if (!zxcCkOpactiy(zxcp.mirror[zxc0][2])) zxcES(zxcp.mirror[zxc0][2].childNodes[0],{zIndex:'2'});
if (zxcp.ary[zxc0][2].oop){
if (zxcp.ary[zxc0][2].oop.inc>0) zxcFadeDo(zxcp.ary[zxc0][2],'mouseout');
}
if (!zxcCkOpactiy(zxcp.ary[zxc0][2])) zxcES(zxcp.ary[zxc0][2].childNodes[0],{zIndex:'2'});
}
}
}
function zxcInitImages(zxcid1,zxcid2){
var zxcp1=document.getElementById(zxcid1);
var zxcp2=document.getElementById(zxcid2);
zxcNoTxtNodes(zxcp1);
zxcNoTxtNodes(zxcp2);
var zxcimgs1=zxcp1.getElementsByTagName('IMG');
var zxcimgs2=zxcp2.getElementsByTagName('IMG');
zxcp2.mirror=[];
zxcp2.ary=[];
for (var zxc1=0;zxc1<zxcimgs1.length;zxc1++) zxcp2.mirror[zxc1]=[zxcimgs1[zxc1],zxcimgs2[zxc1],zxcES('DIV',{position:'absolute',left:(zxcimgs1[zxc1].offsetLeft)+'px',top:zxcimgs1[zxc1].offsetTop+'px',width:zxcimgs1[zxc1].width+'px',height:zxcimgs1[zxc1].height+'px',border:'solid black 0px'},zxcp1)];
for (var zxc3=0;zxc3<zxcimgs2.length;zxc3++) zxcp2.ary[zxc3]=[zxcimgs2[zxc3],zxcimgs1[zxc3],zxcES('DIV',{position:'absolute',left:(zxcimgs2[zxc3].offsetLeft)+'px',top:zxcimgs2[zxc3].offsetTop+'px',width:zxcimgs2[zxc3].width+'px',height:zxcimgs2[zxc3].height+'px',border:'solid black 0px'},zxcp2)];
for (var zxc2=0;zxc2<zxcp2.mirror.length;zxc2++){
zxcES(zxcp2.mirror[zxc2][0],{position:'absolute',zIndex:'2',left:'0px',top:'0px'},zxcp2.mirror[zxc2][2]);
var zxcdiv=zxcES(zxcp2.mirror[zxc2][2].cloneNode(false),{left:'0px',top:'0px'},zxcp2.mirror[zxc2][2])
zxcES(zxcp2.mirror[zxc2][1].cloneNode(false),{position:'absolute',left:'0px',top:'0px'},zxcdiv);
}
for (var zxc4=0;zxc4<zxcp2.ary.length;zxc4++){
zxcES(zxcp2.ary[zxc4][0],{position:'absolute',zIndex:'2',left:'0px',top:'0px'},zxcp2.ary[zxc4][2]);
zxcp2.ary[zxc4][2].onclick=zxcp2.ary[zxc4][0].onclick;
var zxcdiv=zxcES(zxcp2.ary[zxc4][2].cloneNode(false),{position:'absolute',zIndex:'1',left:'0px',top:'0px'},zxcp2.ary[zxc4][2])
zxcES(zxcp2.ary[zxc4][1].cloneNode(false),{position:'absolute',left:'0px',top:'0px'},zxcdiv);
zxcAddEvt(zxcp2.ary[zxc4][2],'zxcMseOverOut','mouseover');
zxcAddEvt(zxcp2.ary[zxc4][2],'zxcMseOverOut','mouseout');
zxcAddEvt(zxcp2.ary[zxc4][2],'zxcMseOverOut','click');
}
zxcp2.hold=null;
zxcp2.holdmirror=null;
}
function zxcMseOverOut(zxcevt){
var zxcp=this.parentNode;
var zxcdivs=zxcp.childNodes;
for (var zxc0=0;zxc0<zxcdivs.length;zxc0++){
if (zxcdivs[zxc0]==this) break;
}
if (zxcevt.type=='click'){
if (zxcp.hold&&zxcp.hold!=this) zxcFadeDo(zxcp.hold,'mouseout'); // to fix * If I click a second time on an image in links_BW (double-click slowly), the image fades back from colored to gray and stays that way. Can you set the script to verify that an image in links_BW is not already "set to color" to avoid this?
zxcp.hold=this;
if (zxcp.holdmirror) zxcFadeDo(zxcp.holdmirror,'mouseout');
zxcp.holdmirror=zxcp.mirror[zxc0][2];
zxcFadeDo(zxcp.holdmirror,'mouseover');
}
else if (this!=zxcp.hold){
zxcFadeDo(this,zxcevt.type);
// zxcFadeDo(zxcp.mirror[zxc0][2],zxcevt.type); // to make horizontal fade onmouseover
}
}
function zxcFadeDo(zxcobj,zxcmde){
if (!zxcCkOpactiy(zxcobj)) zxcES(zxcobj.childNodes[0],{zIndex:(zxcevt.type=='mouseover')?'0':'2'});
if (!zxcobj.oop) zxcobj.oop=new zxcFadeOOP(zxcobj);
clearTimeout(zxcobj.oop.to);
zxcobj.oop.ud=(zxcmde=='mouseover')?2:-2; // adjust speed here
if (zxcobj.oop.ud<0&&zxcobj.oop.inc<50) zxcobj.oop.cont();
else zxcobj.oop.swap();
}
function zxcCkOpactiy(zxcobj){
if (zxcobj.style.MozOpacity!=null&&zxcobj.style.opacity!=null&&zxcobj.style.filter!=null&&zxcobj.KHTMLOpacity!=null) return false;
return true;
}
var zxcOOPCnt=0;
function zxcFadeOOP(zxcobj,zxcident){
this.to=null;
this.ref='oop'+zxcOOPCnt++;
window[this.ref]=this;
this.obj=zxcobj.childNodes[1];
zxcES(zxcobj.childNodes[0],{zIndex:'0'});
this.ud=0;
this.inc=0;
this.opacity(0);
}
zxcFadeOOP.prototype.swap=function(){
if ((this.ud>0&&this.inc<=100-this.ud)||(this.ud<0&&this.inc>=0-this.ud)){
this.opacity(this.inc+=this.ud);
this.setTimeOut('swap()',10);
}
}
zxcFadeOOP.prototype.cont=function(){
if ((this.ud<0&&this.inc<50)||(this.ud>0&&this.inc>0)){ // change the '50' to change the min-fade delay
this.opacity(this.inc-=this.ud);
this.setTimeOut('cont()',10);
}
else if (this.ud<0&&this.inc>0){
this.ud=-this.ud
this.setTimeOut('cont()',10);
}
}
zxcFadeOOP.prototype.opacity=function(zxcopc){
if (zxcopc<0||zxcopc>100) return;
if (this.obj.style.MozOpacity!=null) this.obj.style.MozOpacity=(zxcopc/100)-.001;
else if (this.obj.style.opacity!=null) this.obj.style.opacity=(zxcopc/100)-.001;
else if (this.obj.style.filter!=null) this.obj.style.filter='alpha(opacity='+zxcopc+')';
else if (this.obj.KHTMLOpacity!=null) this.obj.KHTMLOpacity=(zxcopc/100)-.001;
}
zxcFadeOOP.prototype.setTimeOut=function(zxcf,zxcd){
this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
}
//-->
</script>
</head>
<body onload="zxcInitImages('logoC','links_BW')">
<div id="pageContainer">
<div id="topText"><img src="images/logoButtons/top_text.gif"></div>
<div id="logoC">
<img src="images/logoButtons/info_C.gif" >
<img src="images/logoButtons/YPP_C.gif" >
<img src="images/logoButtons/social_C.gif" >
<img src="images/logoButtons/med_C.gif" >
<img src="images/logoButtons/legal_C.gif" >
<img src="images/logoButtons/J2K_C.gif" >
<img src="images/logoButtons/street_C.gif" >
</div>
<div id="bottomText"><img src="images/logoButtons/bottom_text.gif"></div>
<div id="links_BW">
<img src="images/logoButtons/info_BW.jpg" onclick="ajaxpage('YPP.htm', 'contentarea'); loadobjs('css/pages.css')">
<img src="images/logoButtons/YPP_BW.jpg" >
<img src="images/logoButtons/social_BW.jpg" >
<img src="images/logoButtons/med_BW.jpg" >
<img src="images/logoButtons/legal_BW.jpg" >
<img src="images/logoButtons/J2K_BW.jpg" >
<img src="images/logoButtons/street_BW.jpg" >
</div>
<div class="clear"></div>
<div id="contentarea"></div>
<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:hidden;top:420px;left:0px;" >
<input size=10 name=Show0 >
<input size=10 name=Show1 >
<input size=10 name=Show2 >
<input size=10 name=Show3 >
<input size=10 name=Show4 >
<input size=10 name=Show5 >
<input size=10 name=Show6 >
<input size=10 name=Show7 >
<input size=10 name=Show8 >
<input size=10 name=Show9 ><br>
<textarea name=TA rows=10 cols=100 ></textarea>
</form>
</div>
</body>
</html>
Thanks :D