Temat: wymiana obrazu po najchaniu myszą.

A więc mamy obraz format: png, jpg, gif. Chodzi o wymianę obrazu po najechaniu na niego myszką sama wymiana bez linków i dodatków.

Pytanie jak, szukałem ale nie znalazłem.

Z góry wielkie dzięki.

konto usunięte

Temat: wymiana obrazu po najchaniu myszą.

hm...


$('img.doZamiany').hover(
function()
{
$(this).attr('src','nowy-obrazek.jpg');
}
);

<img src="stary-obrazek.jpg" class="doZamiany" />



Coś takiego. Pisane z palca ale nie widzę literówek :D

PS: Ghana :(

Edit: jednak nie tak, tzn. jeśli chcesz zrobić by było po najechaniu nowy, po zjechaniu stary to będzie to coś na styl:


$('img.doZamiany')
.mouseover(
function() {
var src = $(this).attr('src').match(/[^\.]+/) + '-m.jpg';
$(this).attr('src', src);
})
.mouseout(function() {
var src = $(this).attr('src').replace('-m', '');
$(this).attr('src', src);
});



Czyli teraz obrazki o klasie doZamiany będzie zmieniać w ten sposób, że jak masz np. <img src="obrazek.jpg"> to po najechaniu wczyta <img src="obrazek-m.jpg">Krystian Podemski edytował(a) ten post dnia 02.07.10 o godzinie 23:30

konto usunięte

Temat: wymiana obrazu po najchaniu myszą.

Krystian Podemski:

Rozumiem ze podany przez Ciebie przyklad to byl po prostu dobry zart tak? :)
Chcesz mi powiedziec ze do zrobienia prostego przelacznika obrazkow na mouseover zaciagniesz cala biblioteke jquery ????

- ejj stary, musze przewiezc szafke na drugi koniec miasta
- spoko, masz tutaj TIRa z dwoma przyczepami

Serio.. jesli juz starasz sie podac przyklad, to chociaz z taki wiesz, hm... no... sensowny ;)

Jesli kolega uzywa i tak bibliotek jQuery, to fakt, mozna tak zrobic, ale jesli tego nie robi (a skoro ma problem z tak podstawowa rzecza, zapewne nie bardzo nawet wie co to jest), to takie rozwiazania po prostu nie powinny byc sugerowane... ja wiem, lenistwo. ehh...

konto usunięte

Temat: wymiana obrazu po najchaniu myszą.

Żarty to Ty sobie kolego robisz robiąc offtop w temacie. Jest rozwiązanie, na PM poszła pełna solucja więc jaki widzisz problem?

Jasne, że można zrobić np. tak:


#element
{
background : url(obrazek.jpg) no-repeat top left;
width: 200px; height: 200px;
}
#element:hover
{
background : url(obrazek_po_najechaniu.jpg) no-repeat top left;
}


Ale wtedy rozwiązanie traci na funkcjonalności.Krystian Podemski edytował(a) ten post dnia 02.07.10 o godzinie 23:42

Temat: wymiana obrazu po najchaniu myszą.

Andrzej Winnicki:
Krystian Podemski:

Rozumiem ze podany przez Ciebie przyklad to byl po prostu dobry zart tak? :)
Chcesz mi powiedziec ze do zrobienia prostego przelacznika obrazkow na mouseover zaciagniesz cala biblioteke jquery ????

- ejj stary, musze przewiezc szafke na drugi koniec miasta
- spoko, masz tutaj TIRa z dwoma przyczepami

Serio.. jesli juz starasz sie podac przyklad, to chociaz z taki wiesz, hm... no... sensowny ;)

Jesli kolega uzywa i tak bibliotek jQuery, to fakt, mozna tak zrobic, ale jesli tego nie robi (a skoro ma problem z tak podstawowa rzecza, zapewne nie bardzo nawet wie co to jest), to takie rozwiazania po prostu nie powinny byc sugerowane... ja wiem, lenistwo. ehh...

wiem czym jest jquery już jedno mam na www. Wcześniej było zainstalowane coś ala front page :

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Nowa strona 1</title>
<script language="JavaScript" fptype="dynamicanimation">
<!--
function dynAnimation() {}
function clickSwapImg() {}
//-->
</script>
<script language="JavaScript1.2" fptype="dynamicanimation" src="file:///C:/Program%20Files/Microsoft%20Office/OFFICE11/fpclass/animate.js">
</script>
</head>

<body onload="dynAnimation()" language="Javascript1.2">

