« 1 2 »
Autor Zpráva
jefitto44
Profil
Mám obrázky socialnych sieti. Potrebujem urobiť niečo také, že ak prídem myšou na daný obrázok, tak sa zmení jeho source. Fungovať by to malo asi tak, že mám obrázok image/fb.png a pri mouseover sa z neho stane fbhover.png. Pri mouseleave sa opäť z neho stane fb.png. Problém je ten, že fb je jeden z piatich obrázkov, všetky obrázky však budú fungovať rovnako, t.j. doplní sa tam slovo hover. Vždy sa však bude meniť attr len u toho obrázka, ku ktorému prídem myšou. Všetky obrázky pritom majú class="social-image"

Zatiaľ sú moje pokusy neúspešne a vydumal som niečo takéto:

$(document).ready(function() {
    function hoverImage() {
        actSrc=$(this).attr("src");
        return actSrc;
    }

    $(".social-image").mouseover(function() {
        $(this).function(hoverImage());
    })
});

Funkcia hoverImage() by mala automaticky nejakým spôsobom (neviem akým) rozobrať source obrázka a doplniť tam spojenie "hover". Problém je ten, že neviem, ako rozoberiem názov samotného obrázku (napr fb) a jeho príponu (.png), pretože medzi to potrebujem vložiť slovo "hover". Navyše mi to na riadku osem stále vyhadzuje chybu (to je ten $(this).funcion(hoverImage()))
Quyen
Profil *
to je nejaky hloupost, ne? na to snad staci css
jefitto44
Profil
Ako budem pomocou CSS meniť obrázok? Iba ak by bol na pozadí, ale kvôli zlepšeniu vlastných znalosti to tentokrát chcem cez javascript
Keeehi
Profil
jefitto44:
Bylo by dobré se zlepšovat na něčem užitečném. Když s CSS navíc využiješ verzi s background-position kde všechny obrázky spojíš do jednoho a pak ho jen posunuješ, tak i mimo jiné ušetříš i spoustu http requestů.
jefitto44
Profil
Aaach... mohli by ste mi prosím pomôcť?
quatzael
Profil
jefitto44:
normálně to přeci udělej přes CSS (selektor :hover)
jefitto44
Profil
omg neviete o čom točim...

img src="images/social/fb.png" potrebujem pri prechode myšou zmeniť na image src="images/social/fbhover.png" toto cez CSS neurobím
quatzael
Profil
jefitto44:
Tohle vyzkoušej, ale opravdu moc nevím co se snažíš vytvořit..

$(".social-image").hover(function(){
   var cat = $(this).attr("data-category");
   var scr = "images/social/"+cat+".png";
   $(this).attr("scr",scr);
   },
   function(){
   var cat = $(this).attr("data-category");
   var scr = "images/social/"+cat+"hover.png";
   $(this).attr("scr",scr);
 }); 



jefitto44:
Ještě jsem to upravil na to co jsi asi myslel.. Musíš si ke každýmu obrázku (html tagu) přiřadit atribut data-category a do něj vkládat ty názvy. Takže do toho jednoho napíše konkrétně fb.
Kcko
Profil
jefitto44:

omg neviete o čom točim...
Ach jo někdy mi přijde, že jsi 100 let za opicemi a děláš práci na kterou nemáš. Ani se nedivím, že tady spoustě lidem lezeš na nervy.

img src="images/social/fb.png" potrebujem pri prechode myšou zmeniť na image src="images/social/fbhover.png" toto cez CSS neurobím

Samozřejmě, že jde.
A pokud nechceš spojit 2 obrázky do jednoho a dělat to tak jak se to dělat má, máš pořád možnost 1 obrázek prohazovat za jiný, stačí si ten druhý schovat do spanu a při hoveru na odkaz ten první schovat a druhý zobrazit.
jefitto44
Profil
Ano, ešte koľkokrát budem musieť napísať, že to nechcem cez CSS? nemením src image-u, ale mením url background-u, v tom je zásadný rozdiel. A ja som naozaj nič nechcel, iba pomôcť s tou jQuery funkciou, to je naozaj všetko.

Kcko:
děláš práci na kterou nemáš
Rozdiel medzi mnou a tebou je len ten, že máš viac skúsenosti a to ti nedáva právo ma zhadzovať. Ak sa nemýlim, tak na to tu toto fórum je, aby sa menej skúsení pýtali viac skúsených. Nikto ťa nenúti tu chodiť, ani písať na túto tému. Nemusíš ma teda zosmiešňovať. Ja som tu prišiel a slušne sa opýtal otázku, ani po tridsiatich "Nechcem to cez CSS" mi tu stále vypisujete o CSS. S CSS problémy nemám a preto to asiže nepotrebujem riešiť. Ja mám problémy s jQuery a vlastne celkovo s javascriptom, tak preto tu píšem (dokonca ešte do kategórie javascript).

