Click and hold image without changing the hover into another image

Hello people,

I’m trying to make a regional map in html and javascript, I’m sure how to do the following:

to hover over the city, he should change the city’s image with another clearer, and clicking in the city he should get a darker color than the picture when we hover.

Until there all right, but when I click it gets darker image and move the mouse in another city he immediately removes the dark image and return to the clearer picture.

How to keep the image when I click on it and still the effect of passing the mouse?

Codigo HTML

<div id="mapa"><im  border="0" src="http://Caminho_da_IM...rao_sem_cor.gif" id="mapaimag" alt="Mapa" width="200" height="200" usemap="#Map" />
<map name="Map" id="Map">
 
<area href="#" onclick="mapa_on_1();" onMouseover="mapa_over_1();"  shape="poly" coords="111,187,113,198,110,174,113,172,110,150,115,161,114,158,118,188,120,155,124,155,132,157,134,156,137,157,139,155,140,157,137" alt="cidade1l" />
 
<area href="#" onclick="mapa_on_2();" onMouseover="mapa_over_2();"  shape="poly" coords="41,96,191,98,147,110,198,109,153,112,157,184,158,117,158,121,144,131,157,132,156,135,177,138,154,129,157,137,158,142" alt="cidade2l" />

Codigo JAVASCRIPT

function mapa_on_1() 
{
 
document.getElementById("mapaimag").src="http://IMAGEM_1_click.gif";
}
 
 
function mapa_over_1()
{
document.getElementById("mapaimag").src="http://IMAGEM_1_over.gif";
}
 
 
 
function mapa_on_2() 
{
 
document.getElementById("mapaimag").src="http://IMAGEM_2_click.gif";
}
 
 
function mapa_over_2()
{
document.getElementById("mapaimag").src="http://IMAGEM_2_over.gif";
}

java code if I’m not mistaken is old
Please guys, help me,
Can anyone give me a hint how to achieve this. I see in some code they use (style = "opacity:). but I have no idea if it’s used two images of deferent color or not and how to use My Duvia is Keeping the image when I click on it and still the effect of spending mouse? with opacity or not
Note: I am new to java

Hi Jaysona,

I am new to java as well but maybe this can be of help. Use event.stoppropagation() in relevant event to stop subsequent behaviours

For example if you use

$(document).on('click', '.cityobject', function(event){
function mapa_on_1()
event.stoppropagation() 
})

hello johnhuichen

thank you for returning,

I tried using Event.stopPropagation () but it did not work, I think I inserted the wrong code.

you can show me how I can insert Event.stopPropagation () in the above code?

Thank you!

What you have given above is not complete. I can’t see the event that triggers hover behaviour or click behaviour from what you have written down above.

There should be an click event and an hover event that utilize mapa functions. Can you search in your source code and show me these codes? Then I will be able to help.

hello johnhuichen
I had to give space between each opening and closing of each HTML code, because the forum did not accept the html code.

where you> and <has room.

if they do not understand the code, send me your email I will send to you the code.

follows the complete code (not put the css code because it changes so border, color …)

two things that I can not make it work.

Click on city and stay clicked, even when step the mouse over other cities. (when I pass the mouse over another city, the city chosen ceases to be clicked)

the other thing is

When we move the mouse over the image should appear the title of the city,

but the title appears it on top of the div, not on top of the city that spent the mouse,

use (data-toggle = “popover”) but can not run on top of the city because of the mapping (coords =) when closing it causes the coordinates turn text

CODE HTML

<
!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”><
html><
head><
title>title - Mapa<
/title><
meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8”>

<
meta name=“viewport” content=“width=device-width, initial-scale=1”>
<
link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css”>
<
script s r c=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”><
/script>
<
script s r c=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js”><
/script>

<
link type=“text/css” rel=“stylesheet” href=“http://paste/map.css” />
<
script language=“JavaScript” type=“text/javascript” src=“http://paste/map.js”>
<
/script>

<
/head><
body>

<
div id=“corpo”>

<
div id=“mapa”>< i m g border=“0” src =“http://path_of_the_main_i m a g e.gif” id=“mapaimag” alt=“Mapa” width=“200” height=“200” usemap=“#Map”/>
<
map name=“Map” id=“Map”

<
area href=“#” onclick=“mapa_on_1();” onMouseover=“mapa_over_1();” shape=“poly” title=“city1” data-toggle=“popover” data-trigger=“hover” data-content=“” coords=“112,186,114,197,111,173,114,171,111,149,116,160,115,157,119,187,121,154,125,154,133,156,135,155,138,156,140,154,141,156” alt=“city1”/>

<
area href=“#” onclick=“mapa_on_2();” onMouseover=“mapa_over_2();” shape=“poly” title=“city2” data-toggle=“popover” data-trigger=“hover” data-content=“” coords=“41,96,191,98,147,110,198,109,153,112,157,184,158,117,158,121,144,131,157,132,156,135,177,138,154,129,157,137,158,142” alt=“city2”/>

<
/map><
/div>

<
div id=“descricao1”><
div class=“titulo”>city1<
/div>
<
br><
strong

sub title<
/strong
city1
<
/div>

<
div id=“descricao2”><
div class=“titulo”>city2<
/div>
<
br><
strong>sub title<
/strong>city2
<
/div>

<
/div>
<
/body><
/html>

-----_-

CODE javascript

                                   /*javascript*/

image_list = Array(
‘http://path_of_the_main_image_city_1_Click.gif’,
‘http://path_of_the_main_image_city_1_Over.gif’,
http://http://path_of_the_main_image_city_2_Click’,
‘http://path_of_the_main_image_city_2_Over.gif’);
imagem_qtd = image_list.length;

for (i = 0; i <image_qtd; i++) {
var preload = new Image();
preload.src = image_list[i];
}
/click function/

function mapa_on_1()
{

	document.getElementById("mapaimag").src="http://path_of_the_main_image_city_1_Click.gif";
	document.getElementById("descricao1").className = 'on';
	}

function mapa_on_2()
{
document.getElementById(“mapaimag”).src=“http://path_of_the_main_image_city_2_Click.gif”;
document.getElementById(“descricao2”).className = ‘on’;
}

                                   /*over function*/

function mapa_over_1()
{
document.getElementById(“mapaimag”).src=“path_of_the_main_image_city_1_Over.gif”;

}

function mapa_over_2()
{
document.getElementById(“mapaimag”).src=“path_of_the_main_image_city_2_Over.gif”;
}
/popover function/

$(document).ready(function(){
$('[data-toggle="popover"]').popover({html:true});   

});

Hey Jasona, the positioning of the title is outside my experience I am afraid, because I haven’t worked with coordinates before :frowning:

For the first problem, it’s much clearer now that you provided the source code. All the functions mapa_on_1(), mapa_over_1(), mapa_on_2(), mapa_over_2() only affect the element ‘#mapaimag’, which I assume is the entire map image?

When you said that when you click on city the image gets darker, and after that action if you hover over another city it changes to a clear picture, that’s because your code is only designed for 4 scenarios:

  1. clicking on city 1 once
  2. hovering over city 1 once
  3. clicking on city 2 once
  4. hovering over city 2 once

To make sure that city 1 remembers that it has been clicked, you have to do more work to separate city 1 image from the map. Same for city 2.

Also if you have a live demo online, a lot of more experience people on the forum here will provide input. I think many of them didn’t answer because the question wasn’t very obvious to them.

It is a map with various scenarios, more than 4 scenarios, I put two to simplify the codio the forum.

even with various scenarios does not continue the same way, I need some function to fix the image darker when I click. and customize the title.

unfortunately I do not have it online.

Thanks for the support

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.