Autor Zpráva
SG
Profil *
#1 · Zasláno: 23. 4. 2011, 22:24:23
Odpovědět Citovat
Neviem sa vysporiadat s takou vecou, v hlavicke stranky mam taky obdlznik, v ktorom su tri divy, prvy obsahuje vertikalne menu s tromi tlacitkami, druhy obsahuje pisany obsah a treti div obrazok prisluchajuci k danemu tlacitku.

Potrebujem dosiahnut, aby hned po prejdeni na stranku bolo to prve tlacitko zvyraznene, ak mam zadane a:actived a teda bol tam zobrazeny aj prisluchajuci text a obrazok. A aby sa dalo prechadzat aj na ostatne dve tlacitka, ako toto spravit?

Skusal som najst nejaky javascript, ale bezuspesne, sam si to nenaprogramujem, takze hladam, ci existuje nejake jednoduche riesenie cez css.

Dakujem
Louka
Profil
#2 · Zasláno: 24. 4. 2011, 10:07:23
Odpovědět Citovat 
<div id="prvni">
<ul>
<li><a href="#" onclick="javascript: return ukaz('1');">Jedna</a></li>
<li><a href="#" onclick="javascript: return ukaz('2');">Jedna</a></li>
<li><a href="#" onclick="javascript: return ukaz('3');">Jedna</a></li>
</ul>
</div>

<div id="druhy><p>text</p></div>

<div id="treti">
<img id="obr-1" src="blabla1" alt="první obr." style="display:block;">
<img id="obr-2" src="blabla2" alt="druhý obr." style="display:hidden;">
<img id="obr-3" src="blabla3" alt="třetí obr." style="display:hidden;">
</div>

<script>
 function ukaz(id) 
 {
   var i = 0;
   var pocet = 3;
   for ( i = 1; i <= pocet; i++ ) {
     if ( i == id ) document.getElementById('obr-'+id).style.display='block'; 
     else document.getElementById('obr-'+i).style.display='none';
   }
   
   return false;
 }
</script>


To by mohlo jít. Má to po kliknutí na odkaz zobrazit příslušný obrázek a ostatní skrýt. Pochopil jsem správně? :)
SG
Profil *
#3 · Zasláno: 24. 4. 2011, 10:28:44
Odpovědět Citovat
S javascriptom prave robit neviem a nechapem aj, ako sa to mohol niekto naucit, ked to tak citam :D
chcel som to ale riesit cez nieco, co bude fungovat vsetkym aj tym, co nebudu mat povoleny javascript, respektive podstatnejsi dovod je, ze si to neviem upravit na svoje potreby. tak vyuzivam iframe, dosiahol som, co som chcel, ale ked mi nacita index, tak sa tam nezobrazi ten iframe, ale az po kliknuti na dane tlacitko, prikladam kod: 

<div id="main1">
       <p id="nadmenu">
        <a href="precomy.html" class="menu" target="ifrejm">Prečo my?</a>
        <a href="" class="menu">druhy odkaz</a>
        <a href="" class="menu">treti odkaz</a>
       </p>
</div>
<div id="main2">
      
        <iframe id="ifr" scrolling=no frameborder=0 name="ifrejm">
        alternativa
        </iframe>

</div>
<div id="main3">
        <img src="image.jpg" title="main" class="topimage">
</div>


precomy (zobrazuje sa v iframe): 
   <div id="menu21">
<p id="nadmenu">
<a href="" class="menu21active">&nbsp;</a>
<a href="" class="menu21">&nbsp;</a>
<a href="" class="menu21">&nbsp;</a>
</p>
  </div>
  <div id="menu22">
    <p class="fajka"><img src="fajka1.gif">test1<a href="index.html" target="_parent">index</a></p>
    <p class="fajka"><img src="fajka1.gif">test2</p>
    <p class="fajka"><img src="fajka1.gif">test3</p>
    <p class="fajka"><img src="fajka1.gif">test4</p>
    <p class="fajka"><img src="fajka1.gif">test5</p>

  </div>


CSS: 
#main {
  background-color:#dbdee1;
  width:960px;
  height:270px;
  }
