Ссылки на фоновое изображение

Question

Я хотел бы использовать ссылки на фоновом изображении (см. Образец http://goo.gl/GfkD6M). Как я могу добавить ссылки на части (например, фигуры) этого изображения, как показывают тексты «Link1» и «Link 2»?

Answer 1

Вы не можете сделать это, но есть несколько способов сделать это косвенно:

1. вы можете использовать раздельные изображения.

2. положить DIV на изображение с более низким индексом, чем изображение

.getclick_link1 { 
     /* Get the position and width of Link1 with F12 in Chrome */ 
     z-index : <put a z-index for the image> - 1; 
     width : <the width of Link1> ; 
     height : <the height of Link1>; 
     position : absolute; 
     left : <Get the left position of Link1 in the image>; 
     top : <Get the top position of Link1 in the image>; 
} 

В JQuery сделать это:

$(function(){ 
    $(".getclick_link1").click(function() { 
     window.location = "The address you like to redirect" 
    }); 
}); 

Answer 2

карта изображения не работает с фоновыми изображениями. Если вы все еще хотите работать с фоновыми изображениями, вы можете позиционировать прозрачные изображения абсолютно над фоновым изображением и привязывать их. Дайте более высокий индекс z абсолютно позиционированному прозрачному изображению, чтобы он был интерактивным.