PC-HELP.CZ

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.

nikto nič?

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.

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ď.

Stáhni nivoSlider ;-)

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 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

honzaik: asi myslel ty blbosti dole
Když na to najedeš tak zmizí obrázek a je to jen yyplněné barvou.

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

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