CODEWITHSUNDEEP
javascripthtmlcss
Anuket
Anuket

Reputation: 339

Overwrite automatically generated icon

Map is generaterd automatically and map-markers are generated auromatically to the map. In HTML code generated map-marker looks like:

    <image id="Geometry_Point" cx="250.63056092843334" 
cy="233.0863010581852" r="1" preserveAspectRatio="none" x="235" y="196"
 width="32" height="37" xlink:href="http://icons.iconarchive.com/icons
/paomedia/small-n-flat/24/map-marker-icon.png" style="opacity: 1" 
fill="#000000" fill-opacity="1" stroke="#000000" stroke-opacity="1" 
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

where marker icon picture are given with link like xlink:href="link"

Is it possible tooverwrite this with CSS with new link to marker?

Upvotes: 0

Views: 47

Answers (2)

ixpl0
ixpl0

Reputation: 756

Make layer over icon with ::after css pseudo-selector Like this: css:

#Geometry_Point::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #f00; /*or your variant*/
}

Upvotes: 0

Justinas
Justinas

Reputation: 43507

CSS can't change attributes of element, use js. CSS is only for visuals.

document.getElementById('Geometry_Point').setAttribute('xlink:href', 'http://google.com')

Just make sure that no JS is already taken that value and uses it cached.

Upvotes: 1

Related Questions