Изображение Mapster почти, но не совсем работает
Итак, у меня есть несколько вопросов о моей странице и ImageMapster. У меня это работает, однако есть несколько странных изломов / идей, с которыми я надеюсь, вы все сможете мне помочь.
Вот код для моей страницы, www.pinkdropwellness.com, и вопросы см. Ниже:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Pink Drop Wellness Homepage">
<meta name="keywords" content="Pink,Drop,Wellness,Fertility,Awareness,Essential,Oils,Blog">
<meta name="author" content="Lucy Bowe">
<link rel="stylesheet" href="stylesheet.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/scripts/jquery.imagemapster.js"></script>
</head>
<body>
<img id="logo" src="/images/PinkDrop.png" alt="Pink Drop Wellness">
<img id="tree" src="/images/Tree.png" alt="Tree" usemap="#links">
<map name="links">
<area
shape="poly"
name="blog"
coords="445,105,432,123,418,132,402,132,386,136,385,156,417,168,437,185,475,208,510,197,531,167,527,141,496,106"
href="/blog"
alt="Blog"
/>
<area
shape="poly"
name="fertilityawareness"
coords="138,450,149,443,167,441,186,441,199,447,208,458,228,466,243,477,256,477,270,483,302,480,325,475,349,472,371,457,383,443,391,427,373,398,345,373,310,347,268,334,218,348,194,377,141,436,169"
href="/fertilityawareness"
alt="Fertility Awareness"
/>
<area
shape="poly"
name="essentialoils"
coords="787,490,753,498,719,523,671,553,634,566,593,541,545,487,540,432,570,407,606,403,653,420"
href="/essentialoils"
alt="Essential Oils"
/>
</map>
<script>
var resizeTime = 100;
var resizeDelay = 100;
$('#tree').mapster({
mapKey: 'name',
clickNavigate: true,
isSelectable: false,
areas: [
{
key: "blog",
fillColor: "5a7cc7"
},
{
key: "fertilityawareness",
fillColor: "785fc2"
},
{
key: "essentialoils",
fillColor: "638a69"
},
]
});
// Resize the map to fit within the boundaries provided
function resize(maxWidth,maxHeight) {
var image = $('img'),
imgWidth = image.width(),
imgHeight = image.height(),
newWidth=0,
newHeight=0;
if (imgWidth/maxWidth>imgHeight/maxHeight) {
newWidth = maxWidth;
} else {
newHeight = maxHeight;
}
image.mapster('resize',newWidth,newHeight,resizeTime);
}
// Track window resizing events, but only actually call the map resize when the
// window isn't being resized any more
function onWindowResize() {
var curWidth = $(window).width(),
curHeight = $(window).height(),
checking=false;
if (checking) {
return;
}
checking = true;
window.setTimeout(function() {
var newWidth = $(window).width(),
newHeight = $(window).height();
if (newWidth === curWidth && newHeight === curHeight) {
resize(newWidth,newHeight);
}
checking=false;
},resizeDelay );
}
$(window).bind('resize',onWindowResize);
</script>
</body>
</html>
Вопросы!
Вопрос 1: Область href и выделенная область на странице не перекрываются. Как вы можете видеть, если вы посещаете сайт, связанная область кажется немного правее того места, где она должна быть. Вы знаете, что может быть причиной этого?
Вопрос 2: Я хотел бы, чтобы цвет внутри выделенной области поблекнул к краям, чтобы вы не могли видеть квадратные края. Есть ли способ, которым вы можете придумать, чтобы сделать это? Я пытался использовать изображения, но они не вписывались в область правильно. Если это правильная идея, как бы мне было убедиться, что они вписываются в область.
Вопрос 3: у меня было изображение дерева, расположенное вверху страницы и центрированное по центру экрана (с использованием css). Как вы можете сказать, он больше не делает этого, как только я добавил скрипт. Если я удалю сценарий, он вернется туда, где он был! Кажется, что весь CSS полностью игнорируется. Вы знаете, как это исправить? Я бы хотел, чтобы мое дерево находилось вверху страницы и располагалось по центру по горизонтали.