7 Replies Latest reply on Jun 6, 2018 12:05 PM by juan carlosb28378354

    Fireworks CS6 Hotspots in Responsive Design

    jlkappler Level 1

      I have created my banner  and footer images in Fireworks CS6. In both I have included logos for Facebook, Better Business Bureau, and so on.  In Fireworks I have applied hotspots on the logos for interactivity.  When I export to Fluid Grid layout in DW CS6 the hotspots do not scale and stay attached to the logo when moving to the different media sizes.  Has anyone mastered this or is this a no go? I appreciate your advice.

        • 1. Re: Fireworks CS6 Hotspots in Responsive Design
          groove25 Level 4

          I haven't looked into this myself, but here's a discussion on the subject with several suggestions, including a "Responsive Image Maps jQuery Plugin" by Fireworks developer Matt Stow:

           

          http://stackoverflow.com/questions/7844399/responsive-image-map

           

          In the future, you might want to look at a more standards-based method for structuring the HTML. If the links are for discrete logos, they could be separate from the banner/footer images, without the need for an image map.

          • 2. Re: Fireworks CS6 Hotspots in Responsive Design
            jlkappler Level 1

            Thanks.  I will check this out.  To keep my code clean I will probably pull the logos off the images and turn them into divs with anchor tags.  Just wanted to make sure I wasn's missing a method in FWs.

            • 3. Re: Fireworks CS6 Hotspots in Responsive Design
              jlkappler Level 1

              I did use stowball's plug-in and it did indeed fix it.  But now my lightbox has stopped working.  Ugh! 

               

              Could there be a conflict of jqueries?

              If anyone out has a moment to check my code I would appreciate it.  I have audit my code for hours along with rebuilding the whole lightbox with no resolve. I truly feel its a script conflict but can't see it.

               

              Happy Easter to all.

              Funny I have created my own Easter code hunt.

              • 5. Re: Fireworks CS6 Hotspots in Responsive Design
                groove25 Level 4

                What about moving the jquery script link before the lightbox javascript and css links in the head of your document (or otherwise reordering the various jquery/plug-in/lightbox elements)? Just a thought.

                • 6. Re: Fireworks CS6 Hotspots in Responsive Design
                  cssninja

                  Hey I've encountered the 'conflicting jQuery' problem before and found a few solutions:

                   

                  1) First would be to toggle the order they appear in the html in the head at or at the bottom .. surprisingly simple and sometimes works.

                   

                  2) Second solution is a little more involved (basically replacing '$' with 'jQuery')' but still easy, documented here:

                  http://cssninja.tumblr.com/post/630885003/making-multiple-jquery-scripts-be-the-good-frien ds-they

                   

                  3) And I wrote another post entitled 'Making Slimbox Work With Image Maps' .. not exactly what you're looking for but could be useful, documented here:

                  http://cssninja.tumblr.com/post/31428543818/making-slimbox-work-with-image-maps

                   

                  Peace!

                  Marcus

                  lyraedesign.com

                  twitter.com/cssninja

                  • 7. Re: Fireworks CS6 Hotspots in Responsive Design
                    juan carlosb28378354

                    i export a map how can i make the html responsive

                     

                    <!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>Page 1.png</title>

                    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                    <style type="text/css">td img {display: block;}</style>

                    <!--Fireworks CS6 Dreamweaver CS6 target.  Created Fri Jun 01 22:15:16 GMT-0500 2018-->

                    <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[i][n];

                      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].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[i]))!=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[i])&&x.oSrc;i++) x.src=x.oSrc;

                    }

                     

                    function MM_nbGroup(event, grpName) { //v6.0

                    var i,img,nbArr,args=MM_nbGroup.arguments;

                      if (event == "init" && args.length > 2) {

                        if ((img = MM_findObj(args[2])) != null && !img.MM_init) {

                          img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;

                          if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();

                          nbArr[nbArr.length] = img;

                          for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {

                            if (!img.MM_up) img.MM_up = img.src;

                            img.src = img.MM_dn = args[i+1];

                            nbArr[nbArr.length] = img;

                        } }

                      } else if (event == "over") {

                        document.MM_nbOver = nbArr = new Array();

                        for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {

                          if (!img.MM_up) img.MM_up = img.src;

                          img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])?args[i+1] : img.MM_up);

                          nbArr[nbArr.length] = img;

                        }

                      } else if (event == "out" ) {

                        for (i=0; i < document.MM_nbOver.length; i++) { img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }

                      } else if (event == "down") {

                        nbArr = document[grpName];

                        if (nbArr) for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }

                        document[grpName] = nbArr = new Array();

                        for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {

                          if (!img.MM_up) img.MM_up = img.src;

                          img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;

                          nbArr[nbArr.length] = img;

                      } }

                    }

                     

                    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[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

                    }

                     

                    //-->

                    </script>

                    </head>

                    <body bgcolor="#ffffff" onload="MM_preloadImages('images/Page%201_r2_c4_s6.png','images/Page%201_r2_c4.png','imag es/Page%201_r3_c2_s2.png','images/Page%201_r3_c2_s3.png','images/Page%201_r6_c6_s2.png');" >

                    <table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="2000">

                    <!-- fwtable fwsrc="mx1_interective.fw.png" fwpage="Page 1" fwbase="Page 1.png" fwstyle="Dreamweaver" fwdocid = "1704463410" fwnested="0" -->

                      <tr>

                       <td><img src="images/spacer.gif" width="163" height="1" alt="" /></td>

                       <td><img src="images/spacer.gif" width="42" height="1" alt="" /></td>

                       <td><img src="images/spacer.gif" width="159" height="1" alt="" /></td>

                       <td><img src="images/spacer.gif" width="435" height="1" alt="" /></td>

                       <td><img src="images/spacer.gif" width="171" height="1" alt="" /></td>

                       <td><img src="images/spacer.gif" width="60" height="1" alt="" /></td>

                       <td><img src="images/spacer.gif" width="970" height="1" alt="" /></td>

                       <td><img src="images/spacer.gif" width="1" height="1" alt="" /></td>

                      </tr>

                     

                      <tr>

                       <td colspan="7"><img name="Page1_r1_c1" src="images/Page%201_r1_c1.png" width="2000" height="148" id="Page1_r1_c1" alt="" /></td>

                       <td><img src="images/spacer.gif" width="1" height="148" alt="" /></td>

                      </tr>

                      <tr>

                       <td colspan="3"><img name="Page1_r2_c1" src="images/Page%201_r2_c1.png" width="364" height="13" id="Page1_r2_c1" alt="" /></td>

                       <td rowspan="3"><img name="Page1_r2_c4" src="images/Page%201_r2_c4.png" width="435" height="312" id="Page1_r2_c4" usemap="#m_Page201_r2_c4" alt="" /></td>

                       <td rowspan="4" colspan="3"><img name="Page1_r2_c5" src="images/Page%201_r2_c5.png" width="1201" height="502" id="Page1_r2_c5" alt="" /></td>

                       <td><img src="images/spacer.gif" width="1" height="13" alt="" /></td>

                      </tr>

                      <tr>

                       <td rowspan="5"><img name="Page1_r3_c1" src="images/Page%201_r3_c1.png" width="163" height="1199" id="Page1_r3_c1" alt="" /></td>

                       <td><a href="face onmouseout="MM_nbGroup('out');" onmouseover="MM_nbGroup('over','Page1_r3_c2','images/Page%201_r3_c2_s2.png','images/Page% 201_r3_c2_s3.png',1);" onclick="MM_nbGroup('down','navbar1','Page1_r3_c2','images/Page%201_r3_c2_s3.png',1);"><i mg name="Page1_r3_c2" src="images/Page%201_r3_c2.png" width="42" height="50" id="Page1_r3_c2" alt="" /></a></td>

                       <td rowspan="5"><img name="Page1_r3_c3" src="images/Page%201_r3_c3.png" width="159" height="1199" id="Page1_r3_c3" alt="" /></td>

                       <td><img src="images/spacer.gif" width="1" height="50" alt="" /></td>

                      </tr>

                      <tr>

                       <td rowspan="4"><img name="Page1_r4_c2" src="images/Page%201_r4_c2.png" width="42" height="1149" id="Page1_r4_c2" alt="" /></td>

                       <td><img src="images/spacer.gif" width="1" height="249" alt="" /></td>

                      </tr>

                      <tr>

                       <td rowspan="3"><img name="Page1_r5_c4" src="images/Page%201_r5_c4.png" width="435" height="900" id="Page1_r5_c4" alt="" /></td>

                       <td><img src="images/spacer.gif" width="1" height="190" alt="" /></td>

                      </tr>

                      <tr>

                       <td rowspan="2"><img name="Page1_r6_c5" src="images/Page%201_r6_c5.png" width="171" height="710" id="Page1_r6_c5" alt="" /></td>

                       <td><a href="javascript:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('Page1_r6_c6','','images/Page%201_r6_c6_s2.png',1);"><img name="Page1_r6_c6" src="images/Page%201_r6_c6.png" width="60" height="60" id="Page1_r6_c6" alt="" /></a></td>

                       <td rowspan="2"><img name="Page1_r6_c7" src="images/Page%201_r6_c7.png" width="970" height="710" id="Page1_r6_c7" alt="" /></td>

                       <td><img src="images/spacer.gif" width="1" height="60" alt="" /></td>

                      </tr>

                      <tr>

                       <td><img name="Page1_r7_c6" src="images/Page%201_r7_c6.png" width="60" height="650" id="Page1_r7_c6" alt="" /></td>

                       <td><img src="images/spacer.gif" width="1" height="650" alt="" /></td>

                      </tr>

                    </table>

                    <map name="m_Page201_r2_c4" id="m_Page201_r2_c4">

                    <area shape="poly" coords="162,280,406,277,379,93,54,27" href="javascript:;" target="_blank" alt="" />

                    <area shape="poly" coords="0,0,145,300,435,312,401,61,209,32,0,0" href="javascript:;" alt="" onmouseout="MM_swapImage('Page1_r2_c4','','images/Page%201_r2_c4.png',1);"  onmouseover="MM_swapImage('Page1_r2_c4','','images/Page%201_r2_c4_s6.png',1);"  />

                    </map>

                    </body>

                    </html>