GoldenLine
Zaloguj się

konto usunięte

Temat: zmiana border po najechaniu

Witam. mam następujący element:

<img src="xxx" />

w css okreslony kolor obramowania, jego styl i grubosc.

Chcialbym aby po najechaniu kursorem na element img zmienial sie tylko kolor obramowania, ale po zdjeciu kursora z elementu ma sie on plynnie zmieniac na defultowy ustawiony w css.

chodzi o cos podobnego jak tu:

http://www.jeremycowart.com/

wiem ze to flash. Ale czy da sie takie cos osiagnac w js?Piotr Burant edytował(a) ten post dnia 15.04.10 o godzinie 19:44
Link do wypowiedziLink

konto usunięte

Temat: zmiana border po najechaniu

Do zmiany koloru w jednym kroku wystarczy owinąć element w tag linku 
<a class="img" href="#"><img></a>

i zdefiniować speudoklasę hover
a.img img { border: solid 1px #000; }

a.img:hover img { border-color: #00F; }


Płynne przejście można zrobić w JS. Najlepiej skorzystać z jQuery.
Link do wypowiedziLink
Jarek Tkaczyk

Jarek Tkaczyk www.GoHolidays.pl -
siła napędowa

Temat: zmiana border po najechaniu

Wystarczy sam js np. jQuery + jQueryUI:



<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script type="text/javascript">

	$(function() {

		$(".img").mouseover(function(){

				$(this).stop().animate({borderTopColor: '#4AFFF6', borderBottomColor: '#4AFFF6', borderLeftColor: '#4AFFF6', borderRightColor: '#4AFFF6' }, 500);

		});

		$(".img").mouseout(function(){

				$(this).stop().animate({borderTopColor: 'defaultColor', borderBottomColor: 'defaultColor', borderLeftColor: 'defaultColor', borderRightColor: 'defaultColor' }, 500);

		});

	});

</script>





<style type="text/css">

	.img { border: 2px defaultColor solid; }

</style>





<img src="Image" class="img" alt="" />


Można też użyć YUI i pewno inne biblioteki też dadzą radę.
Wiadomo, że całe jQuery i jQueryUI do takiej jednej funkcjonalności to raczej za dużo kodu, ale to pozostawiam tobie
Link do wypowiedziLink

konto usunięte

Temat: zmiana border po najechaniu

Wielkie dzieki. probowalem z .animate i na ff mi dzialalo a na ie nie. Ale twoj skrypt dziala jak powinien :) Dzieki!
Link do wypowiedziLink

konto usunięte

Temat: zmiana border po najechaniu

Maciej Chałapuk:
Do zmiany koloru w jednym kroku wystarczy owinąć element w tag linku

Bradzo zła praktyka.

Kliknięcie w takie coś wysyła stronę na początek.Sławomir Zimosz edytował(a) ten post dnia 25.04.10 o godzinie 16:05
Link do wypowiedziLink

konto usunięte

Temat: zmiana border po najechaniu

Sławomir Zimosz:

Bradzo zła praktyka.

Kliknięcie w takie coś wysyła stronę na początek.Sławomir Zimosz edytował(a) ten post dnia 25.04.10 o godzinie 16:05

Oj chyba się czepiasz :)

Tego rodzaju interakcje występują zwykle na klikalnych rzeczach, więc zamiast hasza wstawiamy normalny link. Jak chcemy nieklikalne, to można zrobić coś takiego:
<a class="img" href="#@" onclick="return false;"><img ...></a>


Nie można zrobić tego inaczej, jeżeli ma działać w IE6 bez JavaScriptu.
Link do wypowiedziLink

konto usunięte

Temat: zmiana border po najechaniu

Maciej Chałapuk:
Oj chyba się czepiasz :)

Nie czepiam się. Jestem kilka dni po przetrzepaniu bip'ów wszystkich samorządów wojewódzkich. Informacji do atrykułu szukałem...
href="#@" onclick="return false;"

O, to już lepiej. Jeszcze w css'ie kursor trzeba by zmodyfikować.
Nie można zrobić tego inaczej, jeżeli ma działać w IE6 bez JavaScriptu.

Pytanie czy trzeba ;> A jak już to można dać kotwicę do obrazka. Też będzie strona latać ale mniej głupio.
Link do wypowiedziLink
Szymon Piłkowski

