#jquery #hyperlink
#jquery #гиперссылка
Вопрос:
Ниже приведен код, который создает черный текст на прикрепленном изображении..
Это рисунок, выполненный в jquery. Мне нужно сделать эти круги гиперссылками (на изображении). Всякий раз, когда эти круги будут нажаты, откроется другая вкладка. есть идеи, как это сделать?
function oncanvasmousemove(evt) {
clearTimeout(timer);
lastTimeMouseMoved = new Date().getTime();
timer = setTimeout(function () {
var currentTime = new Date().getTime();
if (currentTime - lastTimeMouseMoved > 300) {
var mousePos = getMousePos(canvas, evt);
var tC, isMatched = false;
for (c = 0; c < circles.length; c ) {
tC = circles[c];
if (mousePos.DistanceTo(tC.centerX, tC.centerY) < tC.Radius 5) {
isMatched = true;
break;
}
}
if (isMatched === true) {
$("#tooltip").html(tC.Text).css({
'top': mousePos.Y canvasoffset.top - 40,
'left': mousePos.X canvasoffset.left - $("#tooltip").width() / 2
}).show();
} else {
$("#tooltip").click(function () {
alert("The paragraph was clicked.");
});
}
}
}, 300);
}
Комментарии:
1. Прикрепленного изображения нет.
2. извините, я не могу прикрепить изображение из-за очков репутации.. изображение представляет собой блок-схему многих процессов, представленных в виде кругов и связанных стрелками. я хочу, чтобы эти круги были гиперссылкой.
3. Вы можете попробовать сохранить гиперссылки в своем массиве circles. Затем в вашем цикле сопоставления вы можете получить гиперссылку для выбранного круга и открыть ссылку в новом окне через
window.open('url', 'window name', '_blank');
4. привет, Виктор, спасибо за это решение, но у меня возникли проблемы с передачей гиперссылок в функцию, и, пожалуйста, скажите мне, как будет называться окно?
Ответ №1:
Мы можем использовать теги map и area, чтобы связать множество гиперссылок с изображением для получения определенных координат.
Используя эти теги, мы можем прикреплять больше гиперссылок к одному изображению на основе координат.
Вот пример кода:
<!DOCTYPE html>
<html>
<body>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
</body>
</html>
Надеюсь, это поможет вам.
Комментарии:
1. спасибо за этот ответ.. но я не использовал изображение .. это рисунок, который я сделал с помощью jquery, который похож на блок-схемы.. как использовать этот атрибут usemap там?