GoldenLine
Zaloguj się
Łukasz Piwowar

Ł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
Link do wypowiedziLink

konto usunięte

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ł
Link do wypowiedziLink

konto usunięte

Temat: Intro o nietypowym kształcie z :hover

najlepiej zmapuj sobie obrazek
Link do wypowiedziLink

konto usunięte

Temat: Intro o nietypowym kształcie z :hover

Był już podobny wątek:
http://www.goldenline.pl/forum/2418201/efekt-hover-na-...
Link do wypowiedziLink
Łukasz Piwowar

Ł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.
Link do wypowiedziLink
Mariusz Głowala

Mariusz Głowala Senior Software
Developer

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>


Możesz też oczywiście nie tworzyć funkcji tylko zmianę wpisać bezpośrednio.
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

Problem z hover w Cufon




Wyślij zaproszenie do
Anuluj