Change marker on html element hover

[tibor.marias]

I would like to change the icon of a marker while hovering on a HTML element. My markers are generated in a PHP array, which looks like this:

$map_flats[] = array(
'title' => $price,
'image' => $file_name,
'type' => '',
'price' => $address,
'address' => $address,
'bedrooms' => $bedrooms,
'bathrooms' => $maxguests,
'area' => $area,
'position' => [
    'lat' => $lat,
    'lng' => $lng
],
'markerIcon' => 'marker-green.png'
);

I would like to change the 'marker-green.png' to 'marker-blue.png' while hovering a DIV.

Could you tell me a possible way of doing that?

Thanks in advance,

Tibor

[broj1]

Depends on how you display the icon. One way of doing it is using a CSS background property:

div.ofsomeclass {
    background-color: #FFFFFF
    background-image: url("some/location/marker-green.png");
    background-repeat: no-repeat;
    background-position: letf top;
}

Now define the hover pseudo class:

div.ofsomeclass:hover {
    background-image: url("some/location/marker-blue.png");
}

Should work OK in modern browsers (not IE6/IE7).

There are also other ways, like swaping images using jquery (i.e. see http://stackoverflow.com/questions/17507870/jquery-image-changing-on-hover).

[jkon]

because view has nothing to do with a programming lannguage (other than it populates it) ... this question would be great for the CSS section of dani . But to be honest maybe there are more in the background to this , maybe the creator of this trhead don't understand what PHP Html and CSS is , yet . It's time to learn