Szymon Piłkowski Senior JavaScript
Developer

Temat: zmiana border po najechaniu

A co z podzialem HTML - struktura, JS - zachowanie?

Dlaczego nieklikalny obrazek mialby byc owiniety tagiem linku? Tylko po to, zeby symulowac jedno z zachowan charakterystycznych dla linku? <blink> To praktyka rodem sprzed kilku lat</blink>.

Dlaczego mialoby dzialac bez JS? W koncu pytanie zostalo zadane na grupie JavaScript, a efekt "plynnego przejscia" i tak jest bez JS niewykonalny.

"Plynna degradacje" mozna zapewnic w CSS bez uzycia bez znacznika "A" dla wszystkiego poza IE6; z czego wynika, ze efektu nie zobacza jedynie uzytkownicy IE6 z wylaczonym JS. Wylaczenie JS oznacza, ze user jest w pewien sposob swiadomy tego, co sie dzieje w necie -- nie sadze, zeby taki user uzywal IE6. ;)
Link do wypowiedziLink

konto usunięte

Temat: zmiana border po najechaniu

Szymon Piłkowski:
A co z podzialem HTML - struktura, JS - zachowanie?
...
Tutaj raczej chodzi o CSS - wygląd :) W normalnych przeglądarkach wystarczy dać pseudoklasę hover. Żeby działało w IE6 trzeba owinąć w tag linku i na nim zrobić pseudoklasę.

Czy warto to robić? To chyba już każdy sam musi podjąć decyzję. Ja wolę nie używać JS do programowania wyglądu.Maciej Chałapuk edytował(a) ten post dnia 29.04.10 o godzinie 11:01
Link do wypowiedziLink
Tomasz Nowakowski

Tomasz Nowakowski frontend developer

Temat: zmiana border po najechaniu

To że element reaguje na najechanie należy do warstwy zachowania - JS, a wygląd takiej interkacji od warsty wizualizacji - CSS. Pseudoklasa hover jest skrótem pozwalającym na określenie wyglądu bez konieczności implementacji zachowania.
Jeśli twórcy przeglądarki nie dali nam takiego skrótu to trudno, trzeba pisać JS. A dokładniej raz napisać, albo wziąć gotowca i używać we wszystkich projektach.
Wstawianie elementów np. linków nie tam gdzie trzeba powoduje, że strona jest dużo trudniejsza w interpretacji dla innych programów. Co utrudnia życie np. niewidomym, osobom korzystającym z telefonów bez ekranów dotykowych, robotom wyszukiwarek i pewnie mnóstwo innych.
Link do wypowiedziLink
Ivo Bogucki

Ivo Bogucki Grafik, Koder
HTML/CSS/JS /
tanieprojektowanie.c
om / avan...

Temat: zmiana border po najechaniu

Jarek Tkaczyk:
Wystarczy sam js np. jQuery + jQueryUI:



<script type="text/javascript" charset="utf-8" 	[/quote]> src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>[quote]<script type="text/javascript" charset="utf-8" 	[/quote]> src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>[quote]<script type="text/javascript">

	$(function() {

		$(".img").mouseover(function(){

				$(this).stop().animate({borderTopColor: '#4AFFF6', borderBottomColor: '#4AFFF6', borderLeftColor: '#4AFFF6', borderRightColor: '#4AFFF6' }, 500);

		});

		$(".img").mouseout(function(){

				$(this).stop().animate({borderTopColor: 'defaultColor', borderBottomColor: 'defaultColor', borderLeftColor: 'defaultColor', borderRightColor: 'defaultColor' }, 500);

		});

	});

</script>





<style type="text/css">

	.img { border: 2px defaultColor solid; }

</style>





<img src="Image" class="img" alt="" />


Można też użyć YUI i pewno inne biblioteki też dadzą radę.
Wiadomo, że całe jQuery i jQueryUI do takiej jednej funkcjonalności to raczej za dużo kodu, ale to pozostawiam tobie
...a jak to zastosować dla znacznika 'a' i zmiany stylu css 'background'? Po najechaniu pokazywałoby się tło ustalone dla hover.
Link do wypowiedziLink
Jarek Tkaczyk

Jarek Tkaczyk www.GoHolidays.pl -
siła napędowa

Temat: zmiana border po najechaniu

