Podświetlanie "Kordów" po najechaniu myszką

Question

Witam, pisałem już posty na podobny temat ale niestety nie znalazłem odpowiedzi, dlatego też piszę go jeszcze raz lecz myślę że w sposób lepszy dla osoby pomagającej ponieważ wklejam kod z podglądem na Tryit Editor (Po wejściu nacisnąć zielony przycisk RUN żeby wczytało kod), a więc do rzeczy.

LINK

A więc tak jak widzicie, w Tryit Editor (link powyżej) mam kratki, jak możecie zauważyć po najechaniu myszką na kratkę pokazuje się dymek (title) z numeracją kratek (1,1 1,2 1,3 itd)

Pytanie moje brzmi:

W jaki sposób zrobić tak aby po najechaniu myszką na kratkę, oprócz numeracji (1,1 1,2 1,3 itd) kratka się podświetlała? mam nadzieję że wiecie o co mi chodzi.

 

Comments

Link nie działa wklej kod na codepen

Hover backgroud-color

---

Próbowałem z hover, ale nie wychodziło, a link już podmieniłem na działający

---

Co to są  kordy?

---

Najprawdopodobniej chodziło mu o słowo angielskie coordinates (współrzędne), więc nazwał to "kordami". Tak się w grach chyba mówi na to, gdzie kto jest, np. na polu o x=0, y=0.

---

A dlaczego po prostu nie napisał w takim razie "współrzędne" tyko użył jakiegoś niezrozumiałego dla wszystkich szyfru?

Answer 1

#pos1, #pos2 {
    position:absolute;
}
#positional {
    width:300px;
    height:100px;
    position:relative;
    margin-left:auto;
    margin-right:auto;
}

img { 
	width:272px;
	height:92px;
}

<map name="Map" id="Map">

   <area shape="rect" coords="0,0,68,46" title="0,0"/>
   <area shape="rect" coords="68,0,136,46" title="1,0"/>
   <area shape="rect" coords="136,0,204,46" title="2,0"/>
   <area shape="rect" coords="204,0,272,46" title="3,0"/>
 
   <area shape="rect" coords="0,46,68,92" title="0,1">
   <area shape="rect" coords="68,46,136,92" title="1,1">
   <area shape="rect" coords="136,46,204,92" title="2,1">
   <area shape="rect" coords="204,46,272,92" title="3,1">

</map>

<div id="positional">

   <img id="pos1" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" usemap="#Map" />
   <img id="pos2" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" usemap="#Map" />

</div>

var width_img = document.getElementById('pos1').width;
var height_img = document.getElementById('pos1').height;

document.addEventListener('mouseover', function(e) {
 
    if(e.target.tagName === 'AREA') {
         
        var coord = (e.target.coords).split(',');
         
        document.getElementById('pos1').style.clipPath = "inset("+coord[1]+'px '+(width_img-coord[2])+'px '+(height_img-coord[3])+'px '+coord[0]+'px'+")";
        document.getElementById('pos1').style.zIndex = 100;
        document.getElementById('pos1').style.background = 'orange';
         
    } else {
        document.getElementById('pos1').style.background = '';
    }
 
}, false);

Inna wersja:

#pos1, #pos2 {
	position:absolute;
}
#positional {
	width:274px;
	height:94px;
	position:relative;
	margin-left:auto;
	margin-right:auto;
	border:1px solid black;
	padding:10px 10px 10px 10px;
	background:tomato;
}
img {
	width:272px;
	height:92px;
	background:darkolivegreen;
}

<map name="Map" id="Map">

</map>

<div id="positional">

   <img id="pos1" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" usemap="#Map" />
   <img id="pos2" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" usemap="#Map" />

</div>

var height_img = (document.getElementById('pos1').height);
var width_img = (document.getElementById('pos1').width);

var large_grid_width = 136; 
var large_grid_height = 46;

var height_grid = 0;
var width_grid = 0;

var iterator1 = 0;
var iterator2 = 0;

for(var i=0;i<height_img;i+=large_grid_height) {
	width_grid = 0;
	iterator2 = 0;
	height_grid += large_grid_height;
	
	for(var j=0;j<width_img;j+=large_grid_width) {
		
		width_grid += large_grid_width;
		var area = document.createElement('area');
		area.coords = (j)+','+(i)+','+width_grid+','+height_grid;
		
		area.title = j+' '+i+' | '+iterator2+' '+iterator1;
		document.getElementById('Map').appendChild(area);
		
		iterator2++;
	}
	iterator1++;
}

document.addEventListener('mouseover', function(e) {

    if(e.target.tagName === 'AREA') {
         
        var coord = ((e.target.coords)).split(',');
		
        document.getElementById('pos1').style.clipPath = "inset("+coord[1]+'px '+(width_img-parseInt(coord[2]))+'px '+(height_img-parseInt(coord[3]))+'px '+coord[0]+'px'+")";
		document.getElementById('pos1').style.zIndex = 100;
	    document.getElementById('pos1').style.background = 'orange';
         
    } else {
        document.getElementById('pos1').style.background = '';
    }
 
}, false);

Za pomocą zmiennych large_grid_width i large_grid_height możesz zmienić sobie szerokość i wysokość kratki. Jeśli masz w CSS dla image (img) ustawione np. takie wymiary: width:100px;height:100px;, to możesz dać tym zmiennym po 10px szerokości i wysokości, ponieważ 100/10=10, więc wychodzi liczba całkowita. Jeśli nie wyjdzie całkowita, to wtedy ostatnie kratki będą tak jakby przycięte.

Zmienne globalne na lokalne i tego typu elementy możesz sobie pozamieniać sam, jeśli widzisz gdzieś, że lepiej byłoby użyć let zamiast var i odwrotnie, a może nawet const, to jak najbardziej dokonaj takiej edycji.

Comments

Dokładnie o to mi chodziło! Jesteś wielki! :) Dzięki i pozdrawiam :D

Answer 2

Nadaj klasy do elementów i dopisz w CSS element:hover {color: kolor} sprawdź i napisz  czy działa i wyślij kod

Comments

właśnie nie działa z hover, dla tego też zgłosiłem sie tutaj po pomoc

---

nie wiem co to ma robic opisz to jeszcze raz bo w kodzie jest jakaś mapa jakieś zdjęcie i td nie wiem co chcesz z tego zrobić...

---

najprościej mówiąc, najeżdżasz myszką na kratkę 1 i pokazuje się numerek kratki (czyli 1,1) chcę żeby jeszcze ta kratka się podświetlała albo zmieniała kolor

---

ale ty jesteś świadomy że nie ma w kodzie kratek? :D

---

chyba że znasz inny pomysł żeby zrobić takie kordy i podświetlanie na zdjęciu to chętnie wysłucham

---

jestem świadomy, kratki są na zdjęciu

---

dobra ja tam nic nie widze, a wiec jesli to musi byc zdj to robisz obliczenie np. 3x3 kratki to w ten czas, zdj 900x900 np. dzielisz czyli 300x300 = 1 kratka robisz przezroczyste bloki obok siebie 3x3 po 300x300px i przedzielasz im id.

Answer 3

Może to: szachownica