Rada pri tvorbe JS

Místo pro dotazy a rady ohledně programovacích jazyků (C++, C#, PHP, ASP, Javascript, VBS..) a tvorby webových stránek

Moderátor: Mods_senior

Veterans
Level 2.5
Level 2.5
Příspěvky: 272
Registrován: červenec 11
Pohlaví: Muž
Stav:
Offline

Rada pri tvorbe JS

Příspěvekod Veterans » 12 říj 2013 10:53

Zdravím chcem si do porfolia spraviť "galleriu" posledných prác. Mala by vyzerať asi tak že obrázok dajme tomu 150px na 150px a keď nan dáte ukazovatel myši tak sa obrázok akoby prechodom zmení na iný - má to byť ako tlačítko s presmerovaním na Behance). Kamarát mi poslal kód ale ten funguje len v Chrome.

Tak som hľadal a našiel som že by sa to dalo spraviť cez JS (a išlo by to v každóm prehľiadači). Keďže mi sme ešte JS v škole nebrali (až školský rok) tak potreboal by som poradiť.

Kód (ospravedlnujem sa za to že som to vložil do CODE):
HTML

Kód: Vybrat vše

<a href="index.html" class="work_one" alt="one" title="one"></a>

CSS

Kód: Vybrat vše

.work_one{width:300px;
          height:250px;
        background-image:url(images/1.png);
        float:left;
      margin: 30 0 0 0;
        }   
.work_one:hover{width:300px;
          height:250px;
        background-image:url(images/1.png);
        float:left;
      margin: 30 0 0 0;
 }

JS

Kód: Vybrat vše

$(document).ready(function (){ $(".prve a").mouseenter(function (){ $(this).animate({opacity: 1}); }); $(".prve a").mouseleave(function (){ $(this).animate({opacity: 0.3}); }); });


Do hltml som našiel že mám dať:
<script src="js/jquery-1.10.1.js" type="text/javascript"></script> <script src="js/script.js" type="text/javascript"></script>

Bohužial neviem kde. Mám ho dať do body, pod head, pod title.....
Keď mám ten JS mám ho linkovať ako html na CSS alebo to sa na JS nemusí?
Musím niečo v JS prepísať aby mi našlo obrázok.

Ďakujem za každú radu.

Reklama
Veterans
Level 2.5
Level 2.5
Příspěvky: 272
Registrován: červenec 11
Pohlaví: Muž
Stav:
Offline

Re: Rada pri tvorbe JS

Příspěvekod Veterans » 13 říj 2013 20:06

nikto nič?

Uživatelský avatar
LuCaCZ
Level 3.5
Level 3.5
Příspěvky: 929
Registrován: březen 11
Pohlaví: Muž
Stav:
Offline

Re: Rada pri tvorbe JS

Příspěvekod LuCaCZ » 14 říj 2013 17:23

Správně si to udělal - zdrojové kódy se dávají do značek CODE

Scripty se dávají do hlavičky. Buď je budeš mít v souboru .js, tím pádem na ně budeš odkazovat

Kód: Vybrat vše

<script src="js/script.js" type="text/javascript"></script>
nebo je vložíš rovnou do hlavičky

Kód: Vybrat vše

  <script type="text/javascript">...kód javascriptu...</script>


Knihovnu jQuery stáhneš zde: http://jquery.com/download/

To co si ale našel, ti bude obrázek jen zesvětlovat a ne měnit.

Kód: Vybrat vše

<!DOCTYPE HTML>

<html>

<head>
  <title>...</title>
  <style type="text/css">
  <!--
  .work_one {
    width:300px;
    height:250px;
    background-image:url(images/1.png);
    float:left;
    margin: 30 0 0 0;
  }

  .work_one:hover{
    width:300px;
    height:250px;
    background-image:url(images/1.png);
    float:left;
    margin: 30 0 0 0;
 }
  -->
  </style>
  <script src="js/jquery-1.10.1.js" type="text/javascript"></script>
  <script type="text/javascript">
  $(document).ready(function (){ $(".work_one").mouseenter(function (){ $(this).animate({opacity: 1}); }); $(".work_one").mouseleave(function (){ $(this).animate({opacity: 0.3}); }); });
  </script>

</head>

<body>

<a href="index.html" class="work_one" alt="one" title="one"></a>

</body>

</html>


Samozřejmě aby to fungovalo na víc obrázků, by byla potřeba ještě úprava.

Veterans
Level 2.5
Level 2.5
Příspěvky: 272
Registrován: červenec 11
Pohlaví: Muž
Stav:
Offline

Re: Rada pri tvorbe JS

Příspěvekod Veterans » 15 říj 2013 08:35

LuCaCZ - Jasné máš pravdu vlastne to zosvetluje.
Nevieš o kóde čo by mi robilo to čo chcem (že ten obrázok by vymenilo za iný v 0,5/1 sekunda), skrátka aby ten obrázok sa neprepol hneď.
Ďakujem za odpoveď.