Ivo Bogucki:
Jarek Tkaczyk:
...a jak to zastosować dla znacznika 'a' i zmiany stylu css 'background'? Po najechaniu pokazywałoby się tło ustalone dla hover.

zwykły css, dla <a> zadziała nawet w IE jak już wiele razy się rzekło.

w najprostszy sposób w css:
a {background: #eee}
a:hover {background: #ddd}

możesz tu ustawić dowolny styl.

Dla jasności zwróć uwagę na kolejności pseudo class http://www.w3schools.com/CSS/css_pseudo_classes.aspJarek Tkaczyk edytował(a) ten post dnia 13.07.10 o godzinie 00:00
Link do wypowiedziLink
Ivo Bogucki

Ivo Bogucki Grafik, Koder
HTML/CSS/JS /
tanieprojektowanie.c
om / avan...

Temat: zmiana border po najechaniu

Jarek Tkaczyk:
Ivo Bogucki:
Jarek Tkaczyk:
...a jak to zastosować dla znacznika 'a' i zmiany stylu css 'background'? Po najechaniu pokazywałoby się tło ustalone dla hover.

zwykły css, dla <a> zadziała nawet w IE jak już wiele razy się rzekło.

w najprostszy sposób w css:
a {background: #eee}
a:hover {background: #ddd}

możesz tu ustawić dowolny styl.

Dla jasności zwróć uwagę na kolejności pseudo class http://www.w3schools.com/CSS/css_pseudo_classes.aspJarek Tkaczyk edytował(a) ten post dnia 13.07.10 o godzinie 00:00
Nie nie, chodzi o ten efekt łagodnego przejścia. Bo hover to mam użyty, tylko że przy najechaniu pokazuje się od razu styl hovera, a ma płynnie w niego przejść.
Link do wypowiedziLink
Marcin Kubala

Marcin Kubala

Temat: zmiana border po najechaniu

Według oficjalnej dokumentacji metoda .animate() sprawdza się dla właściwości które przyjmują wartości liczbowe.

Możliwe, że dlatego płynna zmiana koloru za pomocą tej metody działa pod FF, a pod IE już nie - podejrzewam, że FF jeszcze potrafi zinterpretować wartość szesnastkową jako liczbę, natomiast IE traktuje to jako łańcuch znaków.. ?

Jednak nie załamujmy rąk! ;)
Istnieje coś takiego jak 'interface elements for jQuery', które przeładowuję tę metodę i pozwala podawać nawet łańcuchy znaków (np. 'red' albo 'blue') jako wartości parametrów animacji.
Ponadto potrafi animować element do klasy, tzn. zamiast w kodzie podawać wartości dla borderów możemy stworzyć w css klasę o takich i takich właściwościach (obramowanie, tło, wymiary) i animować element do takiej postaci, jaka jest zdefiniowana w arkuszu.

http://interface.eyecon.ro/docs/animate
Link do wypowiedziLink
Ivo Bogucki

Ivo Bogucki Grafik, Koder
HTML/CSS/JS /
tanieprojektowanie.c
om / avan...

Temat: zmiana border po najechaniu

Marcin K.:
Według oficjalnej dokumentacji metoda .animate() sprawdza się dla właściwości które przyjmują wartości liczbowe.

Możliwe, że dlatego płynna zmiana koloru za pomocą tej metody działa pod FF, a pod IE już nie - podejrzewam, że FF jeszcze potrafi zinterpretować wartość szesnastkową jako liczbę, natomiast IE traktuje to jako łańcuch znaków.. ?

Jednak nie załamujmy rąk! ;)
Istnieje coś takiego jak 'interface elements for jQuery', które przeładowuję tę metodę i pozwala podawać nawet łańcuchy znaków (np. 'red' albo 'blue') jako wartości parametrów animacji.
Ponadto potrafi animować element do klasy, tzn. zamiast w kodzie podawać wartości dla borderów możemy stworzyć w css klasę o takich i takich właściwościach (obramowanie, tło, wymiary) i animować element do takiej postaci, jaka jest zdefiniowana w arkuszu.

http://interface.eyecon.ro/docs/animate
Ooo dzięki, chyba jesteśmy co raz bliżej celu :)
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

Zmiana arkusza CSS w JS




Wyślij zaproszenie do
Anuluj