Zmena divu z jedného na druhý

Fórum › JavaScript, AJAX, jQuery

Onsi0

Stálý člen

22. 12. 2007 #1

mám napríklad 3 divy 2 mám zobrazené stále ale keď ukážem myšou na ten menší tak ten druhý sa zmení na iný (nejde mi len o zmenu farby ako je v príklade potrebujem úplne iný div čo bude mať len rovnaké umiestnenie a rozmery ako ten prvý).

<div onmouseover="TOTO_POTREBUJEM_PORADIŤ" id="divnaktorysapojdemysou"></div>

divnaktorysapojdemysou {

width: 100px;

height: 50px;

background-color: red;

}



normalnydiv {

width: 500px;

height: 100px;

background-color: blue;

}



zmenenydiv {

width: 500px;

height: 100px;

background-color: green;

display: none;

}

dúfam že ste pochopili a ak hej tak prosím pomôžte

Nahlásit jako SPAM

IP: 91.127.11.–

Onsi0

Stálý člen

23. 12. 2007 #2

našiel som na net takýto script:

function invisible(theDiv) {

     var elem = document.getElementById(theDiv);

    elem.style.display = (elem.style.display == "none")?"":"none";

}



function visible(theDiv) {

     var elem = document.getElementById(theDiv);

    elem.style.display = (elem.style.display == "block")?"":"block";

}



<div  onmouseover="invisible('page');visible('page2');" onmouseout="visible('page');invisible('page2');" id="divnaktorysapojdemysou"></div>

len nedalo by sa to upraviť aby mi ho nezobrazilo hneď celý ale aby sa zobrazoval jednu sekundu pričom aby ho na začiatku bolo vydieť pri 0s 0%, 0,1s 10%, 0,2s 20%... 1s 100%

Nahlásit jako SPAM

IP: 91.127.11.–

Petroff0

Věrný člen

26. 12. 2007 #3

Dá se to udělat tak, že se ovládané bloky page a page2 vloží do obalových bloků, kterým se nastaví šířky.
Javascriptem se vnitřním blokům nastavuje šířka v procentech od 0% do 100% (a při skrývání od 100% do 0%)

Fungující ukázka (testováno pouze v IE a FF)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Over/Out javascript scroller</title>

<script type="text/javascript">

var pocet_kroku=20;   /* dvacet kroků */

var trvani=500;       /* 2x500 = 1000ms = 1s */



function nuluj(el) {

     clearInterval(el.timer);

     el.delta=null;

     el.timer=null;

     el.style.width = "";

     }



function krok(id) {

     var el = document.getElementById(id);

     var act_w = parseInt("0"+el.style.width,10);

     if ((el.delta>0)&&(act_w > 99)) {nuluj(el);return}

     if ((el.delta<0)&&(act_w < 1)) {nuluj(el); el.style.display="none";return}

     el.style.width = (act_w + el.delta * 100/pocet_kroku) +"%";

}



function skryj(theDiv) {

     var elem = document.getElementById(theDiv);

     if (elem.style.display=="none") return;                    /* Uz je skryty !!! */

     elem.style.display = "block";

     if (elem.style.width=="") { elem.style.width = "100%"; }

     elem.delta = -1;

     if (!elem.timer) elem.timer=setInterval("krok('"+theDiv+"')",trvani/pocet_kroku);

}

function zobraz(theDiv) {

     var elem = document.getElementById(theDiv);

     if (elem.style.display=="block") if (!elem.timer) return;  /* Uz je zobrazeny !!! */

     elem.style.display = "block";

     if (elem.style.width=="") { elem.style.width = "0%" }

     elem.delta = +1;

     if (!elem.timer) elem.timer=setInterval("krok('"+theDiv+"')",trvani/pocet_kroku);

}

</script>

<style type="text/css">

* {margin:0;padding:0}

ul

 {

 letter-spacing: 5px;

 font: 25px/1 "Lucida Console","Courier New",monospace;

 list-style: none;

 margin-top:1em;

 }

li

 {

 position:relative; /****** nutné pokud použiješ position:absolute *******/

 width:16ex;        /****** nutné nastavit šířku *************************/

 margin-left:1em;

 height: 3ex;

 }



#page,#page2

 {

 position:absolute;

 left: 0px;

 top: 0px;

 color:red;

 background: yellow;

 border: 1px solid red;

 padding-left: 2px;

 overflow:hidden;        /***** nutné (zkus to bez něj) *************/

 }



#rizeni              /***********  OVLÁDACÍ PRVEK  *************/

 {

 width: 8em;

 color: yellow;

 background: black;

 border: 1px double black;

 margin:2em;

 text-align: center;

 cursor:pointer;

 }

</style>

</head>

<body>



<ul>

   <li><div id="page" style="display:block">0123456789</div></li>

   <li><div id="page2" style="display:none">ABCDEFGHIJ</div></li>

</ul>



<div id="rizeni" onmouseover="skryj('page');zobraz('page2');" onmouseout="zobraz('page');skryj('page2');">

Zkus over/out

</div>



</body>

</html>

Totéž v připojeném souboru:

Nahlásit jako SPAM

IP: 89.102.96.–

Onsi0

Stálý člen

27. 12. 2007 #4

Dík aj toto sa zíde práve som to potreboval ale nepochopili sme sa. Ja som potreboval nech ide od 0 po 100 opacity nie width

Nahlásit jako SPAM

IP: 91.127.11.–

Petroff0

Věrný člen

27. 12. 2007 #5

Díky - tímhle jsi mě dostal. Ještě teď se směju. Ale jak říkáš - když to funguje pro width, snadno by to mělo jít předělat na opacity.
Problém je, že jsem ji ještě nikdy nepoužíval - ale mrknu se na ni.

Nahlásit jako SPAM

IP: 89.102.96.–

Petroff0

Věrný člen

28. 12. 2007 #6

Teď jsem to (po pozorném přečtení) teprve pochopil => jde ti o tzv. prolínačku obsahů v jednom bloku ....tak to jsem byl vedle jak ta jedle a je třeba to předělat (no problem) .
Zjistil jsem že průhlednost se v CSS standardech nevyskytuje, takže to řešení bude třeba "ušít na míru" podle typu obsahu těch bloků z tvého kódu => uveď příklad: a) původní blok b) blok, který ho překryje
[ Neboť jsou různé možnosti typů obsahu: text, text+pozadí, komplex=obsah složený z bloků či inline prvků, obrázek gif/jpg/bmp, obrázek png, flash/popř. scriptem vkládaná reklama ]

Nahlásit jako SPAM

IP: 89.102.96.–

← Zpět na seznam vláken ← Zpět do Fóra