https://dnomak.com.tr/svg-turkiye-haritasi/
bu haritayı Joomla sitemize eklemek istiyorum makale içerisine kodları ekleyip gösterebildim
fakat mouse ile üzerine gelindiğinde şehir isimleri çıkıyor Doğu bölgesindeki iller haritanın sağında gözüktüğü için sitede gözükmüyor.
css ve js düzenlemesi yapılması gerekiyor sanırım.
/*! SVG Türkiye Haritası | MIT Lisans | dnomak.com */
function svgturkiyeharitasi() {
const element = document.querySelector('#svg-turkiye-haritasi');
const info = document.querySelector('.il-isimleri');
element.addEventListener(
'mouseover',
function (event) {
if (event.target.tagName === 'path' && event.target.parentNode.id !== 'guney-kibris') {
info.innerHTML = [
'<div>',
event.target.parentNode.getAttribute('data-iladi'),
'</div>'
].join('');
}
}
);
element.addEventListener(
'mousemove',
function (event) {
info.style.top = event.pageY + 25 + 'px';
info.style.left = event.pageX + 'px';
}
);
element.addEventListener(
'mouseout',
function (event) {
info.innerHTML = '';
}
);
element.addEventListener(
'click',
function (event) {
if (event.target.tagName === 'path') {
const parent = event.target.parentNode;
const id = parent.getAttribute('id');
if (
id === 'guney-kibris'
) {
return;
}
window.location.href = (
'#'
+ id
+ '-'
+ parent.getAttribute('data-plakakodu')
);
}
}
);
}/*! SVG Türkiye Haritası | CSS | MIT Lisans | dnomak.com */
.svg-turkiye-haritasi {
max-width: 1140px;
margin: 0 auto;
text-align: center;
}
.svg-turkiye-haritasi svg {
width: 100%;
height: auto;
}
.il-isimleri {
position: absolute;
z-index: 2;
}
.il-isimleri div {
font-family: 'Open Sans';
display: inline-block;
background: #1094F6;
color: #fff;
padding: 8px 16px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#svg-turkiye-haritasi path {
cursor: pointer;
fill: #222;
}
#svg-turkiye-haritasi path:hover {
fill: #1094F6;
}
#guney-kibris {
pointer-events: none;
}