Rada pri tvorbe JS

Veterans · Příspěvek od **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.

Veterans · Příspěvek od **Veterans** » 13 říj 2013 20:06

nikto nič?

LuCaCZ · Příspěvek od **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 · Příspěvek od **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ď.

CZechBoY · Příspěvek od **CZechBoY** » 15 říj 2013 12:08

Stáhni nivoSlider ;-)

Veterans · Příspěvek od **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.

honzaik · Příspěvek od **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

CZechBoY · Příspěvek od **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.

honzaik · Příspěvek od **honzaik** » 15 říj 2013 16:34

http://www.warface.com/assets/img/block ... er.jpg?v=1 je to stejně udělaný

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)

PC-HELP.CZ

CNEWS

Rada pri tvorbe JS

Rada pri tvorbe JS

Re: Rada pri tvorbe JS

Re: Rada pri tvorbe JS

Re: Rada pri tvorbe JS

Re: Rada pri tvorbe JS

Re: Rada pri tvorbe JS

Re: Rada pri tvorbe JS

Re: Rada pri tvorbe JS

Re: Rada pri tvorbe JS