links not working in JS

images not linking in JS

[bitstomper]

I have the following code that places images on absolute locations when hovering over an other image (dot). works fine except the images are not linked as they should be. Hovering changes the cursor to hand indicating there is a link, but clicking goes nowhere.

var Path='http://www.example.com/images/'
var ImgAry=[];
ImgAry[0]=['photos/architecture/arch_01.jpg','','<br><br>seoul airport<br>terry farrell & partners',229,250];
ImgAry[1]=['photos/architecture/arch_02.jpg','','<br><br>hong kong residence<br>adrian mccarroll architects',603,78];
ImgAry[2]=['photos/architecture/arch_03.jpg','http://www.example.com','<br><br>silodam &nbsp;&nbsp; amsterdam<br>mvrdv',638,78];
ImgAry[3]=['photos/architecture/arch_04.jpg','http://www.example.com','<br><br>kings villa &nbsp;&nbsp; beijing',472,202];
ImgAry[4]=['photos/architecture/arch_05.jpg','http://www.example.com','<br><br>library hotel &nbsp;&nbsp; koh samui',517,145];
ImgAry[5]=['photos/architecture/arch_06.jpg','http://www.example.com','<br><br>shanghai airport <br>paul andreu architect',417,225];
ImgAry[6]=['photos/architecture/arch_07.jpg','http://www.example.com','<br><br>twin towers reception<br>mpi architects',472,202];
ImgAry[7]=['photos/architecture/arch_08.jpg','http://www.example.com','<br><br>china national offshore oil company<br>kohn pederson fox architects',543,57];
ImgAry[8]=['photos/architecture/arch_09.jpg','http://www.example.com','<br><br>quanta touyuan<br>artech architects',392,249];
ImgAry[9]=['photos/architecture/arch_10.jpg','http://www.example.com/beijing_olympic.php','<br><br>beijing olympic boom &nbsp;&nbsp;&nbsp; to view photos <a href="beijing_olympic.php" style="text-decoration:none; color:#cc0000"><b>click here</b></a>',110,242];
ImgAry[10]=['photos/architecture/arch_11.jpg','http://www.example.com','<br><br>walvis &nbsp;&nbsp; amsterdam<br>frits van dongen architecten cie',517,145];
ImgAry[11]=['photos/architecture/arch_12.jpg','http://www.example.com','<br><br>office and apartment buildings in the far east',110,337];
ImgAry[12]=['photos/architecture/arch_13.jpg','http://www.example.com','<br><br>bibliotheek &nbsp;&nbsp; amsterdam<br>jo coenen architecten',596,78];
ImgAry[13]=['photos/architecture/arch_14.jpg','http://www.example.com','<br><br>banciao model house &nbsp;&nbsp; taipei<br>kuo architects',229,243];
ImgAry[14]=['photos/architecture/arch_15.jpg','http://www.example.com','<br><br>commercial building<br>neihu ksarch',472,202];
ImgAry[15]=['photos/architecture/arch_16.jpg','http://www.example.com','<br><br>exhibition center &nbsp;&nbsp; melbourne<br>denton corker marshall',594,73];
ImgAry[16]=['photos/architecture/arch_17.jpg','http://www.example.com','<br><br>childrens palace &nbsp;&nbsp; guangzho &nbsp;&nbsp;china<br>steffan bradley architects',599,78];
ImgAry[17]=['photos/architecture/arch_18.jpg','http://www.example.com','<br><br>shiatze chen factory &nbsp;&nbsp; shanghai<br>layan design group',472,202];
ImgAry[18]=['photos/architecture/arch_19.jpg','http://www.example.com','<br><br>childrens palace &nbsp;&nbsp; guangzho &nbsp;&nbsp;china<br>steffan bradley architects',472,202];
ImgAry[19]=['photos/architecture/arch_20.jpg','http://www.example.com','<br><br>pukhet residence &nbsp;&nbsp;<br>adrian mccarroll architects',472,202];
for (var zxc0=0;zxc0<ImgAry.length;zxc0++){
ImgAry[zxc0][10]=new Image();
ImgAry[zxc0][10].src=Path+ImgAry[zxc0][0];
}

// Functional Code

var zxcTO;
var ImgCnt=0;
var zxcEvt=0;

function zxcStyle(zxcele,zxcstyle,zxcp){
if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
if (zxcp){ zxcp.appendChild(zxcele); }
return zxcele;
}

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++;
}

// parameters 0 = column pitch, 1 = row pitch, 2 = dot height, 3 = slide show button height
function PlaceDots(zxccol,zxcrow,zxcdotheight,zxcssheight){
zxcnu=ImgAry.length;
var zxcp=document.getElementById('dots');
zxcp.removeChild(zxcp.getElementsByTagName('DIV')[0]);
var zxclft=0;zxctop=0;
for (var zxc0=0;zxc0<zxcnu;zxc0++){
var zxcimg=zxcStyle('IMG',{position:'absolute',left:(Math.floor(zxc0%(zxcnu/2))*zxccol)+'px',top:(Math.floor(zxc0/(zxcnu/2))*zxcrow)+'px',cursor:(document.all)?'hand':'pointer'},zxcp);
zxcimg.src=Path+'dots/dots'+(Math.floor(zxc0%(zxcnu/2))+1)+'.gif';
zxcAddEvt(zxcimg,'zxcDotMse','mouseover');
zxcAddEvt(zxcimg,'zxcDotMse','mouseout');
}
zxcdimg=zxcStyle('IMG',{width:'43px',height:zxcssheight+'px',position:'absolute',left:(Math.ceil(zxcnu/2)*zxccol)+'px',top:((zxcrow+zxcdotheight-zxcssheight)/2)+'px'},zxcp);
zxcdimg.src=Path+'dots/slidedot.gif';
zxcAddEvt(zxcdimg,'zxcStartSShow','mouseover');
zxcAddEvt(zxcdimg,'zxcStartSShow','mouseout');
zxcStyle(document.getElementById('Main'),{cursor:(document.all)?'hand':'pointer'});
}