<p>
<a onmouseover="var img=document['fpAnimswapImgFP1'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsrc:img.getAttribute?img.getAttribute('lowsrc'):img.src;" onmouseout="document['fpAnimswapImgFP1'].src=document['fpAnimswapImgFP1'].imgRolln" href="javascript:void(0)">
<img border="0" src="file:///C:/Documents%20and%20Settings/AAA/Pulpit/Nowy%20folder/images/next.gif" width="71" height="33" id="fpAnimswapImgFP1" name="fpAnimswapImgFP1" dynamicanimation="fpAnimswapImgFP1" lowsrc="file:///C:/Documents%20and%20Settings/Asia/Pulpit/Nowy%20folder/images/prev.gif"></a></p>

</body>

</html>

Jednak www nie przechodziło Walidacji przez TO.

konto usunięte

Temat: wymiana obrazu po najchaniu myszą.

Krystian Podemski:
Żarty to Ty sobie kolego robisz robiąc offtop w temacie. Jest rozwiązanie, na PM poszła pełna solucja więc jaki widzisz problem?

Jasne, że można zrobić np. tak:


#element
{
background : url(obrazek.jpg) no-repeat top left;
width: 200px; height: 200px;
}
#element:hover
{
background : url(obrazek_po_najechaniu.jpg) no-repeat top left;
}


Ale wtedy rozwiązanie traci na funkcjonalności.Krystian Podemski edytował(a) ten post dnia 02.07.10 o godzinie 23:42
He? Na odwrót jest raczej :-) Choćby dlatego, że mało kto wyłącza obsługę CSS, podczas gdy JavaScript może zdarzyć się dość często. Z drugiej strony IE6 nie obsługuje :hover dla elementów innych niż link.

Ale tak czy siak, najlepszym rozwiązaniem w 99% przypadków będzie zastosowanie CSS Sprites.

Temat: wymiana obrazu po najchaniu myszą.

Ciesze się że umiecie i chcecie pomóc mi, jednak to co do mnie piszecie to jak Chiński dla Polaka.

konto usunięte

Temat: wymiana obrazu po najchaniu myszą.


He? Na odwrót jest raczej :-) Choćby dlatego, że mało kto wyłącza obsługę CSS, podczas gdy JavaScript może zdarzyć się dość często. Z drugiej strony IE6 nie obsługuje :hover dla elementów innych niż link.

Ale tak czy siak, najlepszym rozwiązaniem w 99% przypadków będzie zastosowanie CSS Sprites.

Tak, CSS Sprites jest dobrym rozwiązaniem. Ale załóżmy, że masz 100 obrazków w galerii, nazwane są obrazek_1.jpg, obrazek_1_kolor.jpg. Normalnie są grayscale, po najechaniu full color. Co robisz? Użyjesz sprite`ów? CSS? Jest już późno, jestem zmęczony, ale wydaje mi się, że najskuteczniejszą metodą byłby java script, po za tym... ile osób wyłącza obsługę .js? Zawsze można dać regułkę, że przy wyłączonym .js będą obrazki zawsze full color i tyle.

No i ten IE6, pozostawię bez komentarza, chociażby dlatego, że np. Twój blog źle się pod nim wyświetla ;)

Jeszcze do Adama. jQuery zaciągane przez CDN nie boli. Na prawdę.Krystian Podemski edytował(a) ten post dnia 02.07.10 o godzinie 23:59

konto usunięte

Temat: wymiana obrazu po najchaniu myszą.

Krystian Podemski:

He? Na odwrót jest raczej :-) Choćby dlatego, że mało kto wyłącza obsługę CSS, podczas gdy JavaScript może zdarzyć się dość często. Z drugiej strony IE6 nie obsługuje :hover dla elementów innych niż link.

Ale tak czy siak, najlepszym rozwiązaniem w 99% przypadków będzie zastosowanie CSS Sprites.

Tak, CSS Sprites jest dobrym rozwiązaniem. Ale załóżmy, że masz 100 obrazków w galerii, nazwane są obrazek_1.jpg, obrazek_1_kolor.jpg. Normalnie są grayscale, po najechaniu full color. Co robisz? Użyjesz sprite`ów? CSS? Jest już późno, jestem zmęczony, ale wydaje mi się, że najskuteczniejszą metodą byłby java script, po za tym... ile osób wyłącza obsługę .js? Zawsze można dać regułkę, że przy wyłączonym .js będą obrazki zawsze full color i tyle.

No i ten IE6, pozostawię bez komentarza, chociażby dlatego, że np. Twój blog źle się pod nim wyświetla ;)

Jeszcze do Adama. jQuery zaciągane przez CDN nie boli. Na prawdę.
Tak tak, zdaję sobie sprawę, że mój blog pod IE6 nie działa ;)
http://perfectionorvanity.com/ie6.html