Bohužiaľ, nie všetci sme obdarení takou múdrou hlavou a mimozemskou inteligenciou ako niektorí užívatelia tohto fóra, napr. mne to trvá trošku dlhšie. Tak prepáčte, že sa snažím zlepšovať...
_es
Profil
[#10] jefitto44:
Asi si celkom nepochopil rady, že to, čo chceš, sa dá spraviť len v CSS, takže nie je vhodné do toho „montovať“ JS. A tvoje presvedčenie, že to v CSS „neurobíš“ je nesprávne.
Keeehi
Profil
jefitto44:
na to tu toto fórum je, aby sa menej skúsení pýtali viac skúsených.
Jenže když ti méně zkušení neposlouchají rady více zkušených, tak je to pak těžké.
jefitto44
Profil
_es:
sa dá spraviť len v CSS

Ja snáď zle vidím :D Aj taka lama ako ja vie, že sa to v CSS dá spraviť LEN VTEDY AK JE OBRÁZOK NA POZADÍ DIVU A ja ho nemám na pozadí, ja ho mám normálne v html ako <img src> a ako pre pána zmením SRC OBRÁZKA V CSS? Nijako, na to treba javascript

Takto sa to dá
<img src="images/wrapper/fb.png" alt="" id="fb" onmouseover="document.images['fb'].src='images/wrapper/fbhover.jpg'" onmouseout="document.images['fb'].src='images/wrapper/fb.png'">

Toto viem spraviť. Problém je ten, že som to chcel dať do nejakej funkcie, aby som pod to nemusel opäť robiť
<img src="images/wrapper/in.png" alt="" id="in" onmouseover="document.images['in'].src='images/wrapper/inhover.jpg'" onmouseout="document.images['in'].src='images/wrapper/in.png'">
<img src="images/wrapper/twit.png" alt="" id="twit" onmouseover="document.images['twit'].src='images/wrapper/twithover.jpg'" onmouseout="document.images['twit'].src='images/wrapper/twit.png'">
A ďalších 50 rôznych social linkov

Všetko čo som teda chcel, bolo spraviť funkciu, ktorá by to robila automaticky a iba pre daný obrázok (dané "this") a namiesto pomoci mi tu sto razy splietate o CSS, napriek tomu, že viem, a aj vy viete, že sa to v tom spraviť nedá.
Quyen
Profil *
jefitto44:
proc delat veci jednouse, kdyz to jde slozite s kvalitou kodu na urovni 'nejak to poslepuju, hlavne, ze tam mam javascript',

Pokud se ucis jquery, urcite bych se to neucil zpusobem ala nacpu to na kazdou ptakovinu, ale radeji resil pripady, kde je vyuziti teto technologie na miste - coz tenhle ocividne neni...
jefitto44
Profil
No ja si zas nemyslím, že robiť zbytočné divka a dávať tam pozadia je lepšie riešenie ako dať tam dva obrázky, ktoré sa prepínajú javascriptom
juriad
Profil
Proč to neřešit deklarativně?
http://kod.djpw.cz/kbkb
jefitto44
Profil
Toto som potreboval, díky
anonymníí
Profil *
juriad:
Ještě by se slušelo dodat podporu .hasAttribute, je od IE8 výše. Ale nemyslím si, že by to jefitto řešil. Spíše pro úplnost.
_es
Profil
[#13] jefitto44:
A niečo ti snáď bráni dať ten obrázok ako pozadie? Okrem toho, ak chceš z nejakých utajených dôvodov vkladať dekoračné obrázky ako <img>, tak sa to tiež dá spraviť len v CSS, návod máš v [#9] Kcko - samozrejme netreba „meniť src obrázka“.
Chamurappi
Profil
Reaguji na jefitta44:
ja si zas nemyslím, že robiť zbytočné divka a dávať tam pozadia je lepšie riešenie ako dať tam dva obrázky
Dva obrázky jsou špatné řešení, protože první výměna obrázku neproběhne hned – druhý obrázek nemusí být načtený. Může to ošklivě probliknout, zejména u <img> bez nastavených rozměrů, to je jednoznačně špatně.

Aj taka lama ako ja vie, že sa to v CSS dá spraviť len vtedy ak je obrázok na pozadí divu
Změnit vzhled na :hover jde i při jednom <img>.

$(this).function(hoverImage());
Nenapadá mě, jak nejlépe vysvětlit, proč (a jak moc) je tento řádek špatně. Za tečkou function… mno.
Umíš programovat v nějakém jiném jazyku? Základy JavaScriptu jsou celkem podobné ostatním jazykům. Když voláš funkci, argumenty dáváš mezi závorky. Chceš-li si psát a volat vlastní funkce, zapomeň na to, jak je dělané jQuery, očividně si z něj bereš víc, než jsi momentálně schopen/ochoten pochopit.
jefitto44
Profil
Som taký mierne pokročilý v PHP. S jQuery/JS robiť veľmi neviem, to uznávam, ale však práve od toho je tu toto fórum, či nie?
Kubo2
Profil
[#21] jefitto44:
ale však práve od toho je tu toto fórum, či nie?

Ja si myslím, že si zjavne nepochopil, čo sa ti snažil naznačiť Chamurappi.
Chamurappi
Profil
Reaguji na jefitta44:
ale však práve od toho je tu toto fórum, či nie?
To je reakce na mě? Já tě nepeskuji za to, že se ptáš.
Ale odpovím ti i na toto, s jistou dávkou nepříjemné upřímnosti: toto fórum slouží především odborníkům, kteří si vypěstovali závislost na dobrém pocitu z altruismu a z řešení technických hádanek. Pokud jim ten dobrý pocit nedopřeješ, jsi jen zbytečná zátěž. Opakované poučování, že si odpověď de facto zasloužíš, neb jsi v pozici zvídavého začátečníka, je neskutečně otravné a zejména neúčinné. Řešíš-li nějaký problém, soustřeď se laskavě jen na něj. Budeš-li s ostatními jednat slušněji, než oni s tebou, dočkáš se dříve či později odpovědi i na ty nejdivnější a nejzbytečnější otázky :-)

Som taký mierne pokročilý v PHP.
$ je obyčejná funkce, která vrací objekt (vylepšené pole), který má metody, jako je třeba mouseover. Žádná jeho metoda se nejmenuje function, takže $("něco").function je nesmysl. Chceš-li zavolat vlastní funkci hoverImage, zavoláš prostě hoverImage(), žádné tečky, žádné dolary. Uvnitř takto zavolané vlastní funkce nebudeš mít žádné this, proto si this zevnitř mouseoveru můžeš předat jako argument. Volat funkce s argumentem v PHP umíš? V JS je to stejné.

Toto som potreboval, díky
A rozumíš tedy tomu, jak juriadův kód funguje? Pokud řešíme jen hypotetický případ, když by nešlo použít :hover, tak ho řešíme proto, aby ses něco naučil, ne proto, abys zkopíroval hotovou funkci.


Reaguji na juriada:
Nepoužíval bych setAttribute na src. K uschování starého src též není nutné používat atribut…
jefitto44
Profil
Isteže, ja totiž tieto veci viem pochopiť, skôr mám problem napísať správne syntax... ten kopec bodiek a kadejakých úvodzoviek... to ne jak PHP, kde proste dáš
<? funkcia($parameter1,$parameter2,$parameter3) ?> a hotovo
Chamurappi
Profil
Reaguji na jefitta44:
S uvozovkami je to v JS hodně snadné, ve srovnání s PHP, kde různé druhy uvozovek fungují různě.
Teček si při psaní a volání vlastních funkcí všímat nemusíš.

to ne jak PHP, kde proste dáš
Zatímco v JS prostě dáš funkcia(parameter1, parameter2, parameter3)… (a název proměnné může klidně začínat i dolarem, ale žádný speciální význam nemá).
jefitto44
Profil
Dobre, to je funkcia, ale všetko to vnútro, document ready a kopec vnorených funkcií, ktoré neovládam (.css,.src,.html,find, stop, ...)
Davex
Profil
jefitto44:
kopec vnorených funkcií, ktoré neovládam
Z toho si nic nedělej. Můžeš se to naučit.
jefitto44
Profil
Práve o to sa snažím ;)
_es
Profil
jefitto44:
JQuery má aj dokumentáciu, tam si všetko ľahko nájdeš (http://api.jquery.com/), no bez základnej znalosti JS to veľmi nepôjde ( Časté potíže, zajímavosti a poučné debaty » Co vlastně je jQuery?).
juriad
Profil
jefitto44:
Nedávno jsem jednu třířádkovou konstrukci rozebíral, přečti si Jak zapsat oficiální funkci v jquery?. Možná pochopíš, že $ je jen obyčejná funkce.
« 1 2 »

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Odkud se sem odkazuje


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: