Skip navigation
Fozz 52
Currently Being Moderated

Dreamweaver CS6 Fluid Grid Layout

Aug 30, 2012 3:35 PM

Tags: #images #dw

I fear there may not be a solution to this issue! I have placed several hotspots on an image in a Fluid Grid Layout div in DW CS6 and the problem is quite straightforward. Whilst the "image" reduces perfectly when viewed in Tablet and Smartphone screens the "hotspots" remain in the same position they were at in the Desktop view! The result is the same irrespective of which view you set the hotspots in. Is there a solution to this problem or is it insurmountable?

 
Replies
  • Currently Being Moderated
    Aug 30, 2012 3:46 PM   in reply to Fozz 52

    I fear you are probably right. Hotspots are created using the <map> element, which uses pixel-based coordinates. With a fluid layout, everything expands and contracts to match the available viewport, but the pixel coordinates don't move.

     

    It might be possible to use JavaScript to scale the coordinates when the viewport is resized, but I've not come across such a script.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 30, 2012 3:50 PM   in reply to Fozz 52

    Is there a solution to this problem?

     

    No.  Hotspots don't resize.

     

    For site navigation it's better to use CSS styled text links or individual images linked to site pages.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 31, 2012 9:32 AM   in reply to Fozz 52

    I suppose it could work.  But it's hard to make suggestions without seeing what you're working with.   Can you post a link to your page?  Or show us your image?

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 31, 2012 12:19 PM   in reply to Fozz 52

    Best advice, don't try to make your Golf map resize to layout.  It just won't work well here. 

     

    Make the map smaller in your graphics editor so it fits inside your  mobile layout (height & width in pixels). Then apply hotspots as originally planned.

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 1, 2012 9:59 AM   in reply to Fozz 52

    Although I've never tried this with an image map, a lightbox or modal window might work by superimposing the hotspot images over the page,

    http://fancybox.net/

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 1, 2012 1:50 PM   in reply to Nancy O.

    @Fozz,

    I was a little curious if this would work, so I did a quick & dirty test with some stock images and your golf image  inside a Fluid Grid. 

    http://alt-web.com/TEST/FluidGrid-1.html

     

    I used jQuery Fancybox and jQuery Maphighlight (view source to see the code).

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 3, 2012 11:26 AM   in reply to Fozz 52

    The Maphighlight script is 404 (not found) which may be killing other scripts on your page. 

     

    src="ScriptLibrary/jquery.maphighlight.js

     

    Can you upload that script to your remote server?

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 3, 2012 11:29 AM   in reply to Fozz 52

    You can insert a YouTube iframe into fancybox.  They have an example on their home page.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 3, 2012 12:34 PM   in reply to Fozz 52

    Something else to check, Linux is case sensitive.  ScriptLibrary isn't the same as SCRIPTLIBRARY or scriptlibrary.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 3, 2012 1:43 PM   in reply to Fozz 52

    OK try this.  Rename(F2) jquery.maphighlight.js to just maphighlight.js and move it to your fancybox folder.

     

    Change the link path in your code to:

    fancybox/maphighlight.js

     

    Upload. 

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 3, 2012 3:31 PM   in reply to Fozz 52

    OK.  Let's just paste the script into your HTML page and see if that works.

     

    Open your page in code view.

     

    Replace this:

     

    <!--maphighlight-->

    <script src="fancybox/maphighlight.js"></script>

    <!--fancybox-->

     

    With all of this:

     

    <!--maphighlight-->
    <script>
    // map highlight JavaScript Document
     (function(F){var B,C,I,L,K,H,E,G,A,J;B=document.namespaces;has_canvas=!!document.createElement("canvas").getContext;if(!(has_canvas||B)){F.fn.maphilight=function(){return this};return }if(has_canvas){E=function(M){return Math.max(0,Math.min(parseInt(M,16),255))};G=function(M,N){return"rgba("+E(M.substr(0,2))+","+E(M.substr(2,2))+","+E(M.substr(4,2))+","+N+")"};C=function(M){var N=F('<canvas style="width:'+M.width+"px;height:"+M.height+'px;"></canvas>').get(0);N.getContext("2d").clearRect(0,0,N.width,N.height);return N};I=function(P,M,S,O,N){var R,Q=P.getContext("2d");Q.beginPath();if(M=="rect"){Q.rect(S[0],S[1],S[2]-S[0],S[3]-S[1])}else{if(M=="poly"){Q.moveTo(S[0],S[1]);for(R=2;R<S.length;R+=2){Q.lineTo(S[R],S[R+1])}}else{if(M=="circ"){Q.arc(S[0],S[1],S[2],0,Math.PI*2,false)}}}Q.closePath();if(O.fill){Q.fillStyle=G(O.fillColor,O.fillOpacity);Q.fill()}if(O.stroke){Q.strokeStyle=G(O.strokeColor,O.strokeOpacity);Q.lineWidth=O.strokeWidth;Q.stroke()}if(O.fade){F(P).css("opacity",0).animate({opacity:1},100)}};L=function(M){M.getContext("2d").clearRect(0,0,M.width,M.height)}}else{C=function(M){return F('<var style="zoom:1;overflow:hidden;display:block;width:'+M.width+"px;height:"+M.height+'px;"></var>').get(0)};I=function(N,Q,R,U,M){var S,T,O,P;S='<v:fill color="#'+U.fillColor+'" opacity="'+(U.fill?U.fillOpacity:0)+'" />';T=(U.stroke?'strokeweight="'+U.strokeWidth+'" stroked="t" strokecolor="#'+U.strokeColor+'"':'stroked="f"');O='<v:stroke opacity="'+U.strokeOpacity+'"/>';if(Q=="rect"){P=F('<v:rect name="'+M+'" filled="t" '+T+' style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:'+R[0]+"px;top:"+R[1]+"px;width:"+(R[2]-R[0])+"px;height:"+(R[3]-R[1])+'px;"></v:rect>')}else{if(Q=="poly"){P=F('<v:shape name="'+M+'" filled="t" '+T+' coordorigin="0,0" coordsize="'+N.width+","+N.height+'" path="m '+R[0]+","+R[1]+" l "+R.join(",")+' x e" style="zoom:1;margin:0;padding:0;display:block;position:absolute;top:0px;left:0px;width:'+N.width+"px;height:"+N.height+'px;"></v:shape>')}else{if(Q=="circ"){P=F('<v:oval name="'+M+'" filled="t" '+T+' style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:'+(R[0]-R[2])+"px;top:"+(R[1]-R[2])+"px;width:"+(R[2]*2)+"px;height:"+(R[2]*2)+'px;"></v:oval>')}}}P.get(0).innerHTML=S+O;F(N).append(P)};L=function(M){F(M).find("[name=highlighted]").remove()}}K=function(N){var M,O=N.getAttribute("coords").split(",");for(M=0;M<O.length;M++){O[M]=parseFloat(O[M])}return[N.getAttribute("shape").toLowerCase().substr(0,4),O]};J=function(O,N){var M=F(O);return F.extend({},N,F.metadata?M.metadata():false,M.data("maphilight"))};A=function(M){if(!M.complete){return false}if(typeof M.naturalWidth!="undefined"&&M.naturalWidth==0){return false}return true};H={position:"absolute",left:0,top:0,padding:0,border:0};var D=false;F.fn.maphilight=function(O){O=F.extend({},F.fn.maphilight.defaults,O);if(!has_canvas&&F.browser.msie&&!D){document.namespaces.add("v","urn:schemas-microsoft-com:vml");var N=document.createStyleSheet();var M=["shape","rect","oval","circ","fill","stroke","imagedata","group","textbox"];F.each(M,function(){N.addRule("v\\:"+this,"behavior: url(#default#VML); antialias:true")});D=true}return this.each(function(){var U,R,Y,Q,T,V,X,S,W;U=F(this);if(!A(this)){return window.setTimeout(function(){U.maphilight(O)},200)}Y=F.extend({},O,F.metadata?U.metadata():false,U.data("maphilight"));W=U.get(0).getAttribute("usemap");Q=F('map[name="'+W.substr(1)+'"]');if(!(U.is("img")&&W&&Q.size()>0)){return }if(U.hasClass("maphilighted")){var P=U.parent();U.insertBefore(P);P.remove();F(Q).unbind(".maphilight").find("area[coords]").unbind(".maphilight")}R=F("<div></div>").css({display:"block",background:'url("'+this.src+'")',position:"relative",padding:0,width:this.width,height:this.height});if(Y.wrapClass){if(Y.wrapClass===true){R.addClass(F(this).attr("class"))}else{R.addClass(Y.wrapClass)}}U.before(R).css("opacity",0).css(H).remove();if(F.browser.msie){U.css("filter","Alpha(opacity=0)")}R.append(U);T=C(this);F(T).css(H);T.height=this.height;T.width=this.width;X=function(c){var a,b;b=J(this,Y);if(!b.neverOn&&!b.alwaysOn){a=K(this);I(T,a[0],a[1],b,"highlighted");if(b.groupBy){var Z;if(/^[a-zA-Z][-a-zA-Z]+$/.test(b.groupBy)){Z=Q.find("area["+b.groupBy+'="'+F(this).attr(b.groupBy)+'"]')}else{Z=Q.find(b.groupBy)}var d=this;Z.each(function(){if(this!=d){var f=J(this,Y);if(!f.neverOn&&!f.alwaysOn){var e=K(this);I(T,e[0],e[1],f,"highlighted")}}})}if(!has_canvas){F(T).append("<v:rect></v:rect>")}}};F(Q).bind("alwaysOn.maphilight",function(){if(V){L(V)}if(!has_canvas){F(T).empty()}F(Q).find("area[coords]").each(function(){var Z,a;a=J(this,Y);if(a.alwaysOn){if(!V&&has_canvas){V=C(U.get());F(V).css(H);V.width=U.width();V.height=U.height();U.before(V)}a.fade=a.alwaysOnFade;Z=K(this);if(has_canvas){I(V,Z[0],Z[1],a,"")}else{I(T,Z[0],Z[1],a,"")}}})});F(Q).trigger("alwaysOn.maphilight").find("area[coords]").bind("mouseover.maphilight",X).bind("mouseout.maphilight",function(Z){L(T)});U.before(T);U.addClass("maphilighted")})};F.fn.maphilight.defaults={fill:true,fillColor:"00CC00",fillOpacity:0.3,stroke:true,strokeColor:"99FF33",strokeOpacity:0.5,strokeWidth:2,fade:true,alwaysOn:false,neverOn:false,groupBy:false,wrapClass:true}})(jQuery);
    </script>
    <!--fancybox-->

     

    Save.  Upload to server.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 4, 2012 11:16 AM   in reply to Fozz 52

    Maybe the maphighlight.js file was incomplete or corrupted.  It sometimes happens.

    Glad you got it to work.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 4, 2012 1:22 PM   in reply to Fozz 52

    You need to add an iframe with an ID to your page and point to it in your href.

     

    <map name="Map" id="Map">

    <area shape="circle" coords="97,216,20href="#iframe1" alt="#" class="fancybox">

    ........

    </map>

     

    </div>

    </div>

     

    <!--YouTube iframe goes here-->

    <iframe id="iframe1" width="420" height="315" src="http://www.youtube.com/embed/84zBamhKq6Y" frameborder="0" allowfullscreen></iframe>

     

    <!--Maphighlight Function-->

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 5, 2012 9:48 AM   in reply to Fozz 52

    If you wrap your iframe inside a division with display:none, it won't show on page load.

     

    <div style="display:none">

    <!--YouTube iframe-->

    <iframe id="iframe1" width="420" height="315" src="http://www.youtube.com/embed/84zBamhKq6Y" frameborder="0" allowfullscreen></iframe>

    </div>

     

    If the hotspots are not opening inside Fancybox it's most likely because you have not applied class="fancybox" to the <area> tag.

     

    This is my test page which seems to work  in FF15 and IE9

    http://alt-web.com/TEST/FluidGrid-1.html

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 5, 2012 10:51 AM   in reply to Fozz 52

    These files are all 404 not found on server.  That's why fancybox isn't invoking.

     

    <!--fancybox-->

    <link href="fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css">

     

    <script src="fancybox/jquery.easing-1.3.pack.js"></script>

    <script src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>

    <script src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>

     

    When you moved things around, you broke the paths to those files.  When you resolve the path problem, you should be good to go.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 7, 2012 1:21 PM   in reply to Fozz 52

    That's an interesting twist.  I don't know why it won't play videos a second time.

     

    As a test, remove style="display:none" from the outer div and see if that makes any difference.

     

    By default, Fancybox aligns in viewport's horizontal and vertical center.  I honestly don't know how to defeat that, never tried.

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 1, 2012 3:18 PM   in reply to Fozz 52

    I'm up to my neck in code right now.  But try changing

     

    allowfullscreen

     

    to

     

    allowfullscreen="true"

     

    Incidentally, if you have your heart set on using HTML5, you need to pay closer attention to validating your code.  

    http://validator.w3.org/

     

    Things like frameborders can be removed from your markup and replaced with a border property in your CSS code:

     

    iframe {border:none}

     

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points