#main1 {
  background-color:#dbdee1;
  position:relative;
  float:left;
  width:125px;
  height:270px;
}
#main2 {
  background-color:#dbdee1;
  position:relative;
  vertical-align:middle;
  float:left;
  width:470px;
  height:270px;
}
#main3 {
  background-color:#dbdee1;
  position:relative;
  float:left;
  width:365px;
  height:270px;
}
#ifr {
  background-color:#dbdee1;
  width:435px;
  height:270px;
}
#menu21 {
  background-color:#dbdee1;
  float:left;
  width:24px;
  height:270px;
}
#menu22 {
  background-color:#dbdee1;
  float:left;
  width:410px;
  height:270px;
}
#nadmenu {
  width:auto;
  height:auto;
  margin-top:47px;
  vertical-align:middle;
}
.fajka {
  margin:8px 0 8px 0;
}
.vertical {
  vertical-align:bottom;
}
a.menu {
  color:#878789;
  display:block; 
  width:125px;
  font-weight:800; 
  font-size:18px; 
  font-family:"Arial Narrow"; 
  text-decoration:none; 
  margin:5px 0 5px 0;
  padding:5px 5px 5px 10px; 
  line-height:40px;
}
a.menu21 {
  color:#878789;
  background-image:url("ahref1.gif");
  background-repeat:no-repeat;
  background-position:left center;
  display:block;
  width:24px;
  font-weight:800; 
  font-size:18px; 
  font-family:"Arial Narrow"; 
  text-decoration:none; 
  margin:5px 0 5px 0;
  padding:5px 5px 5px 10px; 
  line-height:40px;
}
a.menu21active {
  color:#878789;
  background-image:url("ahref2.gif");
  background-repeat:no-repeat;
  background-position:left center;
  display:block;
  width:24px;
  font-weight:800; 
  font-size:18px; 
  font-family:"Arial Narrow"; 
  text-decoration:none; 
  margin:5px 0 5px 0;
  padding:5px 5px 5px 10px; 
  line-height:40px
}
.topimage {
  float:left;
  margin:35px 30px 35px 4px;
  width:320px;
  height:200px;
  border:1px;
}


A vznikne z toho dane menu, ako ukazujem na screene. riesenie cez iframe som uvazoval, ze treti div zrusim a necham ho obsahom druheho a tym dosiahnem zmenu obrazku po kliknuti, ale co mi robi problem je, ako som spomenul, ze po prejdeni na index, tak ten iframe hned nezobrazi, ako to?

Pripadne, vedel by si mi pomoct konkretne s mojim problemom cez javascript, prosim ta?[
img]http://uploader.imghost.sk/imagehosting/ytawcr4nuy4bdr8cfun1.jpg[/img]
SG
Profil *
#4 · Zasláno: 24. 4. 2011, 10:29:31
Odpovědět Citovat
Louka
Profil
#5 · Zasláno: 24. 4. 2011, 11:29:32
Odpovědět Citovat
OK takže ty potřebuješ následující:
Máš 3 DIVy. V prvním klikneš a změní se obsah 2. (text) a 3. (obrázek)? Přes CSS mě řešení nenapadá, JS ano. Viz výše.

Kód pro tvou konkrétní situaci bych viděl takto: 
<div id="main1">
       <p id="nadmenu">
        <a href="#" onclick="javascript: ukaz(1);" class="menu">Prečo my?</a>
        <a href="#" onclick="javascript: ukaz(2);" class="menu">druhy odkaz</a>
        <a href="#" onclick="javascript: ukaz(3);" class="menu">treti odkaz</a>
       </p>
</div>

<div id="main2">
        <div id="text-1" style="display:block;"><p>Prečo my, text k tomu.</p></div>
        <div id="text-2" style="display:none;"><p>Text k druhému odkazu.</p></div>
        <div id="text-3" style="display:none;"><p>Text k 3.</p></div>
</div>

<div id="main3"> <!-- tady jsou 3 obrázky, nastav jim správné src, aby se měnily -->
        <img id="obr-1" src="image.jpg" title="main" class="topimage">
        <img id="obr-2" style="display:none;" src="image.jpg" title="main" class="topimage">
        <img id="obr-3" style="display:none;" src="image.jpg" title="main" class="topimage">
</div>

<script>
 function ukaz(id) // to je funkce která se volá při kliknutí na odkazy s parametrem id
 {
   var i = 0;
   var pocet = 3;
   for ( i = 1; i <= pocet; i++ ) {
     if ( i == id ) {
        document.getElementById('obr-'+id).style.display='block'; 
        document.getElementById('text-'+id).style.display='block';
     }
       
     else {
         document.getElementById('obr-'+i).style.display='none';
         document.getElementById('text-'+i).style.display='none';
     }
   }
   
   return false;
 }
</script>


Odzkoušeno u mě, funguje.
SG
Profil *
#6 · Zasláno: 24. 4. 2011, 11:39:02
Odpovědět Citovat
VYBORNE, VYBORNE, dakujem ;)
este dve otazky k tomu.
da sa pri javascripte nastavit, aby prave navstiveny a aktivny odkaz zmenil farbu? samotne css to nevie, jedine active ato zmeni len na tu jednu sekundu, co na to kliknem, ale ja chcem aj pocas aktivity na tom danom tlacitku, plus priradit pozadie ine.