Co do tego kto wyłącza JavaScript:
http://riddle.jogger.pl/2007/11/07/kto-normalny-wylacz...

Jeśli ktoś chce podmieniać masowo obrazki to może napisać prostą funkcję w czystym JavaScript lub użyć Google, jQuery do tego niepotrzebne (choć na potrzeby przykładu w zupełności wystarczające).

konto usunięte

Temat: wymiana obrazu po najchaniu myszą.

Proponowałbym teraz Riddle`a zapytać o to samo o czym pisał 3 lata temu. Teraz można więcej dzięki .js, przeglądarki obsługują go lepiej, a % użytkowników, którzy z niego nie korzystają jest mniejszy. Jasne, że najpierw podstawowa wersja potem bajery, no i piszesz że czysty java script, ja wolę jQuery zassane z CDN i parę linijek kodu, jeśli Ty robisz inaczej to Twoja sprawa.

Co do IE6. Ja strony robię do stanu używalności, lepsze wersje mają użytkownicy lepszych przeglądarek. Nie wiem teraz po co wkleiłeś ten link.Krystian Podemski edytował(a) ten post dnia 03.07.10 o godzinie 01:09

konto usunięte

Temat: wymiana obrazu po najchaniu myszą.

jQuery nawet przez CDN będzie cholernie długo się wczytywało w telefonach, zwłaszcza starszej marki (nie wspominając, że tam każdy bajt kosztuje). nie ma co robić off-top, mniejsza o to.

Michał, słyszałeś o Google?
http://www.google.pl/search?q=javascript+mouseover

Temat: wymiana obrazu po najchaniu myszą.

Kamil Brenk:
jQuery nawet przez CDN będzie cholernie długo się wczytywało w telefonach, zwłaszcza starszej marki (nie wspominając, że tam każdy bajt kosztuje). nie ma co robić off-top, mniejsza o to.

Michał, słyszałeś o Google?
http://www.google.pl/search?q=javascript+mouseover

Kamilu gdybym wiedział o co biega co i jak to zapewne bym wszystko zrobił sam.
Jednak nie wiem nie umiem, nie potrafię. Tego wstawić w kod.
Więc proszę o pomoc.

konto usunięte

Temat: wymiana obrazu po najchaniu myszą.

Michał dałem Tobie kompletne rozwiązanie na Twoją skrzynkę pocztową. Wystarczyło skopiować kod i dodać class="doZamiany" do tagów <img>, oraz kolorowym obrazkom dodać do nazwy _kolor... kurcze, łatwiej niż dostać gotowca się nie da :)

Podaj link do strony na którą chcesz to wrzucić.

No i pytanie. Ile masz doświadczenia z html chociażby? Bo podstaw nie znasz :(


jQuery nawet przez CDN będzie cholernie długo się wczytywało w telefonach, zwłaszcza starszej marki (nie wspominając, że tam każdy bajt kosztuje). nie ma co robić off-top, mniejsza o to.


Dobrym podejściem do sprawy jest stworzenie osobnej wersji dla wchodzących z telefonów. Po za tym ktoś tu ma problem, a Wy od razu zakładacie, że strona będzie miała użytkowników bez .js albo wchodzących przez telefony komórkowe... spece od użyteczności i dostępności, pff

konto usunięte

Temat: wymiana obrazu po najchaniu myszą.

Krystian Podemski:
Proponowałbym teraz Riddle`a zapytać o to samo o czym pisał 3 lata temu. Teraz można więcej dzięki .js, przeglądarki obsługują go lepiej, a % użytkowników, którzy z niego nie korzystają jest mniejszy.

To co napisałem 3 lata temu dalej jest prawdziwe, bo JavaScript to jedna z warstw tworzenia stron, podstawowe interakcje powinny działać bez niego. Wszystko jest wyjaśnione w tekście, tu nie chodzi o stare przeglądarki tylko o architekturę i tzw kuloodporność.

konto usunięte

Temat: wymiana obrazu po najchaniu myszą.

Krystian... chyba zle zrozumies moj pierwszy komentarz.
Nie chodzi oto ze JS jest zle, sam bym nie uzyl do tego CSS (jak wspomnial Kamil, IE6 bedzie mialo z tym problem). Problem polega na tym JAK to przedstawiles.

Zeby zrobic bardzo prosta rzecz (wrecz podstawowa, na poziomie pierwszej lekcji) w javascripcie, ty potrzebujesz prawie 100KB biblioteki. I sila rzeczy kazdego uzytkownika zmusisz do sciagniecia czegos, czego nie potrzebuja.

