Polskie Forum Użytkowników GIMP-a

Ogólne dyskusje => Języki Internetu => Wątek zaczęty przez: Blant on 21.07.2010, 17:05:43



Tytuł: Onmouseover na imagemap
Wiadomość wysłana przez: Blant on 21.07.2010, 17:05:43
Witam,
potrzebuję kodu który będzie rozjaśniał lub zmieniał kontrast wyznaczonego "kwadratu" w opcji image map gimp'a. Analogicznie oczywiście przydał by się onmouseout. Z php i css'em miałem nie wiele do czynienia dlatego nawet nie wiem jak tego szukać w internecie.

Z góry dziękuję za odpowiedź,
Pozdrawiam, Blant


Tytuł: Odp: Onmouseover na imagemap
Wiadomość wysłana przez: savaro on 17.09.2010, 18:45:08
Stwórz dwa obrazki różniące się tylko jasnością lub kontrastem w miejscu gdzie wyznaczasz "kwadrat". onMouseover będzie ustawiał obrazek 2 a onMouseout obrazek 1.

Coś takiego:

Kod:
<img src="obraz1.jpg" width="--szerokość--" height="--wysokość--"  name="obraz" border="0" usemap="#map" />
<map name="map">
<area shape="rect" coords="84,142,336,234" onmouseover='obraz.src="obraz2.jpg"' onmouseout='obraz.src="obraz1.jpg"'href="---link---" />
</map>



Tytuł: Odp: Onmouseover na imagemap
Wiadomość wysłana przez: Ravicious on 17.09.2010, 21:14:26
Pomysł savaro rozwiąże Twój problem, ale:
- w brzydki sposób,
- renderujesz kod HTML za pomocą programu do tworzenia grafiki

http://jsfiddle.net/zX9t2/ - hasło do wyszukania: "css sprites". Jeśli stworzysz dwa osobne obrazki, np. jeden zwykły, a drugi ze zmienionym kolorem, to ten drugi będzie musiał się załadować, kiedy najedziesz na niego kursorem. Niezbyt dobrze to wygląda.


Tytuł: Odp: Onmouseover na imagemap
Wiadomość wysłana przez: savaro on 17.09.2010, 22:13:19
Blantowi chodziło o image map, więc podałem. Renderujesz właściwie tylko współrzędne.
Jeśli dobrze rozumiem to chodziło mu o podświetlenie określonego fragmentu obrazka, a nie zmianę całego.

Rozwiązanie optymalne:
 div którego tłem jest cały obrazek
 w divie odnośnik którego tłem jest określony fragment obrazka + efekt hover


Tytuł: Odp: Onmouseover na imagemap
Wiadomość wysłana przez: kaef on 17.09.2010, 23:41:08
Hmm.. Sorki, że się wtrącam, ale rozwiązaniem optymalnym byłoby pierwsze rozwiązanie podane przez savaro, ale musisz do tego dodać skrypt preloadowania obrazów, wtedy będzie cacy śmigać:
http://atos.wmid.amu.edu.pl/~psi/informatyka/javascript/preload.html


Tytuł: Odp: Onmouseover na imagemap
Wiadomość wysłana przez: savaro on 22.09.2010, 22:34:10
A właściwie po co stosować image map. Tutaj efekt:http://savaro.republika.pl/diamenty/diament.html (http://savaro.republika.pl/diamenty/diament.html)

W tle może się znajdować dowolny obraz. Bez image map i preloadera, czysty css.


Tytuł: Odp: Onmouseover na imagemap
Wiadomość wysłana przez: kaef on 22.09.2010, 22:39:47
Hmm. Preloader jest potrzebny tylko po to, żeby uchronić się przed lagami. Twoja prawda jest taka samo Twojsza jak i mojsza;)


Tytuł: Odp: Onmouseover na imagemap
Wiadomość wysłana przez: savaro on 22.09.2010, 22:54:15
Możliwe, tyle że oba obrazki ładują się już przy pierwszym otwarciu strony, a nie dopiero po najechaniu myszką


Tytuł: Odp: Onmouseover na imagemap
Wiadomość wysłana przez: kaef on 22.09.2010, 23:08:34
A jeśli tak jest jak mówisz, to preloader nie potrzebny;)


Tytuł: Odp: Onmouseover na imagemap
Wiadomość wysłana przez: savaro on 23.09.2010, 17:04:56
Wszystko wskazuje na to że tak właśnie jest.
Jeżeli otworzę stronę i jeszcze przed najechaniem na obrazek, odłączę połączenie z internetem, nie ma najmniejszych problemów ze zmianą obrazka na inny. Również w plikach pobranych przez przeglądarkę dostępne są od razu wszystkie obrazki. Sprawdzałem na trzech różnych przeglądarkach.

Nie sprawdzałem czy tak samo jest jeśli obrazki umieszczane są w html a nie jak w tym przypadku w css.


Tytuł: Odp: Onmouseover na imagemap
Wiadomość wysłana przez: kaef on 23.09.2010, 17:14:23
Wniosek z tego taki, że css jest dobry na wszystko:D

A z drugiej strony, to autor widać więcej się nie pojawił, nawet żeby powiedzieć dziękuję..