Блог

Я понимаю, что я все еще новичок здесь, но у меня есть статическое изображение (карта Google, но я еще не использую Google API), в котором я создал горячие точки, которые будут отображать данные о местоположении, которые находятся в таблице слева от карты. Однако при нажатии на точку доступа страница прокручивается вниз, так что верхняя часть карты (карта изображений) оказывается в верхней части экрана, даже если информация находится непосредственно рядом с картой.

Я предполагаю, что это происходит потому, что якорь стремится загрузиться в верхней части экрана. Это было бы нормально, за исключением того, что мой заголовок теперь удален с экрана. Есть ли способ, чтобы страница не «перемещалась» при нажатии на точку доступа?

Страницу можно посмотреть здесь: http://www.mydillonsupply.com/default.aspx?page=customeramp;file=customer/disupp/customerpages/locations_page.htm

Вместо того, чтобы использовать поведение браузера по умолчанию (для тегов привязки), просто заблокируйте его и прокрутите поле самостоятельно. Я вижу, вы уже используете jQuery. Итак, что-то вроде этого должно сработать.

 $('area').bind('click', function(e) {
    e.preventDefault();
    // the div in question has nothing uniquely identifiable as it is now,
    // assign it a unqie class or id so you can select it
   var findAnchor=this.href.split('#')[1];
    $('#the_div').scrollTop($('a[name="'   findAnchor '"]').next().position().top);
});
  

Это довольно сложно протестировать в контексте этой страницы, но если вы настроите скрипку только с этой ее частью, я уверен, что это можно было бы довольно легко заставить работать правильно.

(редактировать) — OP решил проблему, обновленная версия здесь:

http://jsfiddle.net/H3Mz6/9/

Приведенный выше код был обновлен, чтобы отразить то, что действительно работает. Я также добавил идентификатор «the_div» в div, окружающий таблицу местоположений. Вот как это работает:

1) получите часть href после # — браузер может добавить полный URL. 2) найдите его, затем получите next() элемент, потому что невидимые теги привязки сообщат, что у них нет информации о местоположении 3) затем получите position().top значение, которое является положением этого элемента относительно его контейнера 4) затем scrollTop(..) к нему

Вопреки предложению @colinross, в imagemaps нет ничего ни нерасширяемого, ни негибкого. Напротив, это единственный способ получить точки доступа неправильной формы без особых проблем, и это дает вам много возможностей. Все, что вам нужно сделать, чтобы заставить их делать все, что вы хотите, это привязать ваши собственные события наведения курсора мыши и / или щелчка к областям и вызвать e.preventDefault() . Оттуда все ваше.

Да, мне нравятся карты изображений, и я также написал плагин, который чертовски много с ними делает. Так что я довольно предвзят. Но я удивлен проблемами, на которые люди идут, чтобы избежать их (например, абсолютное расположение ссылок привязки, сложный css и так далее), Когда они абсолютно просты, удобны в использовании, работают с любым браузером под солнцем и намного эффективнее, чем позиционирование всех ваших горячих точек вручную. (И без карты изображений или какой-то сумасшедшей логики, позволяющей самостоятельно определять, где находится мышь, вы в любом случае ограничены прямоугольными областями!).

Переход происходит из-за того, что вы используете карту изображений, которая обрабатывает щелчок по местоположению #DillonLocationsMap.

Это тот же результат, что и при использовании привязки на странице, подобной <a name="over_here" /> , и ссылки в другом месте на <a href="#over_here">Go over here.</a>

Честно говоря, я бы посоветовал вам не использовать карту изображений, и они не очень расширяемы и не настраиваются.

дайте ответ fish Переместите фактический <map> элемент вверх, например, до элемента table#MainTable. Технически он все равно будет перемещаться, но ваш заголовок все равно должен быть в поле зрения.

p.s. Таблицы для верстки страниц- от них панды плачут;(

Когда вы нажимаете на ссылку, ваш <a name="Nashville"></a> тег, относящийся к указанному городу, в конечном итоге прокручивается до верхней части вашего <!-- table containing locations --> .

Впоследствии это будет работать точно так же, как с «верхней» ссылкой, где вы размещаете <a name="TOP"></a> вверху своей страницы, а затем <a href="#TOP">Back to top</a> внизу своей страницы. Он попытается поместить <a name="Nashville"> как можно ближе к верхней части окна просмотра (пример: http://mix26.com/demo/local_scroll/index.html ).

Вы могли бы попробовать что-то вроде этого (найдено здесь):

 <html>
<head>
<title>Document Title</title>

<script type="text/javascript" language="javaScript">
<!--
  function go_anchor(n){
    document.getElementById("div1").scrollTop = document.getElementById(n).offsetTop
  }
// -->
</script>
</head>

<body>
<a href="#null" onclick="go_anchor('sp1')">To anchor 1</a><br />
<a href="#null" onclick="go_anchor('sp2')">To anchor 2</a><br />
<a href="#null" onclick="go_anchor('sp3')">To anchor 3</a><br />
<a href="#null" onclick="go_anchor('sp4')">To anchor 4</a><br />

<div id="div1" style="position:absolute; left:30; top:100; width:330; height:200; clip:rect(0,330,200,0); overflow:auto; padding:5;border:2px solid black"> 
<p><a href="#null" onclick="go_anchor('sp1')">To anchor 1</a></p>
<p>Dummy Text 2</p>
<p>Dummy Text 3</p>
<p>Dummy Text 4</p>
<p>Dummy Text 5</p>
<p>Dummy Text 6</p>
<p>Dummy Text 7</p>

<p><span id="sp1">Anchor 1</span></p>

<p>Dummy Text 9</p>
<p>Dummy Text 10</p>
<p>Dummy Text 11</p>
<p>Dummy Text 12</p>
<br/><br/><br/><br/><br/>

<span id="sp2">Anchor 2</span>

<br/><br/><br/><br/><br/>

<span id="sp3">Anchor 3</span>

<br/><br/><br/><br/><br/>

<span id="sp4">Anchor 4</span>

<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
The End
</div> 

</body>
</html>