Autor Zpráva
Vitality
Profil
Dobrý den,
Jsem začátečník v javascriptu a hledám řešení nejspíš bude primitivní ale na netu to nikde najít nemůžu a sám taky nemůžu přijít na to jak.
Jde o obrázek na kterém je 10 prvků. Po najetí myší (pomoci nastavených coordinatů #usemap na některý z prvků) by se měl daný prvek zobrazit(na obrazku je třeba mezera a po najetí myší v mezeře se zobrazí kruh nebo cokoli). Jenže ty prvky nejsou na sobě závislé a tak může být spousta kombinaci těch prvků. A než vypisovat 50 řádků kde budu psát if document.getElementByID("").src.match do blabla bych se upsal.
Napdalo mě že by řešení mohlo být takové že proložím 2 obrazky(pod stejně pod sebe) jeden bez prvků, druhý se všemi a po najetí myší se změní visibility dané area a z obrazku pod tím se zobrazí prvek. Ale neumím dat 2 obrázky nějak chytře a správně pod sebe. Poradíte mi s tím prosím? Nebo máte lepší řešení? Vložil bych obrázek který chci měnit ale nvm jak na to mezi těmi 2 tagy :D Nebo mě taky napadalo onMouseOver="changeImg()" pak getElementById().src a tady vložit 2 src pomoci čárky(,), a u jednoho nastavit pruhlednost opacity=0.5 ale zase nemůžu najít druhý img.src protože id není nikde napsaný. Prostě pokud mě někdo pochopil zhruba jak to myslím zkuste mi poradit. Děkují
Michal Maršálek
Profil
Dobrý den,
pokud chceš dát dva obrázky přes sebe, tomu prvnímu dej position: absolute.
Vitality
Profil
Mohl bych vložit víc než 2 img na jedno místo nějakým způsobem?
Michal Maršálek
Profil
Vitality:
Bere se to vůči oknu. Jestli to chceš mít stejné, umísti obrázek na pozici 0,0.

Vitality:
Ano, dáš každému kromě toho posledního position: absolute.
Vitality
Profil
Michal Maršálek:
no a poslední:) Jak vypadá příkaz kterým se nastavuje umístění obr nebo čehokoli na pozici 0,0? Mohl byste napsat a už vám dám pokoj :D Díky
Michal Maršálek
Profil
Vitality:
left: 0px; top: 0px;
margin
Profil *
Michal Maršálek:
Bere se to vůči oknu.
Neplatí u vnořené pozice, občas se něco takového hodí.

Vitality:
Koukni na CSS pozicování a na Position, a zatím jsi na to nenarazil, ale pokud používáš pozicování, je potřeba znát i Z-index
Michal Maršálek
Profil
margin:
Neplatí u vnořené pozice, občas se něco takového hodí.
Ano, vím, že u vnořené pozice se to počítá od pozice nadřazeného napozicovaného prvku, ale já jsem reagoval na něco úplně jiného, ale Vitality to mezitím smazal.
Vitality
Profil
Dobrý den, nakonec jsem si stejně nevěděl rady jak udělat ten program. Příkládám to celé podívejte se prosím a zkuste mi poradit:http://uloz**to.cz/xfswQANf/program-zip. (bez hvězdičky mě to nepouští odeslat, tak ju odstraňte)
Narazil jsem na problémy, které nejsem schopný vyřešit s mojima znalosti js a html.
1)Když najedete na nějaký rezistor měl by se zobrazit a při onmouseout zmizet. Jenže tu čudně bliká(mizí a znovu se objevuje) i když jste ve vyznačené ploše, kde by se to mělo plunule zobrazovat a až po opuštění zmiznout.
2)Když chci udělat funkci onclick() je v programu(nastavený na napětí=>kroužek) tak mi nezustane. Protože když kliknu tak se zobrazí=to je v pořádku, ale když odjedu myší začne fungovat onmouseout a obrazek stejně zmizí. Chtěl bych nastavit aby pří prvním kliknutí se obrazek zobrazil při druhém zmiznul a tak dále.
3)Když smažete u jakéhokoli prvku onmouseout=>znamená že obrazek nebude mizet program přestává fungovat a další prvky se vůbec nezobrazují. A jelikož je cílem aby se dálo zobrazit jednotlivě, nic a všechno naraz to nefunguje dobře.
4)Dá se to vůbec vymyslet nějak jinak jednodušším způsobem? Napadlo mě ořiznutí obrázku pomoci js jak je třeba v odkazu http://www.chose.cz/priklady/orez-obrazku/ akorát se nastaví napevno pro každý prvek a pří najetí myši zmizí a objeví se obrazek pod ním. Jenže to oříznutí nezvládnu, je tam 100 řádků a nevýznám se v tom.
5)Je způsob jak to udělat abych to pochopil aj já? :D Abych nemusel zatěžovat ostatní..

