stowball / jquery-rwdimagemaps Goto Github PK
View Code? Open in Web Editor NEWResponsive Image Maps jQuery Plugin
Home Page: http://mattstow.com
License: MIT License
Responsive Image Maps jQuery Plugin
Home Page: http://mattstow.com
License: MIT License
When i load the jquery.rwdImageMaps.js into WP the image map is no longer working! take it out and hit states are active again...
any idea how to fix this ?
Hi
I'm using your great plugin on m wordpress page in my header. The header is 1280 x 520, and I have a small subscribe area that I use with the image map. The image map works great until I resize the browser below ~ 520 px and then the image map no longer works. It just doesn't seem to be there anymore. At that point, the subscribe image is about 50px x 11px. I was wondering what the issue could be? Maybe the image is too small at that point?
Is there any way to customize and/or remove the 'OK' prompt/pop-up upon click?
My first preference would be to remove it all together - allowing the user to go straight through to the linked page w/o an extra click.
However, if that's not possible, is there a way to change the message that appears (i.e. maybe instead of 'OK' it could say 'continue')?
I found an issue with HTML5 Shiv and Possibly Modernizer.
Seems I can circumvent this issue by loading directly after loading Jquery.
Just a heads up as this just saved my Arse.
Hi, i tried draw an areas in one map, and resize the map and areas location with this scripts. If the resize work the maphiligth doens show the areas, and if a can darw the areas dont resize the map, plz help me
rwdImageMaps jQuery plugin v1.4
*
Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize
*
Copyright (c) 2012 Matt Stow
Licensed under the MIT license
*/
; (function ($) {
$.fn.rwdImageMaps = function (options) {
var settings = $.extend({
'useMaphilight': false
}, options);
var $img = this,
version = parseFloat($.fn.jquery),
backgroundSize = 'background-size',
webkit = '-webkit-' + backgroundSize,
cover = 'cover';
var rwdImageMap = function () {
$img.each(function () {
if (typeof ($(this).attr('usemap')) == 'undefined')
return;
var that = this,
$that = $(that);
// Since WebKit doesn't know the height until after the image has loaded, perform everything in an onload copy
$('<img />').load(function () {
var w,
h,
attrW = 'width',
attrH = 'height';
// jQuery < 1.6 incorrectly uses the actual image width/height instead of the attribute's width/height
if (version < 1.6)
w = that.getAttribute(attrW),
h = that.getAttribute(attrH);
else
w = $that.attr(attrW),
h = $that.attr(attrH);
var wPercent = $that.width() / 100,
hPercent = $that.height() / 100,
map = $that.attr('usemap').replace('#', ''),
c = 'coords';
$('map[name="' + map + '"]').find('area').each(function () {
var $this = $(this);
if (!$this.data(c))
$this.data(c, $this.attr(c));
var coords = $this.data(c).split(','),
coordsPercent = new Array(coords.length);
for (var i = 0; i < coordsPercent.length; ++i) {
if (i % 2 === 0)
coordsPercent[i] = parseInt(((coords[i] / w) * 100) * wPercent);
else
coordsPercent[i] = parseInt(((coords[i] / h) * 100) * hPercent);
}
$this.attr(c, coordsPercent.toString());
});
$(that).attr('width', $(that).width()).attr('height', $(that).height()).maphilight();
}).attr('src', $that.attr('src'));
if (settings['useMaphilight'] && $.fn.maphilight) {
$that.maphilight();
$that.parent('div').css({
webkit: cover,
backgroundSize: cover
});
}
});
};
$(window).resize(rwdImageMap).trigger('resize');
return $img;
};
})(jQuery);
and
(function ($) {
var has_VML, has_canvas, create_canvas_for, add_shape_to, clear_canvas, shape_from_area,
canvas_style, hex_to_decimal, css3color, is_image_loaded, options_from_area;
has_canvas = !!document.createElement('canvas').getContext;
// VML: more complex
has_VML = (function() {
var a = document.createElement('div');
a.innerHTML = '<v:shape id="vml_flag1" adj="1" />';
var b = a.firstChild;
b.style.behavior = "url(#default#VML)";
return b ? typeof b.adj == "object": true;
})();
if(!(has_canvas || has_VML)) {
$.fn.maphilight = function() { return this; };
return;
}
if(has_canvas) {
hex_to_decimal = function(hex) {
return Math.max(0, Math.min(parseInt(hex, 16), 255));
};
css3color = function(color, opacity) {
return 'rgba('+hex_to_decimal(color.substr(0,2))+','+hex_to_decimal(color.substr(2,2))+','+hex_to_decimal(color.substr(4,2))+','+opacity+')';
};
create_canvas_for = function(img) {
var c = $('<canvas style="width:'+img.width+'px;height:'+img.height+'px;"></canvas>').get(0);
c.getContext("2d").clearRect(0, 0, c.width, c.height);
return c;
};
var draw_shape = function(context, shape, coords, x_shift, y_shift) {
x_shift = x_shift || 0;
y_shift = y_shift || 0;
context.beginPath();
if(shape == 'rect') {
// x, y, width, height
context.rect(coords[0] + x_shift, coords[1] + y_shift, coords[2] - coords[0], coords[3] - coords[1]);
} else if(shape == 'poly') {
context.moveTo(coords[0] + x_shift, coords[1] + y_shift);
for(i=2; i < coords.length; i+=2) {
context.lineTo(coords[i] + x_shift, coords[i+1] + y_shift);
}
} else if(shape == 'circ') {
// x, y, radius, startAngle, endAngle, anticlockwise
context.arc(coords[0] + x_shift, coords[1] + y_shift, coords[2], 0, Math.PI * 2, false);
}
context.closePath();
}
add_shape_to = function(canvas, shape, coords, options, name) {
var i, context = canvas.getContext('2d');
// Because I don't want to worry about setting things back to a base state
// Shadow has to happen first, since it's on the bottom, and it does some clip /
// fill operations which would interfere with what comes next.
if(options.shadow) {
context.save();
if(options.shadowPosition == "inside") {
// Cause the following stroke to only apply to the inside of the path
draw_shape(context, shape, coords);
context.clip();
}
// Redraw the shape shifted off the canvas massively so we can cast a shadow
// onto the canvas without having to worry about the stroke or fill (which
// cannot have 0 opacity or width, since they're what cast the shadow).
var x_shift = canvas.width * 100;
var y_shift = canvas.height * 100;
draw_shape(context, shape, coords, x_shift, y_shift);
context.shadowOffsetX = options.shadowX - x_shift;
context.shadowOffsetY = options.shadowY - y_shift;
context.shadowBlur = options.shadowRadius;
context.shadowColor = css3color(options.shadowColor, options.shadowOpacity);
// Now, work out where to cast the shadow from! It looks better if it's cast
// from a fill when it's an outside shadow or a stroke when it's an interior
// shadow. Allow the user to override this if they need to.
var shadowFrom = options.shadowFrom;
if (!shadowFrom) {
if (options.shadowPosition == 'outside') {
shadowFrom = 'fill';
} else {
shadowFrom = 'stroke';
}
}
if (shadowFrom == 'stroke') {
context.strokeStyle = "rgba(0,0,0,1)";
context.stroke();
} else if (shadowFrom == 'fill') {
context.fillStyle = "rgba(0,0,0,1)";
context.fill();
}
context.restore();
// and now we clean up
if(options.shadowPosition == "outside") {
context.save();
// Clear out the center
draw_shape(context, shape, coords);
context.globalCompositeOperation = "destination-out";
context.fillStyle = "rgba(0,0,0,1);";
context.fill();
context.restore();
}
}
context.save();
draw_shape(context, shape, coords);
// fill has to come after shadow, otherwise the shadow will be drawn over the fill,
// which mostly looks weird when the shadow has a high opacity
if(options.fill) {
context.fillStyle = css3color(options.fillColor, options.fillOpacity);
context.fill();
}
// Likewise, stroke has to come at the very end, or it'll wind up under bits of the
// shadow or the shadow-background if it's present.
if(options.stroke) {
context.strokeStyle = css3color(options.strokeColor, options.strokeOpacity);
context.lineWidth = options.strokeWidth;
context.stroke();
}
context.restore();
if(options.fade) {
$(canvas).css('opacity', 0).animate({opacity: 1}, 100);
}
};
clear_canvas = function(canvas) {
canvas.getContext('2d').clearRect(0, 0, canvas.width,canvas.height);
};
} else { // ie executes this code
create_canvas_for = function(img) {
return $('<var style="zoom:1;overflow:hidden;display:block;width:'+img.width+'px;height:'+img.height+'px;"></var>').get(0);
};
add_shape_to = function(canvas, shape, coords, options, name) {
var fill, stroke, opacity, e;
for (var i in coords) { coords[i] = parseInt(coords[i], 10); }
fill = '<v:fill color="#'+options.fillColor+'" opacity="'+(options.fill ? options.fillOpacity : 0)+'" />';
stroke = (options.stroke ? 'strokeweight="'+options.strokeWidth+'" stroked="t" strokecolor="#'+options.strokeColor+'"' : 'stroked="f"');
opacity = '<v:stroke opacity="'+options.strokeOpacity+'"/>';
if(shape == 'rect') {
e = $('<v:rect name="'+name+'" filled="t" '+stroke+' style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:'+coords[0]+'px;top:'+coords[1]+'px;width:'+(coords[2] - coords[0])+'px;height:'+(coords[3] - coords[1])+'px;"></v:rect>');
} else if(shape == 'poly') {
e = $('<v:shape name="'+name+'" filled="t" '+stroke+' coordorigin="0,0" coordsize="'+canvas.width+','+canvas.height+'" path="m '+coords[0]+','+coords[1]+' l '+coords.join(',')+' x e" style="zoom:1;margin:0;padding:0;display:block;position:absolute;top:0px;left:0px;width:'+canvas.width+'px;height:'+canvas.height+'px;"></v:shape>');
} else if(shape == 'circ') {
e = $('<v:oval name="'+name+'" filled="t" '+stroke+' style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:'+(coords[0] - coords[2])+'px;top:'+(coords[1] - coords[2])+'px;width:'+(coords[2]*2)+'px;height:'+(coords[2]*2)+'px;"></v:oval>');
}
e.get(0).innerHTML = fill+opacity;
$(canvas).append(e);
};
clear_canvas = function(canvas) {
// jquery1.8 + ie7
var $html = $("<div>" + canvas.innerHTML + "</div>");
$html.children('[name=highlighted]').remove();
canvas.innerHTML = $html.html();
};
}
shape_from_area = function(area) {
var i, coords = area.getAttribute('coords').split(',');
for (i=0; i < coords.length; i++) { coords[i] = parseFloat(coords[i]); }
return [area.getAttribute('shape').toLowerCase().substr(0,4), coords];
};
options_from_area = function(area, options) {
var $area = $(area);
return $.extend({}, options, $.metadata ? $area.metadata() : false, $area.data('maphilight'));
};
is_image_loaded = function(img) {
if(!img.complete) { return false; } // IE
if(typeof img.naturalWidth != "undefined" && img.naturalWidth === 0) { return false; } // Others
return true;
};
canvas_style = {
position: 'absolute',
left: 0,
top: 0,
padding: 0,
border: 0
};
var ie_hax_done = false;
$.fn.maphilight = function(opts) {
opts = $.extend({}, $.fn.maphilight.defaults, opts);
if(!has_canvas && !ie_hax_done) {
$(window).ready(function() {
document.namespaces.add("v", "urn:schemas-microsoft-com:vml");
var style = document.createStyleSheet();
var shapes = ['shape','rect', 'oval', 'circ', 'fill', 'stroke', 'imagedata', 'group','textbox'];
$.each(shapes,
function() {
style.addRule('v\\:' + this, "behavior: url(#default#VML); antialias:true");
}
);
});
ie_hax_done = true;
}
return this.each(function() {
var img, wrap, options, map, canvas, canvas_always, mouseover, highlighted_shape, usemap;
img = $(this);
if(!is_image_loaded(this)) {
// If the image isn't fully loaded, this won't work right. Try again later.
return window.setTimeout(function() {
img.maphilight(opts);
}, 200);
}
options = $.extend({}, opts, $.metadata ? img.metadata() : false, img.data('maphilight'));
// jQuery bug with Opera, results in full-url#usemap being returned from jQuery's attr.
// So use raw getAttribute instead.
usemap = img.get(0).getAttribute('usemap');
if (!usemap) {
return
}
map = $('map[name="'+usemap.substr(1)+'"]');
if(!(img.is('img,input[type="image"]') && usemap && map.size() > 0)) {
return;
}
if(img.hasClass('maphilighted')) {
// We're redrawing an old map, probably to pick up changes to the options.
// Just clear out all the old stuff.
var wrapper = img.parent();
img.insertBefore(wrapper);
wrapper.remove();
$(map).unbind('.maphilight').find('area[coords]').unbind('.maphilight');
}
wrap = $('<div></div>').css({
display:'block',
background: 'url("' + this.src + '")',
backgroundSize: 'cover',
position:'relative',
padding:0,
width:this.width,
height:this.height
});
if(options.wrapClass) {
if(options.wrapClass === true) {
wrap.addClass($(this).attr('class'));
} else {
wrap.addClass(options.wrapClass);
}
}
img.before(wrap).css('opacity', 0).css(canvas_style).remove();
if(has_VML) { img.css('filter', 'Alpha(opacity=0)'); }
wrap.append(img);
canvas = create_canvas_for(this);
$(canvas).css(canvas_style);
canvas.height = this.height;
canvas.width = this.width;
mouseover = function(e) {
var shape, area_options;
area_options = options_from_area(this, options);
if(
!area_options.neverOn
&&
!area_options.alwaysOn
) {
shape = shape_from_area(this);
add_shape_to(canvas, shape[0], shape[1], area_options, "highlighted");
if(area_options.groupBy) {
var areas;
// two ways groupBy might work; attribute and selector
if(/^[a-zA-Z][\-a-zA-Z]+$/.test(area_options.groupBy)) {
areas = map.find('area['+area_options.groupBy+'="'+$(this).attr(area_options.groupBy)+'"]');
} else {
areas = map.find(area_options.groupBy);
}
var first = this;
areas.each(function() {
if(this != first) {
var subarea_options = options_from_area(this, options);
if(!subarea_options.neverOn && !subarea_options.alwaysOn) {
var shape = shape_from_area(this);
add_shape_to(canvas, shape[0], shape[1], subarea_options, "highlighted");
}
}
});
}
// workaround for IE7, IE8 not rendering the final rectangle in a group
if(!has_canvas) {
$(canvas).append('<v:rect></v:rect>');
}
}
}
$(map).bind('alwaysOn.maphilight', function() {
// Check for areas with alwaysOn set. These are added to a *second* canvas,
// which will get around flickering during fading.
if(canvas_always) {
clear_canvas(canvas_always);
}
if(!has_canvas) {
$(canvas).empty();
}
$(map).find('area[coords]').each(function() {
var shape, area_options;
area_options = options_from_area(this, options);
if(area_options.alwaysOn) {
if(!canvas_always && has_canvas) {
canvas_always = create_canvas_for(img[0]);
$(canvas_always).css(canvas_style);
canvas_always.width = img[0].width;
canvas_always.height = img[0].height;
img.before(canvas_always);
}
area_options.fade = area_options.alwaysOnFade; // alwaysOn shouldn't fade in initially
shape = shape_from_area(this);
if (has_canvas) {
add_shape_to(canvas_always, shape[0], shape[1], area_options, "");
} else {
add_shape_to(canvas, shape[0], shape[1], area_options, "");
}
}
});
});
$(map).trigger('alwaysOn.maphilight').find('area[coords]')
.bind('mouseover.maphilight', mouseover)
.bind('mouseout.maphilight', function(e) { clear_canvas(canvas); });
img.before(canvas); // if we put this after, the mouseover events wouldn't fire.
img.addClass('maphilighted');
});
};
$.fn.maphilight.defaults = {
fill: true,
fillColor: '000000',
fillOpacity: 0.2,
stroke: true,
strokeColor: 'ff0000',
strokeOpacity: 1,
strokeWidth: 1,
fade: true,
alwaysOn: false,
neverOn: false,
groupBy: false,
wrapClass: true,
// plenty of shadow:
shadow: false,
shadowX: 0,
shadowY: 0,
shadowRadius: 6,
shadowColor: '000000',
shadowOpacity: 0.8,
shadowPosition: 'outside',
shadowFrom: false
};
})(jQuery);
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Reservas.aspx.vb" Inherits="Procesos_Reservas" %>
<%@ Register TagPrefix="eo" Namespace="EO.Web" Assembly="EO.Web" %>
<!doctype html>
<script lang="javascript" type="text/javascript">
function before_execute(callback) {
var command;
var dlg = eo_GetObject('Dialog2');
var evtTarget = callback.getEventTarget();
var cMensaje;
if (document.forms[0].ctl00_ContentPlaceHolder1_IDPuesto.Value != "") {
Ver(document.forms[0].ctl00_ContentPlaceHolder1_IDPuesto.Value);
}
}
</script>
<form id="form1" runat="server">
<script type="text/javascript">
// LOAD
$(document).ready(function () {
//$('#squidhead').mouseover();
//$('#squidhead1').mouseover();
// $('#Puesto2').css("display","none");
// $('#Puesto2').attr.
//if ($('#ctl00_ContentPlaceHolder1_Mensaje').val() != "") {
//eo_GetObject('DialogMessage').show(false);
//}
//javascript:
var IDPues = $('#ctl00_ContentPlaceHolder1_IDPuesto');
if (IDPues.val() != "0") {
$('#Puesto' + IDPues.val()).mouseover();
IDPues.val(0);
} else {
var x = 1;
while (x < 20) {
//$('#Puesto' + x).mouseout();
$('#Puesto' + x).mouseover();
x = x + 1;
}
}
});
function Ver(p) {
//$(id).mouseout();
//$(id).mouseover();
if (p != "0") {
$('#Puesto' + p).mouseover();
} else {
var x = 1;
while (x < 20) {
//$('#Puesto' + x).mouskeout();
$('#Puesto' + x).mouseover();
x = x + 1;
}
}
//$('#squidhead1').mouseover();
}
function GoToNoDisponible(a) {
alert("El " + a + " no tiene horas disponibles")
};
function GoToInactivo(a) {
alert("El " + a + " se encuentra inactivo")
};
function GoToReserva(a, b) {
var desde = document.getElementById('<%= CmbHoraIni.ClientID%>').value
var hasta = document.getElementById('<%= CmbHoraFin.ClientID%>').value
var seleccion = confirm("Desea reservar el " + b + "? Desde las " + desde + " hasta las " + hasta);
// usado para que no haga postback el boton de asp.net cuando
// no se acepte el confirm
if (seleccion == true) {
$('#<%=IDoculto.ClientID%>').val(a);
//hace click en btn siguiente
$('#<%=BtnNext2.ClientID%>').click();
}
else {
}
};
function GoToDisponible(a, b) {
var seleccion = confirm("Desea reservar el " + b + "?");
//usado para que no haga postback el boton de asp.net cuando
//no se acepte el confirm
if (seleccion == true) {
//Lleva el parametro puesto al input
$('#<%=IDoculto.ClientID%>').val(a);
//hace click en btn siguiente
$('#<%=BtnNext3.ClientID%>').click();
}
else {
}
};
</script>
<input type="hidden" id="IDPuesto" runat="server" value="0" />
<input type="hidden" id="Mensaje" runat="server" value="" />
<input type="hidden" id="IDoculto" runat="server" />
<div id="Contenido">
<eo:CallbackPanel ID="CallbackPanel1" runat="server" Height="100%" Width="100%">
<div id="tabstripdiv" style="display:none">
<eo:TabStrip ID="TabStrip1" runat="server" ControlSkinID="None" MultiPageID="MultiPage1" Enabled="False">
<lookitems>
<eo:TabItem Image-BackgroundRepeat="RepeatX" Image-Mode="TextBackground" Image-SelectedUrl="00010225" Image-Url="00010222" ItemID="_Default" LeftIcon-SelectedUrl="00010224" LeftIcon-Url="00010221" NormalStyle-CssText="color: #606060" RightIcon-SelectedUrl="00010226" RightIcon-Url="00010223" SelectedStyle-CssText="color: #2f4761; font-weight: bold;">
<subgroup overlapdepth="8" style-csstext="font-family: tahoma; font-size: 8pt; background-image: url(00010220); background-repeat: repeat-x; cursor: hand;">
</subgroup>
</eo:TabItem>
</lookitems>
<topgroup>
<Items>
<eo:TabItem Text-Html="Parametros">
</eo:TabItem>
<eo:TabItem Text-Html="Info">
</eo:TabItem>
<eo:TabItem Text-Html="Mapa">
</eo:TabItem>
</Items>
</topgroup>
</eo:TabStrip>
</div>
<eo:MultiPage ID="MultiPage1" runat="server" Height="300px" Width='100%'>
<eo:PageView ID="PageView1" runat="server" Width="100%">
<table width="100%" height="Auto" border="0" align="center">
<tr>
<td class="auto-style1" width="20%"></td>
<td class="auto-style1"></td>
<td class="auto-style1" width="20%"></td>
</tr>
<tr>
<td> </td>
<td align="center">
<asp:Label ID="Label4" runat="server" Text="Seleccione:" CssClass="label"></asp:Label>
</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td align="center">
<asp:Label ID="Label1" runat="server" Text="Fecha:" CssClass="label"></asp:Label>
</td>
<td> </td>
<tr>
<td> </td>
<td align="center">
<asp:DropDownList ID="CmbFechaIni" runat="server">
</asp:DropDownList>
</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td align="center">
<asp:Label ID="Label2" runat="server" Text="Hora Inicial:" CssClass="label"></asp:Label></td>
<td> </td>
</tr>
<tr>
<td class="auto-style1"></td>
<td class="auto-style1" align="center">
<asp:DropDownList ID="CmbHoraIni" runat="server">
</asp:DropDownList>
</td>
<td class="auto-style1"></td>
</tr>
<tr>
<td> </td>
<td align="center">
<asp:Label ID="Label3" runat="server" Text="Hora Final:" CssClass="label"></asp:Label>
</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td align="center">
<asp:DropDownList ID="CmbHoraFin" runat="server">
</asp:DropDownList>
</td>
<td> </td>
</tr>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td align="center">
<asp:Button ID="BtnIrgrid" runat="server" Text="Mostrar Sectores" CssClass="btnunilever" />
</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</eo:PageView>
<eo:PageView ID="PageView2" runat="server" Width="100%">
<table width="100%" height="Auto" border="0" align="center">
<tr>
<td class="auto-style1" width="20%"></td>
<td class="auto-style1">
<eo:Grid ID="GridSumario" runat="server" BorderColor="#3390CF" BorderWidth="1px" ColumnHeaderAscImage="00050303" ColumnHeaderDescImage="00050304" ColumnHeaderDividerImage="00050302" ColumnHeaderHeight="24" FixedColumnCount="1" Font-Bold="False" Font-Italic="False" Font-Names="Open Sans Condensed Light" Font-Overline="False" Font-Size="8.75pt" Font-Strikeout="False" Font-Underline="False" GridLineColor="ActiveBorder" GridLines="Both" Height="237px" ItemHeight="30" RunningMode="Server" Width="321px">
<ItemStyles>
<eo:GridItemStyleSet>
<ItemStyle CssText="background-color: white" />
<ItemHoverStyle CssText="background-image: url(00050206); background-repeat: repeat-x" />
<SelectedStyle CssText="background-image: url(00050207); background-repeat: repeat-x" />
<CellStyle CssText="padding-left:8px;padding-top:2px; color:#336699;white-space:nowrap;" />
</eo:GridItemStyleSet>
</ItemStyles>
<ColumnHeaderStyle CssText="background-image:url('00050301');padding-left:8px;padding-top:2px;font-weight: bold;color:white;" />
<Columns>
<eo:StaticColumn DataField="id_sector" Visible="False">
</eo:StaticColumn>
<eo:ButtonColumn AllowResize="False" CommandName="Sectord" DataField="nom_sector" HeaderText="Sector" ReadOnly="True" Width="204">
</eo:ButtonColumn>
<eo:StaticColumn AllowResize="False" DataField="DI" HeaderText="DI" ReadOnly="True" Width="28">
</eo:StaticColumn>
<eo:StaticColumn AllowResize="False" DataField="RP" HeaderText="RP" Name="" ReadOnly="True" Width="28">
</eo:StaticColumn>
<eo:StaticColumn AllowResize="False" HeaderText="RT" ReadOnly="True" StyleField="RT" Width="28">
</eo:StaticColumn>
<eo:StaticColumn AllowResize="False" DataField="OCUPACION" HeaderText="%" ReadOnly="True" Width="28">
</eo:StaticColumn>
</Columns>
<ColumnTemplates>
<eo:TextBoxColumn>
<TextBoxStyle CssText="BORDER-RIGHT: #7f9db9 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7f9db9 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 8.75pt; PADDING-BOTTOM: 1px; MARGIN: 0px; BORDER-LEFT: #7f9db9 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #7f9db9 1px solid; FONT-FAMILY: Tahoma" />
</eo:TextBoxColumn>
<eo:DateTimeColumn>
<DatePicker ControlSkinID="None" DayCellHeight="16" DayCellWidth="19" DayHeaderFormat="FirstLetter" DisabledDates="" OtherMonthDayVisible="True" SelectedDates="" TitleLeftArrowImageUrl="DefaultSubMenuIconRTL" TitleRightArrowImageUrl="DefaultSubMenuIcon">
<PickerStyle CssText="border-bottom-color:#7f9db9;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#7f9db9;border-left-style:solid;border-left-width:1px;border-right-color:#7f9db9;border-right-style:solid;border-right-width:1px;border-top-color:#7f9db9;border-top-style:solid;border-top-width:1px;font-family:Courier New;font-size:8pt;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;padding-bottom:1px;padding-left:2px;padding-right:2px;padding-top:2px;" />
<CalendarStyle CssText="background-color: white; border-right: #7f9db9 1px solid; padding-right: 4px; border-top: #7f9db9 1px solid; padding-left: 4px; font-size: 9px; padding-bottom: 4px; border-left: #7f9db9 1px solid; padding-top: 4px; border-bottom: #7f9db9 1px solid; font-family: tahoma" />
<TitleStyle CssText="background-color:#9ebef5;font-family:Tahoma;font-size:12px;padding-bottom:2px;padding-left:6px;padding-right:6px;padding-top:2px;" />
<TitleArrowStyle CssText="cursor:hand" />
<MonthStyle CssText="font-family: tahoma; font-size: 12px; margin-left: 14px; cursor: hand; margin-right: 14px" />
<DayHeaderStyle CssText="font-family: tahoma; font-size: 12px; border-bottom: #aca899 1px solid" />
<DayStyle CssText="font-family: tahoma; font-size: 12px; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
<DayHoverStyle CssText="font-family: tahoma; font-size: 12px; border-right: #fbe694 1px solid; border-top: #fbe694 1px solid; border-left: #fbe694 1px solid; border-bottom: #fbe694 1px solid" />
<TodayStyle CssText="font-family: tahoma; font-size: 12px; border-right: #bb5503 1px solid; border-top: #bb5503 1px solid; border-left: #bb5503 1px solid; border-bottom: #bb5503 1px solid" />
<SelectedDayStyle CssText="font-family: tahoma; font-size: 12px; background-color: #fbe694; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
<DisabledDayStyle CssText="font-family: tahoma; font-size: 12px; color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
<OtherMonthDayStyle CssText="font-family: tahoma; font-size: 12px; color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
</DatePicker>
</eo:DateTimeColumn>
<eo:MaskedEditColumn>
<MaskedEdit ControlSkinID="None" TextBoxStyle-CssText="BORDER-RIGHT: #7f9db9 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7f9db9 1px solid; PADDING-LEFT: 2px; PADDING-BOTTOM: 1px; MARGIN: 0px; BORDER-LEFT: #7f9db9 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #7f9db9 1px solid; font-family:Courier New;font-size:8pt;">
</MaskedEdit>
</eo:MaskedEditColumn>
</ColumnTemplates>
<FooterStyle CssText="padding-bottom:4px;padding-left:4px;padding-right:4px;padding-top:4px;" />
</eo:Grid>
</td>
<td class="auto-style1" width="20%"></td>
</tr>
<tr>
<td class="auto-style1" width="20%"></td>
<td class="auto-style1"></td>
<td class="auto-style1" width="20%"></td>
</tr>
</table>
<div id="DivMapa" runat="server">
<table width="100%" height="Auto" border="0" align="center">
<tr>
<td class="auto-style1" width="20%"></td>
<td class="auto-style1">
<table class="tablesB" width="100%" heigth="auto">
<tr>
<td style="width:100%;height:auto" >
<asp:ImageButton ID="Img1" runat="server" Width="33%" Height="33%"/>
<asp:ImageButton ID="Img2" runat="server" Width="33%" Height="33%"/>
<asp:ImageButton ID="Img3" runat="server" Width="33%" Height="33%"/>
<br />
<asp:ImageButton ID="Img4" runat="server" Width="33%" Height="33%"/>
<asp:ImageButton ID="Img5" runat="server" Width="33%" Height="33%"/>
<asp:ImageButton ID="Img6" runat="server" Width="33%" Height="33%"/>
<BR/>
<asp:ImageButton ID="Img7" runat="server" Width="33%" Height="33%"/>
<asp:ImageButton ID="Img8" runat="server" Width="33%" Height="33%"/>
<asp:ImageButton ID="Img9" runat="server" Width="33%" Height="33%"/>
</td>
</tr>
</table>
</td>
<td class="auto-style1" width="20%"></td>
</tr>
<tr>
<td class="auto-style1" width="20%"></td>
<td class="auto-style1"></td>
<td class="auto-style1" width="20%"></td>
</tr>
</table>
</div>
</eo:PageView>
<eo:PageView ID="PageView3" runat="server" Width="100%">
<%--
--%> <%-- --%> <%--<div ~/img/Sec1.jpg class="map" id ="Div1" style="width:831px;height:488px;" >--%>
|
Hello Matt. Thank you for the work you've done. I have a small problem with the script, after you have created a map with coordinates, apply the script to the map and I do not find the coordinates.
thanks for everything,
Daniele
Hi there,
I'm pretty new to the responsive coding, and I've tried your plugin with a new site. I believe all the code is entered and linked properly, however the coordinates don't seem to be resizing with the image. I've tried copying your demo exactly and it doesn't work either. Can you shed some light?
http://www.joyfoleyweddings.com/portfolio
hi many thanks for this plugin
but how to set hover effect for area?
i use mapligh plugin for this , but not work for mobile size : 320px * 480px
can you help me ?
It's only load for first image
I tried with changing function to
$('.leftSide img').rwdImageMaps();
$('.rightSide img').rwdImageMaps();
But still it's not working.
Hey, could u explain how i should implement the code at http://www.mittiqtest.se/?
Hi! Great plug-in!
I have installed it here (www.thelenideas.com/testing/work/people), which is in WordPress. I can get it functioning perfectly on my system, but once it's loaded on the site, the coordinates seem to work correctly only at browser width the size of the image at 100%. I've tried umpteen versions of css and html, but to no avail. I've modified from the demo quite a bit so that it works with a show/hide jquery. However, it does work perfectly before I put it into WordPress. It may have something to do with other media queries affecting its performance, but I'm completely at a loss how or why it'd be doing that.
Any thoughts?
I have an issue either my photos are squishing in responsive then when i get them not to squish by removing width and height attributes i lose all map points?
i am pretty copying code as well. Can you help?
Hey Matt,
thanks a lot for this great plugin. It works great in Chrome. But in FF and IE I don't get it working. The map works as always, but the image does not resize.
The URL is http://www.moorinfopfad.de/informationen.html.
Hope you can help, sitting on this for 6 hours yet :(
Thx in advance,
Christian
First of all, thanks -- this is a life savor.
Second, for user documentation, you might want to specify that height and width should not have units. I discovered that the hard way -- luckily breakpoints work.
Thanks again.
I'm using rwd imagemaps to scale maps on my site. I'm using jquery ajax to load images and their maps into my page. I then call rwdImageMaps() afterwards on the replaced image to make the new image scale correctly.
However in Firefox 24 this isn't working for me. Seems to work pretty randomly. A lot of the time after a image has been loaded through ajax the coordinates are just 0. This works fine in every other browser.
My ajax function:
function renderImage(href) {
$.ajax({
url: href,
dataType: "html",
type: "GET",
success: function (data) {
// Replace image with new image
$("#image-container").html(data);
}
}).done(function() {
$("img[usemap]").rwdImageMaps();
});
}
What the data that is returned looks like:
<img alt="map" id="map" src="data:image/png;base64,TheImageDataIsHere" usemap="#map" />
<map name="map" id="image-map">
<area class="anchor-link" coords="1,370,82,423" data-targetId="adba9e9a-966a-4440-9454-0bbfd2eed50d" href="path/to/some/function/id" shape="rect"></area>
<area class="anchor-link" coords="6,730,49,767" data-targetId="bc7dc1fa-6844-42b5-863b-962927f6a2e7" href="path/to/some/function/id" shape="rect"></area>
<area class="anchor-link" coords="1008,727,1020,759" data-targetId="ebc2930a-f7e0-4445-abb6-a6509eab3258" href="path/to/some/function/id" shape="rect">
</area>
</map>
I don't get a single error in the console and the value of the coords attribute are "0,0,0,0" in the page html.
The moment i remove rwdImageMaps() call is starts working perfectly in Firefox, however of course the coordinates aren't scaled anymore.
Hi.
We're using this plugin (which is great btw) however on page load the coords in the imagemap all report as being 0 until the page is resized and then the imagemap kicks in and resizes.
I'm using 1.4 so no need to declare the width / height of the image.
Can you help?
When you add 'px' to the style sizes, images won't resize vertically. For example the first img below works fine (ie. it resizes both horizontally and vertically). - Note I had to put quotes around "img" so this editor would treat it as just text.
<"img" src="image.jpg" usemap="#powerpuffgirls" style="height:768;width:1024;" />
But this image only resizes horizontally, not vertically.
<"img" src="image.jpg" usemap="#powerpuffgirls" style="height:768px;width:1024px;" />
Hi Matt! I am using your plugin combined with fancybox. I do have an issue that I believe can be easily solved if I just figure out why "undefined click" comes up and I have to click OK to show my fancybox.
How do I get rid of it?
my code looks something like this:
area shape="rect" coords="730,440,1112,933" class="fancybox" href="images/digitalcreative.png"
Thank you very much for a great plugin!
Hi,
I have used this plugin here: http://216.92.53.130/
There is only one image map on this page but its not working. Can you please check if I am doing any mistake?
Thanks
Baljit
I have an image map that needs the areas to highlight on mouseover and also needs to resize with the viewport. I tried to use both RWD and maphilight. RWD works perfectly on its own. Maphilight works but causes RWD to fail, so the image and map is no longer resized.
I'd appreciate any help or ideas.
I've also tried imagemapster, but I can't seem to get that to work. The site is built with Wordpress as CMS.
Hi Matt,
I know this one comes up rather frequently with newbies such as my self. Coordinates of my Image Map don't match after rescaling (with bootstrap)... : - (
I tried fixing it : removing image width and height, making sure to loading scripts twice... Copying the code from your demo... it's driving me crazy (then again don't mess with things you don't quite understand).
You may have look there http://prototypes.lafabriquedureel.fr/carte-ile-montecristo.html
Would appreciate any help from you (or anyone with a clue).
Many thx
Hi, had a problem when I was loading new images and reloading them again (don't ask me why) on the same page through ajax request.
Every time I've loadet them I had to apply the plugin on them again. That resulted errors because of the window called the function more than one time.
I've managed to fix that issue by replacing:
$(window).resize(rwdImageMap...
with:
$(window).off(".rwdimagemap").on("resize.rwdimagemap", rwdImageMap...
That way it prevented calling the function more that one time on the resize event.
Hi Matt
I can't get this to work. I have no doubt it's because I'm being an idiot... The site is offline during development right now. Can you contact me via email for login details? info at soundsessential.com
Thanks
Duncan
Hi. great plugin.
Is there a way to stop the Alert Popup Message wham clicking the links on the image?
On your demo, when I click on the middle power puff girl, I get a pop up message saying:
"The page at mattstow.com says:
Blossom clicked"
Then I have to say ok to continue. It happens on all browsers.
Can this be removed?
Thank you,
Danny
I have an image map and this:
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
$('area').on('click', function() {
alert($(this).attr('alt') + ' clicked');
});
});
It works fine if you open the accordion, then resize the browser window a little bit, but if you don't, when opening the accordion, the image has no mapped areas. I am using Bootstrap 3 accordion. I understand this happens since the initial load of the div in the accordion is hidden by the css and then page load happens and js is called.
Hi I'm new to wordpress and responsive template.
I've been trying to get the map to response using the plugin however, it doesn't seem to work. can u tell me why?
also, will tables react correctly to responsive template? the table i have on the page doesn't reflect very well on my iphone when i'm viewing the page vertically.
http://www.propertylaunchfinder.com/new-launches/d15-to-d16/d15-aura83-83-duku-road/
Hi,
Just discovered your plugin and it helped me a lot on a project I'm working on. Until know I used media queries as a work around, which was a bit messy ;)
So the plugin works very well, until I open my project's website on iOS (iPad to be precise). Here, map areas seem to not be recognized. It works on Android tablets.
Here is the website in question: lafermedemarijoulet.fr
Is it something with your plugin or is it iOS related, as I heard that iOS do wild things with websites dimensions ?
Tested in Chrome 19.0.1084.52 and Chrome Canary 21.0.1159.2 (although it may not work in other browsers either.
Fix:
change <img src="powerpuff-girls.fw.jpg" width="1024" height="768" usemap="#powerpuffgirls" alt="" />
to <img src="powerpuff-girls.fw.jpg" width="1024" height="768" usemap="powerpuffgirls" alt="" />
I've installed the plugin and have no JS errors, but I'm not seeing anything happen at all to my image map. When I check the console, the mapped area location is not even close to the spot it is supposed to be after I resize the screen, and it is also still full size. So basically nothing all all is happening. It's possible I missed something as I see the plugin working great in your demo, but I can't get it to do anything at all on the single image map I have.
URL to page in question: http://dev04.iridiangroup.com/sfm/programs/
I've sent an email to the address you have on here with the login credentials to view this site.
How would you, and is it feasible to, set the behavior of image resizing to determine the smallest size (width vs height) and then resize based on whichever one is smaller?
The issue i'm running into is that as it stands right now, the implementation works great on my smartphone. But when i load up the page on my computer where the aspect ratio is wider than taller, part of the image map is cut off until i adjust the width of my internet browser window. The goal being to have the whole image map visible at all times regardless of device/size of browser.
Or am i approaching this incorrectly?
Regardless, thank you for the project, its awesome. <3
I have a number of divs that contain different image maps. They are all hidden except the inital div (floor 1). Next and previous buttons hide the current div and show the next one. This code works in Firefox and Safari, but seems to be broken in Chrome 31.0.1650.63. Once I click next, the image map will not load on any subsequent images in Chrome. When I click previous to go back to the original image map, it no longer works. Resizing the browser window has no effect.
$('#next').click(function () {
if(count < 20){
$(x).hide();
$(y).hide();
count += 1;
x = "#floor" + count + " img";
y = "#floorplate" + count;
$('#currentFloor').text(count);
$(y).show();
$(x).show();
$('img[usemap]').rwdImageMaps();
}
});
The image maps are in the y variable, if that makes a difference.
Hi!
This is a great script and exactly what I was looking for. Do you have any thoughts on adding a fill color to the area on hover? I'm using this for a map of the US and while users can click on the states, it's not immediately apparent that they can do so without that little tip off.
Thanks!
Jen
My knowledge of CSS and jQuery is overall pretty appalling. I know the page is a little messy but I wonder if someone could point out where I'm going wrong?
I'm assuming it's with the script $('img[usemap]').rwdImageMaps();
?
Thanks to anyone who can help!
PS. maisiebelledolan.co.uk/index4.html
When using Chrome, when the page is initially loaded, the image map areas are not clickable. Looking at the HTML, you can see that the map area coordinates are being recalculated, but the links just aren't active. Once a window resize is triggered the links work normally. This only seems to occur on the very first page load.
I've encountered the problem using the latest version of Chrome, on both Mac and Windows, on the demo page, and on a client's site.
Hi Matt!
Great plugin! I've been on the lookout for something like this for quite a while now.
I am quite new to this and I am having trouble with finding the coordinates for my image. what tools do I use to find that?
All the best
I have a series of rwdImageMaps in a tabbed interface. I'm using the following JS for tabs: http://pastebin.com/46bvtNxT
It seems the rwdImageMaps doesn't work unless I comment out the first line of the above JS:
jQuery('.tabs div').hide();
Similarly, if I try to achieve the same with CSS (hide the first tab), it won't work.
Any ideas how to get this working or why there's a conflict?
Hi
Thanks for the great plugin. Here the test page, where i'm using it (Joomla site);
http://langnauguide.day-design.ch/dorfplan/hauptmenu/dorfplan
To Link buildings on the map with the content.
It's working on the ipad, but not with my iphone (iOs 7). I didn't try the android devices yet. The points on the map are not showing any action, like it would be no links.
Please do you have any idea, how could i improve it?
Thanks in Advance for your replay.
Kind regards Helena
EDIT:
If the image is 1200px wide and my monitor is 1500px wide, then there will be a space of 300px that the image is not taking up to fill the screen - there is no way to make the image LARGER than the original size. The image scales down from the original size (smaller), but not up (larger) from the original size
Im having a bit of trouble installing this jQuery plugin into my web site https://iuwt.tv
Can't seem to link this feature to correspond to my image mapped banner
please help..
Thanks in advance.
Hey bud,
so i'm looking to deploy your plugin inside my flask app, which uses jinja2 pretty extensively, so I'll show you the generated source:
https://gist.github.com/ianseyer/6821317
Any ideas?
ps I have tried replacing the percentages with static values, but to no avail
Thanks
I have image with width=100% and height=100%
Script doesn't recognize such values. I've solved that problem by removing these strings and rewriting following condition:
w = $that.attr(attrW),
h = $that.attr(attrH);
Hi there,
Looks like a great plugin. Having an issue where when it loads it replaces all the coordinates with NaN. Can't show you an example at the moment. Any suggestions on what might be the issue? Using it on a Wordpress site, with an image map banner on a couple of pages. Happening on all browsers.
Thanks a mill.
T
https://github.com/bower/bower#defining-a-package
Makes it easier to install, maintain. And broadens distribution. Thanks!
Here's a test page (only page A1 has areas)...
http://www.eabad-dev.townnews365.com/eedition/page-a/page_882d5827-eef9-5cfe-b637-c39b42463f27.html
Works on the desktop and android devices. On the iPad though, it never reacts to any click events.
If I comment out $('img[usemap]').rwdImageMaps(); it will start working again (click events).
Hi! i'm seeing your work its pretty cool!
I have a problem: when i open the page at first time there is a problem with the map; it isnt working only if i reescale the page it start working.
I saw the issue #2 but it isnt working for me...
Please help me!!!
Thanks!
YSB
Hi,
when I add jQuery mobile ( version 1.3.0 ) library jQuery-rwdImageMaps not working. There is no error log in console.
Anyone tried to use jQuery-rwdImageMaps with jQuery mobile?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.