function zxcDotMse(zxcevt){
clearTimeout(zxcTO);
var zxcdots=this.parentNode.getElementsByTagName('IMG');
for (var zxc0=0;zxc0<zxcdots.length;zxc0++){
if (zxcdots[zxc0]==this){
ImgCnt=zxc0;
break;
}
}
PlaceImage();

}

function zxcStartSShow(zxcevt){
zxcevt.cancelBubble=true;
if (zxcevt.stopPropagation) zxcevt.stopPropagation();
clearTimeout(zxcTO);
if (zxcevt.type=='mouseover'){ this.src=Path+'dots/slidedotred.gif'; SlideShow(); }
else { this.src=Path+'dots/slidedot.gif'; }
}

function SlideShow(){
PlaceImage();
ImgCnt=++ImgCnt%ImgAry.length;
zxcTO=setTimeout('SlideShow()',3000);
}

function PlaceImage(){
var zxcimg=document.getElementById('Main')
zxcStyle(zxcimg,{left:ImgAry[ImgCnt][3]+'px',top:ImgAry[ImgCnt][4]+'px'});
zxcimg.src=Path+ImgAry[ImgCnt][0];
document.getElementById('text').innerHTML=ImgAry[ImgCnt][2];
ResetDots();
}

function ResetDots(){
var zxcimgs=document.getElementById('dots').getElementsByTagName('IMG');
var zxcmid=Math.ceil((zxcimgs.length-1)/2);
for (var zxc0=0;zxc0<zxcimgs.length-1;zxc0++){
zxcimgs[zxc0].src=Path+'dots/dots'+((zxc0<zxcmid)?zxc0+1:zxc0-zxcmid+1)+'.gif';
}
zxcimgs[ImgCnt].src=Path+'dots/dotred.gif';
}

/*]]>*/
</script>

<body >

<div id="loading" style="position:absolute; left:895px;top:556px;">
<img src="../images/loading.gif" border=0 /></div>

<a href="http://www.website.com"><img src="http://www.website.com/images/name_heading.gif" width="220" height="17" style="position:absolute;left:110px;top:74px;" border="0" /></a>
<div id="text" style="position:absolute;left:110px;top:105px;width:320px;height:50px;text-Align:left;font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #999999;text-decoration: none; line-height: 10pt;" ><br><br>seoul airport<br>terry farrell & partners</div>

<div id="dots" style="position:absolute;left:110px;top:176px;" >
<div style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; color: #999999;"></div>
</div >

<img id="Main" src="http://www.example.com/images/photos/architecture/arch_01.jpg" style="position:absolute;left:229px;top:250px;" />
<img id="Main" src="http://www.example.com/images/horline.gif" width="857" style="position:absolute;left:110px;top:590px;" />
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

// parameters 0 = column pitch, 1 = row pitch, 2 = dot height, 3 = slide show button height
PlaceDots(22,20,17,44);

/*]]>*/
</script>

[edited by: tedster at 7:39 pm (utc) on Mar. 3, 2008]
[edit reason] use example.com - it can never be owned [/edit]

[vol7ron]

it's easier to debug larger pieces of code with firebug. do you have an online example of this? maybe a link?

also, just so you know.... it's not always best to minimize your script before it's working, especially when you ask others to debug. it just takes longer to find problems like these.

[daveVk]

the cursor to hand indicating there is a link

zxcimg=zxcStyle('IMG',{position:'absolute',left:(Math.floor(zxc0%(zxcnu/2))*zxccol)+'px',top:(Math.floor(zxc0/(zxcnu/2))*zxcrow)+'px',cursor:(document.all)?'hand':'pointer'},zxcp);
cursor:(document.all)?'hand':'pointer'}

The red bit makes the hand appear, it seems to be on img, not a link.

I found only two matches to "href", neither seems to relate to the images in question.

If you have firefox or other suitable browser look at generated source to see results of all this code.

[edited by: tedster at 7:39 pm (utc) on Mar. 3, 2008]
[edit reason] turn off graphic smiles [/edit]

[bitstomper]

sorry I am not sure what you mean with look at generated code in FF.

I looked at HTML in Firebug and it seems cool.

Thanks

[edited by: tedster at 7:29 pm (utc) on Mar. 3, 2008]

[daveVk]

There are number of tools ( add ons ) to FF that show the html generated from the javascript. "Web developer" is one of them using "view generated source", there may be similar option in firebug, you need to see the html derived for the currrent DOM rather than as originaly html send from server.