No tak jestli někdo se odváží mi pomoci se budu hodně dívit :D Ale budu moc vděčný jak někdo poradí.
Díky moc všem zájemcům
Michal Maršálek
Profil
1. Protože když necháš zobrazit ten jiný obrázek tak už vlastně nemáš kurzor nad tím původním obrázkem a proto se vyvolá onmouseout.
2. Vytvoř přii kliknutí zkontroluj zda je skryto a pak zobraz či zda je zobrazeno a pak skryj.
3. Nechápu.
4. Tak těch pár obrázků ořízni ručně.
5. Určitě.

Nepřijde ti hloupé tolik věcí pořád opakovat? Style se dají zapsat pro všechny obrázku nejednou a stejně tak funkce které bude obsluhovat eventy.

Základní funkčnost (bez toho klikání, to jsem zcela nepochopil) by mohla být takhle:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<style>
#obrazekObvod{
    width: 400px;
    height: 350px;
}
</style>
</head>
<body>
<img src ="prvky_theveninu/nic.png" id="obrazekObvod" usemap ="#vyberRezistoru">
<map name="vyberRezistoru">
<area shape="circle" coords="59,142,55" onmouseover="nastavObrazek('u')"  onmouseout="nastavObrazek('nic')">
<area shape="rect" coords="118,29,146,128" onmouseover="nastavObrazek('r1')" onmouseout="nastavObrazek('nic')">
<area shape="rect" coords="118,197,146,293" onmouseover="nastavObrazek('r2')" onmouseout="nastavObrazek('nic')">
<area shape="rect" coords="176,143,236,182" onmouseover="nastavObrazek('r3')" onmouseout="nastavObrazek('nic')">
<area shape="rect" coords="245,196,271,283" onmouseover="nastavObrazek('r4')" onmouseout="nastavObrazek('nic')">
<area shape="rect" coords="296,198,318,282" onmouseover="nastavObrazek('uz')" onmouseout="nastavObrazek('nic')">
<area shape="rect" coords="336,195,360,283" onmouseover="nastavObrazek('rz')" onmouseout="nastavObrazek('nic')">
</map>
<script>
function nastavObrazek(jmeno){
    document.getElementById("obrazekObvod").src="prvky_theveninu/"+jmeno+".png";
}
</script>  
</body>  
</html>
Nepotřebuješ k tomu žádné prolínání obrázků ani nic podobného - je to jen jeden obrázek a podle toho, kam najedeš se mění.
Vitality
Profil
Michal Maršálek:
1)Takže když do všech obrázku zadam usemap tak se problém vyřeší? Chápu to dobře?
3)myslel jsem to tak že když kliknu a nechám obrázek zobrazený bude zobrazen, ale v momentě když myš dam bokem zafunguje onmouseout a daný obrazek stejně zmizne(což bych nechtěl). Má to fungovat že uživatel si zvolí kolik těch prvků tam bude zobrazeno. Momentálně mě nenapadá jak bych to vyřešil
4)Když to oříznu ručně jak naskládám na sebe př.5kousku z jednoho obrázku vedle sebe a pak ještě navrch jeden bez prvků? Vlastně to jde ale když sjem to zkoušel při umístění ořezaných obrázku mezi ními se vytváří mezera a pak nesedí přesně na ten celý.
5)To je sice fajn že určitě, nějaký náznak možná by pro mě byl užitečnější :)

Hloupé to možná je, ale nevím totíž jak. Můžeš vložit krátký zápis shrnutí funkci abych věděl jak to funguje a podle toho to pak udělám všechno.
Jinak děkují moc za rady


Michal Maršálek:
Nepotřebuješ k tomu žádné prolínání obrázků ani nic podobného - je to jen jeden obrázek a podle toho, kam najedeš se mění.
Všechno vypadá mnohem jednodušší to ano, přehlednější to taky. A ted kontrolní otázka. Uživatel si chce pomoci onclick() kde mů obrazek zustavá si che nechat zobrazit všechno naraz, nebo jen R1 R2 a U?? Co ted, o to mi jde, a neumím to jinak vysvětlit. Prostě nechat zobrazit 3 prvky nebo víc/míň, jak na to
Michal Maršálek
Profil
Vitality:
Takže když do všech obrázku zadam usemap tak se problém vyřeší?
Ano, ale je to poněkud hloupé řešení.

Prostě nechat zobrazit 3 prvky nebo víc/míň, jak na to
No, tak to už samozřejmě pomocí jednoho img nepůjde (pokud nechceš mít těch obrázků uložených 128 - což je blbost). Vyřešil bych to tak, že bych obrázkům vymazal pozadí a pak je naskládal na sebe. Důležité přitom je, aby obrázek s mapou byl navrchu - aby to neblikalo.
Vitality
Profil
Zkoušel jsem to s těmi usemap. Je to opravdu hloupé a nepoužitelné. První obrázek se zobrazí a vybledné, druhý není skoro vidět a ten třeti když se zobrazí tak ten první jako by tam ani nebyl. Tudy cesta nevede.
S tím pozadím možná to fungovat bude možná ne, ale kdybych řekl pravdu vůbec si nedokážu přestavit co se tim myslí a jak by se to udělalo :D Každopádně díky za pomoc, na tohleto ještě nemám, je to těžší než se zda :) Tedy alespoň pro mě :) Díky

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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