Ł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

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ł

konto usunięte

Temat: Intro o nietypowym kształcie z :hover

najlepiej zmapuj sobie obrazek

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-...
Ł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.
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.

Następna dyskusja:

Problem z hover w Cufon




Wyślij zaproszenie do