SVG custom polygon image stretch not working - html
I'm trying to both stretch and rotate an image into an SVG polygon (Basically an arc).
What I need is to stretch the image to fit, not tile or clip it.
What I'd like is :
The stretched/distorted image in the arc without the image clipped.
What I have is:
Clipped arc image
Here's the fiddle I've been working on -
https://jsfiddle.net/eLrgfnxb/57/
<svg style="overflow:visible; margin-left:111px; margin-top:22px; " height="1000" width="1000">
<defs>
<pattern id="blip1" patternUnits="userSpaceOnUse" width="100%" height="100%">
<image preserveAspectRatio="none" xlink:href="http://i.imgur.com/uTDpE6J.jpg" ></image>
</pattern>
</defs>
<polygon points="453,372 67,184 70,177 73,171 77,164 81,158 85,151 88,145 92,138 97,132 101,126 105,120 110,114 114,108 115,107" x="1" y="1" style="stroke-linejoin:round; fill:url(#blip1); stroke-width:2; stroke:hsl(212,45%,26%); ">
</polygon>
</svg>
I've seen a few ones:
How to stretch an image in a SVG shape to fill its bounds? (This is where I started, but doesn't handle the arc very well)
Image to fill a polygonal SVG shape (Also doesn't handle the complicated shape)
Resize image inside polygon point path(svg) and make it not clipped
I was thinking about switching to a canvas to see if that worked. I saw a couple interesting things here:
Stretch image to fit polygon html5 canvas
Thanks for the help!
After some work, I'm able to do it by going layer by layer through the image and putting it in an isosceles triangle. Then rotating it to about the right area.
Its a bit of a hairy assumption for the arc to be an isosceles, but lets make it better later.
Updated jfiddle - http://jsfiddle.net/gobfink/w1Lake9f/210/
<!DOCTYPE html>
<html>
<body>
<p>Tiger</p>
<!--
<img id="tiger" width="220" height="277" src="http://i.imgur.com/uTDpE6J.jpg" alt="the tiger" />
-->
<img id="tiger" width="340" height="429" src="http://i.imgur.com/uTDpE6J.jpg" alt="the tiger" />
<p>TigerCanvas:</p>
<canvas id="tigerCanvas" width="500" height="500" style="border:1px solid #d3d3d3;" >
</canvas>
<p>PolygonCanvas:</p>
<canvas id="polygonCanvas" width="500" height="500" style="border:1px solid #d3d3d3;" >
</canvas>
<p>PolygonTigerCanvas</p>
<canvas id="polygonTigerCanvas" width="1000" height="500" style="border:1px solid #d3d3d3;" >
</canvas>
<p>MousePosition: </p>
<canvas id="mousePositionCanvas" width="400" height="100" style="border:1px solid #d3d3d3;" >
</canvas>
<script>
window.onload = function() {
var p_canvas=document.getElementById("polygonCanvas");
var p_ctx = p_canvas.getContext("2d");
var p_maxX,p_minX, p_maxY, p_minY;
var poly_points = [[453,372] ,[67,184], [70,177], [73,171], [77,164], [81,158], [85,151], [88,145], [92,138], [97,132], [101,126], [105,120], [110,114], [114,108], [115,107]];
p_ctx.fillStyle='#f00';
p_ctx.beginPath();
p_ctx.moveTo(poly_points[0][0],poly_points[0],[1]);
poly_points.forEach(function(point) {
if (p_minX == null || point[0] < p_minX[0] ){
p_minX = point;
}
if (p_minY == null || point[1] < p_minY[1] ){
p_minY = point;
}
if (p_maxX == null || point[0] > p_maxX[0] ){
p_maxX = point;
}
if (p_maxY == null || point[1] > p_maxY[1] ){
p_maxY = point;
}
p_ctx.lineTo(point[0],point[1]) ;
});
console.log("p_minX: ", p_minX,", p_minY: ", p_minY, ", p_maxY: ", p_maxY, ", p_maxX: ", p_maxX);
p_ctx.closePath();
p_ctx.fill();
p_ctx.font= '8px serif';
p_ctx.fillStyle='#000';
p_ctx.fillText("maxX:" + p_maxX[0] + ","+ p_maxX[1] , p_maxX[0], p_maxX[1]);
p_ctx.fillText("minX:" + p_minX[0] + ","+ p_minX[1] , p_minX[0], p_minX[1]);
p_ctx.fillText("minY:" + p_minY[0] + ","+ p_minY[1] , p_minY[0], p_minY[1]);
//p_ctx.fillText(p_maxX[0] + ","+ p_maxX[1] , p_maxX[0], p_maxX[1]);
//p_ctx.fillText(p_maxX[0] + ","+ p_maxX[1] , p_maxX[0], p_maxX[1]);
var leg_distance = Math.floor(Math.hypot(p_maxX[0] - p_minX[0],p_maxX[1] - p_minX[1]));
var base_distance = Math.floor(Math.hypot(p_minX[0]- p_minY[0], p_minX[1]-p_minY[1]));
var arc_height = Math.floor(Math.sqrt(Math.pow(leg_distance,2) - Math.pow(base_distance/2,2)));
var p1 = [0,0];
var p2 = [base_distance,0];
var p3 = [base_distance/2, arc_height];
var p13_slope = (p3[1] - p1[1]) / (p3[0] - p1[0]);
var p13_intercept = p3[1] - p13_slope * p3[0];
var p23_slope = (p3[1] - p2[1]) / (p3[0] - p2[0]);
var p23_intercept = p3[1] - p23_slope * p3[0];
var orientation_angle = Math.asin((p_maxX[0] - p_minY[0]) /leg_distance);
console.log("leg_distance:",leg_distance,", base_distance: ", base_distance, ", arc_height: ", arc_height);
console.log("p1:", p1, ", p2: ",p2,", p3: ", p3);
console.log("p13_slope:", p13_slope, ", p13_intercept: ",p13_intercept);
console.log("p23_slope:", p23_slope, ", p23_intercept: ",p23_intercept);
console.log("orientation angle: ", orientation_angle);
var c = document.getElementById("tigerCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("tiger");
//var c_height = distance;
//var c_width = img.width/img.height * distance;
img.width = img.width/img.height * leg_distance ; //normalize the width
img.height = arc_height;
//ctx.drawImage(img, 1, 1);
ctx.drawImage(img, 1, 1,img.width,img.height);//, c_width, c_height);
var p_tiger_canvas = document.getElementById("polygonTigerCanvas");
var pt_ctx = p_tiger_canvas.getContext("2d");
//Assumes MaxX== MaxY
var slopeA = (p_maxX[1] - p_minX[1])/(p_maxX[0] - p_minX[0]) ;
var slopeB = (p_maxX[1] - p_minY[1])/(p_maxX[0] - p_minY[0]) ;
var inceptA = (p_maxX[1] - slopeA * p_maxX[0]);
var inceptB = (p_maxX[1] - slopeB * p_maxX[0]);
console.log("slopeA: ",slopeA, ", slopeB: ", slopeB, ", inceptA:", inceptA, "inceptB: ",inceptB);
console.log("img.width - ", img.width, " img.height -",img.height);
pt_ctx.font= '8px serif';
pt_ctx.fillStyle='#000';
p_ctx.fillText("maxX:" + p_maxX[0] + ","+ p_maxX[1] , p_maxX[0], p_maxX[1]);
p_ctx.fillText("minX:" + p_minX[0] + ","+ p_minX[1] , p_minX[0], p_minX[1]);
p_ctx.fillText("minY:" + p_minY[0] + ","+ p_minY[1] , p_minY[0], p_minY[1]);
//pt_ctx.translate(p_maxX[0]/4,p_maxX[1]);
pt_ctx.setTransform(1,0,0,1,p_minX[0],p_minX[1])
pt_ctx.rotate(-orientation_angle);
var i;
for (i = 0; i < arc_height; i++){
var Bx = (i - inceptB) / slopeB;
var Ax = (i - inceptA) / slopeA;
var p13x = (i - p13_intercept)/ p13_slope;
var p23x = (i - p23_intercept)/ p23_slope;
var d12_23= Math.hypot( p13x-p23x ,0);
var dAB = Math.hypot(Bx-Ax,0);
//console.log("i: ", i, ", Bx - ", Bx, ", Ax - ", Ax, ", dAB - ", dAB);
pt_ctx.drawImage(c,0,i,img.width,1,p13x,i,d12_23,1);
if (i % 10 == 0){
pt_ctx.fillText(Math.round(p13x) , p13x, i);
pt_ctx.fillText(Math.round(p23x) + ","+ i , p23x, i);
}
}
var mousePositionCanvas = document.getElementById('mousePositionCanvas');
function writeMessage(canvas, message) {
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
context.font = '18pt Calibri';
context.fillStyle = 'black';
context.fillText(message, 10, 25);
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
p_tiger_canvas.addEventListener('mousemove', function(evt) {
var mousePos = getMousePos(p_tiger_canvas, evt);
var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
writeMessage(mousePositionCanvas, message);
}, false)
}
</script>
</body>
</html>
Related
html5 - canvas mouse up event not triggered
In canvas, mousedown and mousemove works fine, but mouseup event not been triggered in below sample:
<!DOCTYPE html>
<html> <head> <style type="text/css"> body {background: #eee;} </style> </head>
<body>
<div style="float:left;">
<canvas id="video-canvas" width=320 height=240 style="background:#000;"></canvas>
</div>
<pre align="left" id="log"></pre>
<script>
function Logger(id) {this.el = document.getElementById('log');}
Logger.prototype.log = function(msg) {
var fragment = document.createDocumentFragment();
fragment.appendChild(document.createTextNode(msg));
fragment.appendChild(document.createElement('br'));
this.el.appendChild(fragment);
};
Logger.prototype.clear = function() {this.el.textContent = '';};
var logger = new Logger('log');
</script>
<script type="text/javascript">
var logelem = document.getElementById("log");
var canvas = document.getElementById('video-canvas');
function getMousePos(canvasDom, mouseEvent) {
var rect = canvasDom.getBoundingClientRect();
var scaleX = canvas.width / rect.width;
var scaleY = canvas.height / rect.height;
var x = (mouseEvent.clientX - rect.left)*scaleX;
var y = (mouseEvent.clientY - rect.top)*scaleY;
return {
x: mouseEvent.clientX - rect.left,
y: mouseEvent.clientY - rect.top
};
}
canvas.addEventListener("mousedown", function (e) {
var mousePos = getMousePos(canvas, e);
logger.log("down " + mousePos.x + "," + mousePos.y);
}, false);
canvas.addEventListener("mouseup", function (e) {
logger.log("up " + mousePos.x + "," + mousePos.y);
}, false);
canvas.addEventListener("mousemove", function (e) {
//logger.log("move " + mousePos.x + "," + mousePos.y);
var mousePos = getMousePos(canvas, e);
}, false);
</script>
</body>
</html>
HTML5: Separate a 1000x1000 video on four different 250x250 videos
Is it possible with HTML5 to separate a rectangular 1000x1000 video on 4 different videos of 500x500 and configure every smaller rectangular differently?
Article: http://techslides.com/split-video-into-html5-canvas-tiles-with-drag-and-drop/
Original source: http://techslides.com/demos/split-video-into-canvas-tiles.html
It's really simple:
<div style="display:none">
<video id="source-vid" autoplay loop="true">
<source src="sample-videos/BigBuckBunny_640x360.mp4" type="video/mp4"/>
<source src="sample-videos/BigBuckBunny_640x360.ogv" type="video/ogg"/>
</video>
</div>
<div id="box"></div>
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
ROWS = 3;
COLS = 4;
tiles(640, 360, ROWS, COLS);
var video = $("#source-vid")[0];
update(video);
function update(video) {
tiles(640, 360, ROWS, COLS, video);
setTimeout(function() { update(video) }, 33);
}
function tiles(w, h, r, c, source) {
var tileW = Math.round(w / c);
var tileH = Math.round(h / r);
for(var ri = 0; ri < r; ri += 1) {
for(var ci = 0; ci < c; ci += 1) {
//if source is not specified, just build canvas object, otherwise draw inside them
if (typeof source === 'undefined') {
var tile = $('<canvas class="tile" id="tile' + ri + ci + '" height="' + tileH + '" width="' + tileW + '"></canvas>').get(0);
$("#box").append(tile);
$(".tile").draggable();
} else {
var getit = $('#tile' + ri + ci).get(0);
context = getit.getContext('2d');
context.drawImage(source, ci*tileW, ri*tileH, tileW, tileH, 0, 0, tileW, tileH);
}
}
}
}
</script>
Let me know if you need a demo without draggable script.
sending canvas content to server in PNG or JPEG format
I have this code which on executing embed flash in page and on clicking it captures flash bitmap into canvas..here upto works fine but problem is how to send that capture data into canvas to server into PNG or JPEG image format.
I used Jquery webcam plugin and jquery.js to load flash
<html>
<body>
<br><br>
<form name="f" id="f" runat="server"><table><tr><!--<td><div id="eflash">
</div></td>-->
<td>
<div id="webcam">
</div></td><td><canvas style="border:2px solid red" id="canvas" width="320" height="240">
</canvas>
</td></tr></table>
<br><p>CLICK**|**<input type="button" id="sendBtn" value="Send" /></p>
</form>
</body></html>
<script type="text/javascript" src="./jquery/jquery.js"></script>
<!--<script type="text/javascript" src="./jquery/jquery.flash.js"></script>-->
<script type="text/javascript" src="./jquery/jquery.webcam.js"></script>
<!--<script>
$(document).ready(
function() {
$('#eflash').flash({src: 'jscam.swf', width: 220, height: 140 });
}
);
</script>-->
<script type="text/javascript">
var pos = 0;
var ctx = null;
var cam = null;
var image = null;
jQuery("#webcam").webcam({
width: 320,
height: 240,
mode: "callback",
swffile: "jscam_canvas_only.swf",
onTick: function(remain) {
if (0 == remain)
{jQuery("#status").text("Sorria!");
}
else {
jQuery("#status").text(remain + " segundo(s) restante(s)...");
}
},
onSave: function(data)
{
var col = data.split(";");
var img = image;
for(var i = 0; i < 320; i++)
{
var tmp = parseInt(col[i]);
img.data[pos + 0] = (tmp >> 16) & 0xff;
img.data[pos + 1] = (tmp >> 8) & 0xff;
img.data[pos + 2] = tmp & 0xff;
img.data[pos + 3] = 0xff;
pos+= 4;
}
if (pos >= 4 * 320 * 240)
{
ctx.putImageData(img, 0, 0);
var canvas = document.getElementById("canvas");
var save_image = canvas.toDataURL("image/jpeg");
save_image = save_image.replace(/^data:image\/(png|jpeg);base64,/, "");
$('input[name=save_image]').val(save_image);
pos = 0;
}
},
onCapture: function ()
{
jQuery("#flash").css("display", "block");
jQuery("#flash").fadeOut(100, function () {jQuery("#flash").css("opacity", 1);});
jQuery("#canvas").show();
webcam.save();
},
onLoad: function ()
{ var cams = webcam.getCameraList();
for(var i in cams) {jQuery("#cams").append("<li>" + cams[i] + "</li>");}
jQuery("#canvas").hide();}
});
function getPageSize()
{
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY)
{
xScroll = window.innerWidth + window.scrollMaxX;
yScroll = window.innerHeight + window.scrollMaxY;
}
else
if (document.body.scrollHeight > document.body.offsetHeight)
{ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
}
else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth, windowHeight;
if (self.innerHeight)
{ // all except Explorer
if(document.documentElement.clientWidth)
{
windowWidth = document.documentElement.clientWidth;
}
else
{
windowWidth = self.innerWidth;
}
windowHeight = self.innerHeight;
}
else
if (document.documentElement && document.documentElement.clientHeight)
{ // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
}
else
if (document.body)
{ // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
// for small pages with total height less then height of the viewport
if(yScroll < windowHeight)
{
pageHeight = windowHeight;
}
else
{
pageHeight = yScroll;
}
// for small pages with total width less then width of the viewport
if(xScroll < windowWidth)
{
pageWidth = xScroll;
}
else
{
pageWidth = windowWidth;
}
return [pageWidth, pageHeight]; }
window.addEventListener("load", function()
{
jQuery("body").append("<div id=\"flash\"></div>");
var canvas = document.getElementById("canvas");
if (canvas.getContext)
{
ctx = document.getElementById("canvas").getContext("2d");
ctx.clearRect(0, 0, 320, 240);
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 320, 240);
}
image = ctx.getImageData(0, 0, 320, 240);
}
var pageSize = getPageSize();
jQuery("#flash").css({ height: pageSize[1] + "px" });
}, false);
window.addEventListener("resize", function() {
var pageSize = getPageSize();
jQuery("#flash").css({ height: pageSize[1] + "px" });
}, false);
</script>
saving mathml rendered to html5 canvas as png
My ultimate goal is to save rendered presentation MathML to a .PNG file. Knowing just enough about programming to be dangerous :-) there may be a better way to do this...I am drawing the equation on a canvas element, then trying to save the canvas element as a .PNG. I started with code found here -- https://developer.mozilla.org/en/HTML/Canvas/Drawing_DOM_objects_into_a_canvas -- and modified as follows:
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style="border:2px solid black;" width="200" height="200">
</canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
"<foreignObject width='100%' height='100%'>" +
"<div xmlns='http://www.w3.org/1998/Math/MathML' style='fontsize:40px'>" +
"<math>" +
"<mtable>" +
"<mtr>" +
"<mtd columnalign='right'>" +
"<mn>2</mn>" +
"<mi>x</mi>" +
"<mo>+</mo>" +
"<mn>3</mn>" +
"<mo>−</mo>" +
"<mn>3</mn>" +
"</mtd>" +
"<mtd columnalign='center'> " +
"<mo>=</mo>" +
"</mtd>" +
"<mtd columnalign='left'> " +
"<mn>9</mn>" +
"<mo>−</mo>" +
"<mn>3</mn>" +
"</mtd>" +
"</mtr>" +
"</mtable>" +
"</math>" +
"</div>" +
"</foreignObject>" +
"</svg>";
var svg = new (self.BlobBuilder || self.MozBlobBuilder || self.WebKitBlobBuilder);
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
svg.append(data);
var url = DOMURL.createObjectURL(svg.getBlob("image/svg+xml;charset=utf-8"));
img.onload = function() {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
};
img.src = url;
window.open(canvas.toDataURL('image/png'));
</script>
</body>
</html>
If I comment out the window.open I can see the MathML in the canvas element, but the .PNG generated by the toDataURL is just transparent (no math equations). What am I missing? Thanks in advance...
Right off the bat the issue I see is that you defer the rendering of the canvas until the image loads, but you call window.open in the code without making sure its loaded. You would need to do something like the following
img.onload = function() {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
// now the image has been drawn for sure *before* opening the window
window.open(canvas.toDataURL('image/png'));
};
img.src = url;
Google maps zoom broken
I've created a Google Maps overlay, but for some reason the zoom slider in the top-left of the map has stopped working. Have been trying to pick apart the code to fix it, but can't seem to find what is broken. Can someone have a look to see what I'm missing?
http://www.ucl.ac.uk/study/virtualtours/
My code is here:
<script type="text/javascript">
google.load("maps", "2");
google.load("jquery", "1.4.2");
var map;
var camera;
var side_bar_html = "";
var gmarkers = [];
function TileToQuadKey ( tx, ty, zl){
var quad = "";
for (var i = zl; i > 0; i--) {
var mask = 1 << (i - 1);
var cell = 0;
if ((tx & mask) != 0) cell++;
if ((ty & mask) != 0) cell += 2;
quad += cell;
}
return quad;
}
var uclvtTiles = function (a,b) {
var f = "http://www.ucl.ac.uk/prosp-students/access/virtual-tour/tourlayers/" + TileToQuadKey(a.x,a.y,b) + ".png";
return f;
}
function createUclVTSatMapType() {
var uclvtHybridLayer = new Array();
uclvtHybridLayer[0] = G_NORMAL_MAP.getTileLayers()[0];
uclvtHybridLayer[1] = new GTileLayer(new GCopyrightCollection('') , 17, 17);
uclvtHybridLayer[1].getTileUrl = uclvtTiles;
uclvtHybridLayer[1].getCopyright = function(a,b) {return "University College London, 2010";};
uclvtHybridLayer[1].getOpacity = function () {return 0.97;};//opacity of the non transparent part
if(navigator.userAgent.indexOf("MSIE") == -1) {
uclvtHybridLayer[1].isPng = function() {return true;};
}
var uclvtSatMap = new GMapType(
uclvtHybridLayer,
G_NORMAL_MAP.getProjection(),
'UCL Map',
{errorMessage:"", alt:"Show imagery with UCL Map"});
uclvtSatMap.getTextColor = function() {return "#000000";};
return uclvtSatMap;
}
function myclick(i) {
GEvent.trigger(gmarkers[i], 'click');
}
function addMarker(point, title, video, details) {
var marker = new GMarker(point, {title: title, icon:camera});
GEvent.addListener(marker, "click", function() {
if (details) {
marker.openInfoWindowTabsHtml([new GInfoWindowTab("Video", video),
new GInfoWindowTab("More", details)]);
} else {
marker.openInfoWindowHtml(video);
}
});
var id = gmarkers.length;
gmarkers.push(marker);
map.addOverlay(marker);
return id;
}
function flashMovieHTML(title, file) {
return '<div style="width:335px; height:260px">' +
'<b>' + title + '</b>' +
'<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="325" height="244" ' +
'id="' + title + '" ' +
'title="' + title + '">' +
'<param name="movie" value="http://www.ucl.ac.uk/prosp-students/access/virtual-tour/' + file + '" />' +
'<param name="quality" value="high" />' +
'<param name="wmode" value="opaque" />' +
'<param name="swfversion" value="8.0.35.0" />' +
'<embed src="http://www.ucl.ac.uk/prosp-students/access/virtual-tour/' + file + '" ' +
'quality="high" ' +
'width="325" ' +
'height="244" ' +
'name="' + title + '" ' +
'type="application/x-shockwave-flash" ' +
'pluginspage="http://www.macromedia.com/go/getflashplayer">' +
'</embed>' +
'</object>' +
'</div>';
}
function addMarkersToMap() {
GDownloadUrl('campus.xml', function(doc) {
var xmlDoc = GXml.parse(doc);
var locations = xmlDoc.documentElement.getElementsByTagName("location");
var currentCategory = "";
for (var i = 0; i < locations.length; i++) {
var lat = parseFloat(locations[i].getAttribute("lat"));
var lng = parseFloat(locations[i].getAttribute("lng"));
var point = new GLatLng(lat,lng);
var title = locations[i].getAttribute("title");
var menu = locations[i].getAttribute("menu");
var video = locations[i].getAttribute("video");
var category = locations[i].getAttribute("category");
var details = locations[i].childNodes.length == 0 ? null :
'<div style="width:335px; height:260px">' +
locations[i].childNodes[0].nodeValue +
'</div>';
var id = addMarker(point, title, flashMovieHTML(title, video), details);
if (category != currentCategory) {
if (id > 0) {
side_bar_html += '</ul></div></div>';
}
side_bar_html += '<div class="collapsable">';
side_bar_html += '<h4 class="toggleCollapsableContent">' + category + '</h4>';
side_bar_html += '<div class="collapsableContent"><ul>';
}
side_bar_html += '<li><a href="javascript:myclick(' + id + ')">' + menu + '<\/a></li>';
currentCategory = category;
}
side_bar_html += '</ul></div></div>';
document.getElementById("right").innerHTML = side_bar_html;
$("h4.toggleCollapsableContent:gt(0)")
.addClass('closed')
.next('.collapsableContent').hide();
$("h4.toggleCollapsableContent").click(function () {
if ($(this).next($(".collapsableContent")).is(":hidden")) {
$(this).next($(".collapsableContent")).slideDown("fast");
$(this).removeClass("closed");
} else {
$(this).next($(".collapsableContent")).slideUp("fast");
$(this).addClass("closed");
}
});
});
}
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("mapDiv"));
map.setCenter(new GLatLng(51.52484592590448, -0.13345599174499512), 17);
map.setUIToDefault();
var uclvtSatMapType = createUclVTSatMapType()
map.addMapType(uclvtSatMapType);
map.setMapType(uclvtSatMapType);
camera = new GIcon(G_DEFAULT_ICON);
camera.image = "ucl-video.png";
camera.iconSize = new GSize(32,37);
camera.iconAnchor = new GPoint(16,35);
camera.infoWindowAnchor = new GPoint(16,2);
addMarkersToMap();
}
}
google.setOnLoadCallback(initialize);
Cheers,
G
The div that holds this image http://www.ucl.ac.uk/prosp-students/access/virtual-tour/campus-map-key.png is positioned absolutely above the map and it blocking access to everything underneath it.
This may help you:
#map img{max-width: inherit;}