a druha vec, ked zlyha javascript, ze u niekoho nebude fungovat, da sa nejakou podmienkou prepnut, ze ak to nepojde, tak ma nastupit moj iframe cez css, ci je to zbytocne?
Keeehi
Profil
#7 · Zasláno: 24. 4. 2011, 11:46:32
Odpovědět Citovat
SG:
1) Ano, pomocí javascriptu můžeš nějakému prvku pomocí css změnit barvu.
2) Stránky by měly být přístupné i bez javascriptu. Spíše se to ale bude řešit stylem, že v html bude normální iframe a teprve javascript si tu stránku upraví do podoby[#5]. Pokud javascript nebude funkční, tak si tu stránku neupraví, takž tam zůstane ten iframe.
Louka
Profil
#8 · Zasláno: 24. 4. 2011, 11:51:53
Odpovědět Citovat
nefungující javascript:
pokud někdo nemá JS, či ho má zakázaný, vykoná se místo toho vše, co je v <noscript> a </noscript>, tam můžeš zkusit naimplementovat tvoje řešení skrze iframe.

aktivní odkaz: doplněný a kompletní kód níže.
V CSS si nadefinuj třídu např: 
.aktivni { color: red; }
a pak: 

<div id="main1">
       <p id="nadmenu">
        <a href="#" id="a-1" onclick="javascript: ukaz(1);" class="menu">Prečo my?</a>
        <a href="#" id="a-2" onclick="javascript: ukaz(2);" class="menu">druhy odkaz</a>
        <a href="#" id="a-3" onclick="javascript: ukaz(3);" class="menu">treti odkaz</a>
       </p>
</div>

<div id="main2">
        <div id="text-1" style="display:block;"><p>Prečo my, text k tomu.</p></div>
        <div id="text-2" style="display:none;"><p>Text k druhému odkazu.</p></div>
        <div id="text-3" style="display:none;"><p>Text k 3.</p></div>
</div>

<div id="main3">
        <img id="obr-1" src="http://uploader.imghost.sk/imagehosting/ytawcr4nuy4bdr8cfun1.jpg" title="main" class="topimage">
        <img id="obr-2" style="display:none;" src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/186067_1140336958_392704_q.jpg" title="main" class="topimage">
        <img id="obr-3" style="display:none;" src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/188030_21295715752_1289322_q.jpg" title="main" class="topimage">
</div>

<script>
 function ukaz(id) // to je funkce která se volá při kliknutí na odkazy s parametrem id
 {
   var i = 0;
   var pocet = 3;
   for ( i = 1; i <= pocet; i++ ) {
     if ( i == id ) {
        document.getElementById('obr-'+id).style.display='block'; 
        document.getElementById('text-'+id).style.display='block';
        pridejTridu(document.getElementById('a-'+id));
     }
       
     else {
         document.getElementById('obr-'+i).style.display='none';
         document.getElementById('text-'+i).style.display='none'; 
         odeberTridu(document.getElementById('a-'+i));
     }
   }
   
   return false;
 }
 
 function pridejTridu(obj)
  {
    obj.className +=" aktivni";
  }

  function odeberTridu(obj)
  {
  	obj.className -= " aktivni";
  }
</script>
SG
Profil *
#9 · Zasláno: 24. 4. 2011, 11:53:35
Odpovědět Citovat
A skus ma, prosim ta, navigovat, ako nastavit tu zmenu odkazu, na ktorom prave som. v css nie je taka moznost

A ako zadefinovat, aby najprv bralo v uvahu javascript a potom ten moj iframe?
SG
Profil *
#10 · Zasláno: 24. 4. 2011, 11:57:32
Odpovědět Citovat
Louka, dakujem moc.
Idem testovat
SG
Profil *
#11 · Zasláno: 24. 4. 2011, 12:22:29
Odpovědět Citovat
jedna chybicka, a kedze sa v JS nevyznam, neviem to zadefinovat. ked som priradil k "aktivni" v css, tak sa to aplikuje jedine na to aktivne tlacitko. tie ostatne dve pridu o upravu v css, ako to zadefinovat? pri prideni na stranku to sice je v poriadku, ale ked uz kliknem na hociktore tlacitko, rozhadze to a ostatne dve tlacitka necitaju upravu z css
Louka
Profil
#12 · Zasláno: 24. 4. 2011, 14:34:16 · Upravil/a: Louka
Odpovědět Citovat
SG:
Už to vidím.

Řešení (u mě funguje):
v css nadefinuj p#nadmenu a { /* zde jsou vlastnosti, které máš zatím u a.menu */ }
a třídu .aktivni předefinuj takto: p#nadmenu a.aktivni { /* definice co máš zatím u .aktivni */ }

a vyhoď z css třídu .menu (už není potřeba) a z html vyhoď class="menu"
SG
Profil *
#13 · Zasláno: 26. 4. 2011, 11:14:25
Odpovědět Citovat
Diky moc, vsetko funguje.
este som pripojil do body 
 onload="ukaz(1);"
, aby hned po prichode na index, zobrazilo aktualne tlacitko.
Funguje to super, Louka, chvalim ;)
Časová prodleva: 14 let

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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

0