Odpowiedz

Intro o nietypowym kształcie z :hover

Łukasz Piwowar DigitalZone -
Interactive Agency

Temat: Intro o nietypowym kształcie z :hover

Posiadam intro które składa się z dwóch obrazków. Linia dzieląca je jest pod skosem. I tutaj pojawia się mój problem. Jak mogę uzyskać efekt hover w tym przypadku ? Chodzi o to że po najechaniu na jedną z połówek nabiera ona barw.

Obrazek

Łukasz Piwowar edytował(a) ten post dnia 13.06.11 o godzinie 09:04

13.06.2011, 09:04

Link do wypowiedzi

| Cytuj

Krzysztof Tomasz Jasiak multimedia, grafika,
internet, IT -
chętnie spróbuje
nowy...

Temat: Intro o nietypowym kształcie z :hover

dla każdego z elementów nadajesz hover
łączysz wszystko w div/span i nadajesz mu hover

najlepiej byłoby abyś pokazał

13.06.2011, 09:13

Link do wypowiedzi

| Cytuj

Cezary H. Insignia - front-end
developer

Temat: Intro o nietypowym kształcie z :hover

najlepiej zmapuj sobie obrazek

13.06.2011, 09:34

Link do wypowiedzi

| Cytuj

Rafał Krupiński .koder

Temat: Intro o nietypowym kształcie z :hover

Był już podobny wątek:
http://www.goldenline.pl/forum/2418201/efekt-hover-na-...

13.06.2011, 09:37

Link do wypowiedzi

| Cytuj

Łukasz Piwowar DigitalZone -
Interactive Agency

Temat: Intro o nietypowym kształcie z :hover

http://figuryprzestrzenne.pl/gryzyna/

tutaj można zobaczyć zmapowany obrazek. Niestety nadal nie wiem jak zrobić by po najechaniu zmienił się na inny.

14.06.2011, 18:53

Link do wypowiedzi

| Cytuj

Mariusz Głowala Programista
Front-end

Temat: Intro o nietypowym kształcie z :hover

Na każdym area w mapie możesz zrobić sobie zdarzenia onmouseover i onmouseout, które będą podmieniały obrazek wedle uznania.

Na Twoim przykładzie:



<img src="./g_files/intro.jpg" width="1200" height="900" border="0" usemap="#Map" id="mapImg">

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

  <area shape="poly" coords="217,868,362,741,1102,-7,122,-1" href="http://figuryprzestrzenne.pl/gryzyna/#" title="Gryzyna" onmouseover="grazyna()" onmouseout="intro()">

  <area shape="poly" coords="217,870,344,757,1093,1,1126,1,1124,812" href="http://figuryprzestrzenne.pl/gryzyna/#" title="Kort" onmouseover="kort()"  onmouseout="intro()">

</map>

<script type="text/javascript">

function intro() {

	document.getElementById('mapImg').src = './g_files/intro.jpg';

}

function grazyna() {

	document.getElementById('mapImg').src = 'grazyna.jpg';

}

function kort() {

	document.getElementById('mapImg').src = 'kort.jpg';

}

</script>