To jest ten moment kiedy twoje rozwiazanie okazalo sie "leniwe", wiec rownie dobrze mogloby go nie byc. No nie wiem.... jakbys jescze animate, slide, fade czy inny gadzet wykorzystal...

ps. Nie, nie odbieraj tego jako ATAK, tylko raczej jako konstruktywna krytyke.
Twoj przyklad dziala, ale moglby dzialac DUZO lepiej.Andrzej Winnicki edytował(a) ten post dnia 03.07.10 o godzinie 11:20

konto usunięte

Temat: wymiana obrazu po najchaniu myszą.

<div style="background: url('./obrazek1.gif') no-repeat;" onmouseover="style.backgroundImage='url(./obrazek2.gif)'" onmouseout="style.backgroundImage='url(./obrazek1.gif)'">Lorem ipsum</div>


I tyle.
A wy się pieprzycie dyrdymały o frameworkach.Michał Wachowski edytował(a) ten post dnia 03.07.10 o godzinie 14:26

konto usunięte

Temat: wymiana obrazu po najchaniu myszą.

Michał Wachowski:
<div style="background: url('./obrazek1.gif') 	[/quote]> no-repeat;" 	[quote]onmouseover="style.backgroundImage='url(./obrazek2.gif)'" onmouseout="style.backgroundImage='url(./obrazek1.gif)'">Lorem ipsum</div>


I tyle.
A wy się pieprzycie dyrdymały o frameworkach.

WOW... Mamy rok 2010 a tu "mouseover, mouseout" - jakże "nowoczesne" rozwiązanie... <ironia>Ludzkość nie jest jeszcze gotowa na tak zaawansowane rozwiązania</ironia>Piotr Lewandowski edytował(a) ten post dnia 03.07.10 o godzinie 14:29

Temat: wymiana obrazu po najchaniu myszą.

Piotr Lewandowski:
Michał Wachowski:
<div style="background: url('./obrazek1.gif') 	[/quote][/quote]> > no-repeat;" 	[quote][quote]onmouseover="style.backgroundImage='url(./obrazek2.gif)'" onmouseout="style.backgroundImage='url(./obrazek1.gif)'">Lorem ipsum</div>


I tyle.
A wy się pieprzycie dyrdymały o frameworkach.

WOW... Mamy rok 2010 a tu "mouseover, mouseout" - jakże "nowoczesne" rozwiązanie... <ironia>Ludzkość nie jest jeszcze gotowa na tak zaawansowane rozwiązania</ironia>Piotr Lewandowski edytował(a) ten post dnia 03.07.10 o godzinie 14:29

Piotrze wydaje mi się że nie istotne jest który mamy rok. Jeśli coś ma służyć to chudź by to była prehistoria ale dobra to zawsze będzie przez kogoś stosowana. To tak jak by stwierdzić że html to przeżytek a Flashe to coś ekstra. Szkoda że tylko w wyglądzie. :-)

konto usunięte

Temat: wymiana obrazu po najchaniu myszą.

Michał K.:

Piotrze wydaje mi się że nie istotne jest który mamy rok. Jeśli coś ma służyć to chudź by to była prehistoria ale

Masz rację... Jak prehistoria to prehistoria... Idę upolować dinozaura bo mi się zapasy w jaskini kończą... W końcu co tam: Pal licho całą wiedzę i technologię... Można żyć w zacofaniu, nie ?
dobra to zawsze będzie przez kogoś stosowana. To tak jak by stwierdzić że html to przeżytek a Flashe to coś ekstra. Szkoda że tylko w wyglądzie. :-)

Wszystko zależy od zastosowania...

konto usunięte

Temat: wymiana obrazu po najchaniu myszą.

Piotr Lewandowski:
Michał Wachowski:
<div style="background: url('./obrazek1.gif') 	[/quote][/quote]> > no-repeat;" 	[quote][quote]onmouseover="style.backgroundImage='url(./obrazek2.gif)'" onmouseout="style.backgroundImage='url(./obrazek1.gif)'">Lorem ipsum</div>


I tyle.
A wy się pieprzycie dyrdymały o frameworkach.

WOW... Mamy rok 2010 a tu "mouseover, mouseout" - jakże "nowoczesne" rozwiązanie... <ironia>Ludzkość nie jest jeszcze gotowa na tak zaawansowane rozwiązania</ironia>

Oj no nie bucz... Po co zaprzęgać frameworka do jednego elementu?
Jest framework,są observery/triggery - nie ma, jest prehistoria.Michał Wachowski edytował(a) ten post dnia 03.07.10 o godzinie 16:58



Wyślij zaproszenie do