NOVINKA: Kurz Práca s umelou inteligenciou teraz už od 0 €. Staň sa žiadaným profesionálom. Zisti viac:
Avatar
David Hynek
Tvůrce
Avatar
David Hynek:23.7.2015 19:11

Někde dělám chybu a faktu už nevím kde...

Mám HTML stránku:

<div class="clanek">
       <img class="imgclanek" src="obrazek.jpg" title="popis" />
        <p>text... atd</p>
  </div>

Těch článků je tam x a já bych rád, obalil tag img divem pro vytvoření efektu. Ale ať to zkouším appendChild nebo insertBefore, nejde mi to zacílit přesně kolem těch tagů. Jak se správně v DOMu obaluje prvek?

Ten efekt je "transition: background-size 1s ease-in;" a ten funguje jen na pozadí, tedy musím obrázek nejdříve obalit divem, tomu předat hodnotu pozadí stejné jako je cesta k obrázku. Když ho tam natvrdo přidám div, tak to funguje, ale rád bych to zkusil celé přes javascript. Díky za nasměrování... :)

Odpovedať
23.7.2015 19:11
Čím víc vím, tím víc věcí nevím.
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovedá na David Hynek
Honza Bittner:23.7.2015 19:16

Toto (jQuery) by tě mohlo navést http://www.itnetwork.cz/…adani-obsahu

Co máš v HTML při načtení, ten element .clanek (pak chceš vložení do), nebo obrázek a odstavec (pak chceš obalování - wrap)?

Akceptované riešenie
+20 Skúseností
+2,50 kreditov
Riešenie problému
Hore Odpovedať
23.7.2015 19:16
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
David Hynek
Tvůrce
Avatar
David Hynek:23.7.2015 21:35

Honzo, děkuji za nasměrování, jQuery moc nemusím. Rád zjišťuji jak to funguje čistě v JavaScriptu. Wrap byl dobrý směr. Přikládám co jsem chtěl vytvořit a co se tedy i nakonec povedlo. Třebas se to bude hodit i někomu z vás.

Je to hodně zjednodušené, ale k ukázce to stačí :)

A ještě živá ukázka http://davidhynek.cz/test5.html :)

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8" />
  <title></title>
  <style>
  .clanek {float: left; width: 51%; margin: 20px auto; clear: both;}
  .clanek p {}
  .divimgclanek {display: block; float: right;  background-size:100%; margin: 20px; transition: background-size 1s ease-in; -moz-transition: background-size 1s ease-in; -web-kit-transition: background-size 1s ease-in; background-position: 20% 20%;}
  .divimgclanek:hover {background-size:110%; background-position: 20% 20%;}
  </style>
  <script language="javascript">

  window.onload = function() { zabal_obrazky("imgclanek","divimgclanek");}


  function zabal_obrazky(co, cim)
  {
  x = document.getElementsByClassName(co);
  if(x.length > 0)
  {
  for(i=0;i<x.length;i++)
    {
    newDiv = document.createElement("div");
    newDiv.className = cim;
    newDiv.appendChild(x[i].parentNode.replaceChild(newDiv,x[i]));
    document.getElementsByClassName(cim)[i].style = "background-image: url('"+x[i].src+"'); width: "+x[i].offsetWidth+"px; height: "+x[i].offsetHeight+"px;";
    x[i].style = "display: none;";
    }
  }}

  </script>
  </head>
  <body>
  <div id="telo">
     <div class="clanek">
        <img class="imgclanek" src="http://www.ditom.cz/cenik/img/obr_3.jpg" title="Hala" />
        <p>Lákamí vůněhulás úmyval rohlivý jednovod lek štínkucen úmyslušle alesmělý tomáš prozzásko. Autný řícit přiroje aloben Tanechřeh čin rostrojsk znou hlínka onověď vá. Aložek lžičkak vůně schvám podlo Rohlíkem dráda čin parcipádn A autobzor. Vátomálož ček jakočil sudbale Umraburdí maráva dráček Hráčepicí ček zlek máš. Obse V větrhnova.</p>
     </div>
     <div class="clanek">
        <img class="imgclanek" src="http://www.ditom.cz/cenik/img/obr_1.jpg" title="Regál" />
        <p>Lákamí vůněhulás úmyval rohlivý jednovod lek štínkucen úmyslušle alesmělý tomáš prozzásko. Autný řícit přiroje aloben Tanechřeh čin rostrojsk znou hlínka onověď vá. Aložek lžičkak vůně schvám podlo Rohlíkem dráda čin parcipádn A autobzor. Vátomálož ček jakočil sudbale Umraburdí maráva dráček Hráčepicí ček zlek máš. Obse V větrhnova.</p>
     </div>
  </div>
  </body>
</html>
Hore Odpovedať
23.7.2015 21:35
Čím víc vím, tím víc věcí nevím.
Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zobrazené 3 správy z 3.