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?
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.
Thank you David and Nancy although for once I wish I hadn't been right!! I am not a developer and so my experience is limited but have focused very hard on the Fluid Grid layout to create attractive solutions in this new environment. This means that in order to accomplish the results I want to achieve I have to rely on the creative talents of others to provide solutions. I had wondered (in my amateur way) if by placing an image in the background of a table and then putting a transparent image into a cell that you could then create a hyperlink from that image to the required page. Surely because it is not a hotspot and a table expands and contracts, as would the transparent image contained within the cell, it would create the same end result as a hotspot although perhaps not an ideal solution! Do you think this would work?
Hi Nancy... no problem here's a link to the image. http://www.ugolfmedia.com/test_pages/adobe_test.html I wanted to place hotspots on each of the nine coloured circles which when tapped would link to an image. No problem on a standard web page but as discussed will not work in a fluid grid layout. I hope you'll be able to offer a solution. Thanks
Brilliant Nancy thank you... you're a saviour it works perfectly now and whilst I am sure it will not work in every situation it has on this and that's all that matters... for the moment! Once again thank you so much. I know I am not supposed to ask another question but it is directly related to the golf map. The hot spots trigger a swap and restore image action. Is it possibe to link that to a tag that is placed at the top of the main image. I ask because in the desktop/laptop view and indeed on the Tablet view the images sit to the right of the map and look great. However on the IPhone they all sit below the map and so when you tap a hotspot it remains where it is. This is not really a big problem as my instructions will tell the golfer to scroll down but it would be so much more effective if when you tapped it changed the image and moved down the screen automatically.
@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.
Once again Nancy my sincerest thanks. I am obviously grateful that curiosity drove you to test your theory as I've checked your demo on all three platforms and they deliver exactly what I was looking for. This grateful Englishman will now build my project based around your suggestions... thanks Nancy.
Hi Nancy... I have spent some time today working on the solution you gave me but would ask if you could take a quick look at the source code as I am sure I have made a mistake and as I have said before I am not a developer and learning slowly so I am sure it is very straight forward. Just cannot see where I'm going wrong. Everything works fine except the most important bit which is that the fancybox does not appear... it opens the image in a new window which is obviously not what I want. Also is it possible to action a YouTube video in the fancybox? This is the link to my demo... http://www.ugolfmedia.co.uk/golf_club_demo_v1/course_map.html
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.
Hi Nancy... thanks for your reply. This is very strange because I've checked myself on Firefox, Chrome and IE and you're right they all say the file is missing... the problem is that it is NOT! I've checked on my FTP client, deleted and uploaded it again and also gone into the host server and checked and it is sitting there along with the other js's! I've checked the spelling and it all seems fine so really not sure what's causing this issue! Thanks for the advice on the video I will go and take a look.
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.
Thanks and yes it looks good on all platforms which is the main task. I've been trying to link a YouTube video on the same basis and have used your template but with a different image. I can get the action to work but its buffering all the time and doesn't seem to want to open and run the video. Could you take a quick look and see what I'm doing wrong? You need to click on Hole 1 http://www.ugolfmedia.co.uk/demo_webapp/course_map.html
You need to add an iframe with an ID to your page and point to it in your href.
<area shape="circle" coords="97,216,20" href="#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.
Hi Nancy... it's me again! I am pretty sure I have followed your instructions precisely but what we have now is that the video shows itself on the screen when the page loads. Interestingly when I tapped to run the video on my IPhone it opened up in the YouTube platform but on the IPad it played in the Safari window which I was surpised at! The laptop was the same and played in the IE window. Any ideas why the fancybox doesn't work now? I moved the other hot spots along the top of the page and noticed that when tapping they didn't bring up the fancybox either not even with the "cannot find image" error meessage. Brian
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.
Thanks again Nancy... removed the video from loaded page but in IE FF Chrome and Safari the fancybox doesn't open now so not sure why because I copied everything over http://www.ugolfmedia.co.uk/demo_web_app/course_map.html Brian
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.
Well I'm not sure how it happened but the fancybox folder was completely missing off the server so no wonder it wasn't working!!Not sure how I didn't spot it even with my limited knowledge but thanks a million Nancy because without your help there is no doubt I would have just thrown in the towel... I am sure I will leave you in peace now... until the next time! Brian
Hi Nancy... it's that man again! No major problem really. I've set up 3 hotspots in total and marked them in red. My problem is that after playing the video (on any one) and then closing the fancybox it will not play again. The fancybox opens but just shows a white screen. It will only play again if you refresh the screen which is obviously not good. Is this a coding issue or something to do with YouTube? It doesn't do this with images! Also is it possible to determine where on the screen the fancybox opens? This is the link http://www.ugolfmedia.co.uk/demo_web_app/map_videos.html
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.
No difference I'm afraid plus it placed the YouTube screen on the page like it was a few stages back in this thread. As I said it is not a huge issue at the moment as I am just doing these as a demo. I may have to resolve it at some point though so if you do come across a solution perhaps you could let me know? Thanks for the advice on positioning of the fancybox. Brian
Hi Nancy. I have started work again on this project and have hit a minor problem. You had (above) showed me how to solve the fancybox issue I had and this was successful for still images and YouTube videos. I want to use still images but images that are on a different domain. If you tap on this link you will see (when clicking the lettered circles) that I have manged to achieve this http://tinyurl.com/8rgylee however the problem is that I can't see how I can get the fancybox to reduce in size for display on a Smartphone. It's good on the IPad and Laptop but it is intended for the Smartphone and as you will see the fancybox has not reduced accordingly like it did with the demo we worked on before. I have already tried removing the WIDTH and HEIGHT details but it didn't make any difference. Any ideas? Brian
My apologies but the link in the last message will not now work. Please use this: http://goo.gl/DBuW1
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.
Things like frameborders can be removed from your markup and replaced with a border property in your CSS code:
iframe {border:none}
Nancy O.
North America
Europe, Middle East and Africa
Asia Pacific