Uživatelský avatar
CZechBoY
Master Level 9.5
Master Level 9.5
Příspěvky: 8813
Registrován: srpen 08
Bydliště: Brno
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: Rada pri tvorbe JS

Příspěvekod CZechBoY » 15 říj 2013 12:08

Stáhni nivoSlider ;-)
PHP, Nette, MySQL, C#, TypeScript, Python
IntelliJ Idea, Docker, Opera browser, Linux Mint
iPhone XS
Raspberry PI 3 (KODI, Raspbian)
XBox One S, PS 4, nVidia GeForce NOW

Veterans
Level 2.5
Level 2.5
Příspěvky: 272
Registrován: červenec 11
Pohlaví: Muž
Stav:
Offline

Re: Rada pri tvorbe JS

Příspěvekod Veterans » 15 říj 2013 14:39

CZechBoY - dík za odpoveď ale bohužial slider nechcem.
Ide o to že to čo chcem by malo vyzerať ako tu http://www.warface.com/ dole kde sú sociálne siete (proste štvorec ked dáš nan myš tak sa zmení farba/obrázok tak niečo presne na ten spôsob len stým aby sa nezmenil hned ale cca tak 0,5/1 sekundu na to.
Mám od spolužiaka kód

Kód: Vybrat vše

  -webkit-transition:background 0.9s  linear;
         -moz-transition:background 0.5s linear;
         -o-transition:background 0.5s linear;

Kde to funguje presne ako by som chcel bohužial tento kód funguje len pre GoogleChrome. Ale cez JS to funguje už som to dávnejšie videl, ale nepametám si kde.

Uživatelský avatar
honzaik
Level 2.5
Level 2.5
Příspěvky: 337
Registrován: říjen 11
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: Rada pri tvorbe JS

Příspěvekod honzaik » 15 říj 2013 15:01

u toho warface to maj udělaný jako jeden obrázek http://www.warface.com/assets/img/play- ... ce-btn.jpg akorát měněj polohu ;)
ello dere

Uživatelský avatar
CZechBoY
Master Level 9.5
Master Level 9.5
Příspěvky: 8813
Registrován: srpen 08
Bydliště: Brno
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: Rada pri tvorbe JS

Příspěvekod CZechBoY » 15 říj 2013 15:03

honzaik: asi myslel ty blbosti dole
Když na to najedeš tak zmizí obrázek a je to jen yyplněné barvou.
PHP, Nette, MySQL, C#, TypeScript, Python
IntelliJ Idea, Docker, Opera browser, Linux Mint
iPhone XS
Raspberry PI 3 (KODI, Raspbian)
XBox One S, PS 4, nVidia GeForce NOW

Uživatelský avatar
honzaik
Level 2.5
Level 2.5
Příspěvky: 337
Registrován: říjen 11
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: Rada pri tvorbe JS

Příspěvekod honzaik » 15 říj 2013 16:34

http://www.warface.com/assets/img/block ... er.jpg?v=1 je to stejně udělaný :D ale určitě bych volil jinej postup než tenhle co tam mají oni, nebo prostě udělat tu věc jednodušší (v jednoduchosti je krása)
ello dere


  • Mohlo by vás zajímat
    Odpovědi
    Zobrazení
    Poslední příspěvek
  • HW - rada u komponentů
    od PavelKilleR » 12 čer 2025 23:03 » v Rady s výběrem hw a sestavením PC
    3
    1958
    od PavelKilleR Zobrazit poslední příspěvek
    13 čer 2025 15:10
  • Rada s výběrem monitoru
    od Ondrejjj » 10 pro 2024 23:52 » v Rady s výběrem hw a sestavením PC
    4
    1815
    od Ondrejjj Zobrazit poslední příspěvek
    11 pro 2024 11:01
  • Rada ohledně zdroje k pc
    od Lokna » 12 kvě 2025 12:16 » v Rady s výběrem hw a sestavením PC
    3
    3328
    od windroid2 Zobrazit poslední příspěvek
    12 kvě 2025 13:20
  • PC okolo cca 25k (Kontrola a rada ohledně HW)
    od Mr.N00B » 04 dub 2025 18:37 » v Rady s výběrem hw a sestavením PC
    1
    2172
    od Alferi Zobrazit poslední příspěvek
    05 dub 2025 11:36
  • Rada s výběrem komponent/PC - cenový strop 70 000 Kč
    od Narthelianail » 16 črc 2024 07:29 » v Rady s výběrem hw a sestavením PC
    4
    2266
    od Kminek Zobrazit poslední příspěvek
    16 črc 2024 11:29

Zpět na “Programování a tvorba webu”

Kdo je online

Uživatelé prohlížející si toto fórum: Žádní registrovaní uživatelé a 3 hosti