Hello! I created in Adobe Fireworks CS5 a background image (.jpg file) and I dragged a button symbol onto that image. The button has a roll over effect and is clickable with a link (ie. has an active area). The problem is...it works fine when I open exported .html document in a browser on my local PC. But when I try to incorporate it into a Joomla article, the image is shown NOT as a whole, but separated slice by slice as you can see here: http://asylum-seeker.org/2010-06-14-00-09-09 What I do is I upload all the small sliced images into image/stories Joomla folder, alter an HTML code slightly to address that location change and copy-paste the code into an existing article (in no editor mode, of course). What could be a solution to the problem? Thanks in advance!
It worked!!! I just had to use Custom HTML module of Joomla! I wonder why in an article its different...any ideas? Here's the code, BTW... ######################################################################################################################### <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- saved from url=(0014)about:internet --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>1.png</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css">td img {display: block;}</style> <!--Fireworks CS3 Generic target. Created Sun Sep 26 01:35:46 GMT+0200 2010--> <script language="JavaScript1.2" type="text/javascript"> <!-- function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}} } //--> </script> </head> <body bgcolor="#ffffff" onload="MM_preloadImages('images/stories/1_r2_c2_s2.png');"> <table border="0" cellpadding="0" cellspacing="0" width="204"> <!-- fwtable fwsrc="1.png" fwpage="Page 1" fwbase="1.png" fwstyle="Generic" fwdocid = "1456805793" fwnested="0" --> <tr> <td><img src="images/stories/spacer.gif" width="6" height="1" border="0" alt="" /></td> <td><img src="images/stories/spacer.gif" width="192" height="1" border="0" alt="" /></td> <td><img src="images/stories/spacer.gif" width="6" height="1" border="0" alt="" /></td> <td><img src="images/stories/spacer.gif" width="1" height="1" border="0" alt="" /></td> </tr> <tr> <td colspan="3"><img name="n1_r1_c1_s1" src="images/stories/1_r1_c1_s1.png" width="204" height="137" border="0" id="n1_r1_c1_s1" alt="" /></td> <td><img src="images/stories/spacer.gif" width="1" height="137" border="0" alt="" /></td> </tr> <tr> <td rowspan="2"><img name="n1_r2_c1_s1" src="images/stories/1_r2_c1_s1.png" width="6" height="207" border="0" id="n1_r2_c1_s1" alt="" /></td> <td><a href="http://www.google.com" target="_blank" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('n1_r2_c2_s1','','images/stories/1_r2_c2_s2.png',1);"><img name="n1_r2_c2_s1" src="images/stories/1_r2_c2_s1.png" width="192" height="58" border="0" id="n1_r2_c2_s1" alt="" /></a></td> <td rowspan="2"><img name="n1_r2_c3_s1" src="images/stories/1_r2_c3_s1.png" width="6" height="207" border="0" id="n1_r2_c3_s1" alt="" /></td> <td><img src="images/stories/spacer.gif" width="1" height="58" border="0" alt="" /></td> </tr> <tr> <td><img name="n1_r3_c2_s1" src="images/stories/1_r3_c2_s1.png" width="192" height="149" border="0" id="n1_r3_c2_s1" alt="" /></td> <td><img src="images/stories/spacer.gif" width="1" height="149" border="0" alt="" /></td> </tr> </table> </body> </html> ################################################################################################################### spacer.gif file wasn't needed...I deleted it from the server and didn't see any difference, wonder what it is for...?