| Autor | Zpráva | ||
|---|---|---|---|
| amorekj Profil |
#1 · Zasláno: 26. 10. 2011, 22:27:56
Dobrý den,
chtěl bych se zeptat, jak byste označili nějakou část obrázku a při najetí na tu část obrázku by se zobrazoval popis té části. Jde o to, že mám na stránce obrázek nějakého Ski areálu, který vlastní 3 sjezdovky. Já bych chtěl, aby když někdo najede myší na nějakou ze sjezdovek, aby se mu ukázala délka sjezdovky, obtížnost sjezdovky apod. Přikládám obrázek 
Děkuji za všechny Vaše nápady a návrhy :) |
||
| Sir Tom Profil |
#2 · Zasláno: 26. 10. 2011, 22:43:43
amorekj:
Také dobrý den, co třeba takto: Udělej velký div s oním obrázkem na pozadí a tento div bude obsahovat další divy (s abs. pozicováním), které budou mít navzájem různý atribut title (popis). Laicky řečeno - přes obrázek je dáno několik divů - každý s jiným popisem. :) |
||
| amorekj Profil |
#3 · Zasláno: 26. 10. 2011, 22:54:27
Sir Tom:
Dobrý nápad, ale vyšlo by to při nejmenším na cca 14 divů. A jak by se udělal titulek např. s 3 řádkami - kdybych chtěl, aby byla zvlášť na jiným řádku každá vlastnost dané sjezdovky? Jinak dík :) |
||
| Radek9 Profil |
#4 · Zasláno: 26. 10. 2011, 23:04:14 · Upravil/a: Radek9
amorekj:
Co vím, tak k tomuhle slouží tag <map>. Ale neumím s ním, takže ti blíž neporadím. |
||
| Sir Tom Profil |
#5 · Zasláno: 26. 10. 2011, 23:13:43 · Upravil/a: Sir Tom
amorekj:
To také není zas tak těžké - stačí použít události v JS. Například - najede-li kurzor na div(y), který patří na červenou sjezdovku, tak se zobrazí další div (na pozici kurzoru). A tento nový div si můžeš nastylovat a upravit dle svých představ... |
||
| amorekj Profil |
#6 · Zasláno: 26. 10. 2011, 23:22:21
Radek9: Dík.. Kouknu se na způsob použití..
Sir Tom: Nechápu přesně, jak to je myšlený a javascript moc neovládám. Nemohl bys prosím napsat nějaký příklad a přidat trochu i kódu, prosím? |
||
| Sir Tom Profil |
#7 · Zasláno: 26. 10. 2011, 23:49:57 · Upravil/a: Sir Tom
amorekj:
Tak dejme tomu, že mám div, které má pozadí daný obrázek a obsahuje další divy: <div style="background-image: url(sjezd.png); width: 150px; height: 100px; position: relative;" >
<div id="sjezd1" onmouseover="zobrazTitulek('sjezd1')" onmouseout="skryjTitulek('sjezd1')" style="width: xxpx; height: yypx; position: absolute; top: xypx; left: yxpx;">
<div id="titulek" style="display: none;" />
</div> A pak máš JS skript: <script>
function zobrazTitulekt(titulek){
document.getElementById(titulek).innerHTML("OBSAH titulku - klidně může obsahovat HTML značky");
document.getElementById(titulek).style.display = "invisible"; //PLUS další styly, aby se tento div zobrazil na místě, kde je kurzor.
}
function skryjTitulek(titulek){
document.getElementById(titulek).style.display = "none";
}
</script> |
||
| Radek9 Profil |
#8 · Zasláno: 26. 10. 2011, 23:52:15
Sir Tom:
Pro to je právě mnohem elegantnější ta mapa. Dají se tam nastavit všemožné tvary, ne jen obdelníky, které nabízejí divy. |
||
| Sir Tom Profil |
#9 · Zasláno: 26. 10. 2011, 23:56:34
Radek9:
Máš pravdu - myšlenka je koneckonců (až na tvar vybíraných částí) stejná... |
||
| Chamurappi Profil |
#10 · Zasláno: 27. 10. 2011, 00:21:28
Reaguji na Sira Toma:
„<div id="titulek" style="display: none;" />“ HTML není XML, lomítko se ignoruje, tohle je neuzavřený <div>.
Reaguji na amorkaj: Také doporučuji klikací mapu. |
||
| joe Profil |
#11 · Zasláno: 27. 10. 2011, 03:11:02 · Upravil/a: joe
Jde to udělat daleko jednodušeji a bez zbytečných zastaralostí, jako je klikací mapa (nevýhodou je, že bys musel neustále generovat nové pozice v případě změny, zvětšení nebo zmenšení obrázku) :-) a JavaScript je v tomto případě zcela zbytečný a akorát přináší další práci. Jak to udělat se inspiruj třeba na mých stránkách zde. (je třeba kliknout na červený odkaz, abys zůstal na té stránce).
|
||
| Sir Tom Profil |
#12 · Zasláno: 27. 10. 2011, 11:01:00
Chamurappi:
Jejda - pravda - překlikl jsem se.... |
||
| Radek9 Profil |
#13 · Zasláno: 27. 10. 2011, 12:08:00
joe:
Nějak nechápu, co přesně tam máme hledat. Jestli myslíš ty kolečka s čísly, tak to jsou doopravdy čtverce. Pokud chce, aby celá sjezdovka sloužila jako odkaz (tedy aby tam bylo například i možné zvýraznění atp.), je tvé řešení naprosto nepoužitelné. |
||
| amorekj Profil |
#14 · Zasláno: 27. 10. 2011, 13:34:13
Zkoušel jsem spojit klikací mapu s tím javascriptem a nejde to moc do sebe. Navíc používám cotojátka a nevím, jestli se to náhodou netluče.
Byl dobrý nápad "klikací mapa", ale potřeboval bych do toho připojit i víceřádkový popisek, který nemám. :( [Jinak javascriptu fakt nerozumím, tak pokud máte někdo nějaký přesný nápad, tak ho pošlete, ale chtělo by to celý, abyste nenapsali - a teď tam akorát přidáš to a to a ono to pojede..] |
||
| Radek9 Profil |
#15 · Zasláno: 27. 10. 2011, 14:40:07
amorekj:
Na ten JS se úplně vykašli. Prostě těm <area> elementům nastav title a cotojátka by si to měly vzít. Pokud to má i někam odkazovat, tak přidej i atribut href. |
||
| joe Profil |
#16 · Zasláno: 27. 10. 2011, 20:37:33
Radek9:
U takto malé oblasti je jedno, jestli se jedná o skutečné kolečko nebo o čtverec. V tomto případě bych se naopak přikláněl ke čtverci, protože čím větší ta oblast je, tím je snažší na ni najet. Pochopitelně jsem myslel ty kolečka s čísly, co jiného :-) protože to je přesně to, co amorekj chce. A co tam je k vidění? Že není potřeba na takovou věc JavaScript, ale dá se vyjít jen s CSS. Z toho mi jednoznačně vyplývá, že moje řešení je ze zdejších zmíněné naopak nejvíc použitelné. Důvod, proč nepoužít klikací mapu jsem napsal, je s tím víc práce, která dle mě ještě víc znepříjemňuje uživateli použitelnost. Ale pro mě za mě, udělejte si to kdo jak chcete :-) |
||
| amorekj Profil |
#17 · Zasláno: 27. 10. 2011, 21:08:45
Mě to řešení s map přišlo jako nejvíc zajímavé a sice více pracné, ale výsledek bude stát za to.
Akorát nevím, jak mám udělat víceřádkový popisek nebo prostě něco takového, že kdybych přejel přes nějakou ze sjezdovek tak by se zobrazili údaje o tom (ale aby to bylo přehlednější tak každý na svým řádku). Nevím jestli to jde i přes CSS nebo tak, ale bylo by to určitě dobrý, protože by pak určitě šlo i přidat do toho popisku obrázek té sjezdovky. A jinak mi nejde zobrazit normální title (titulek) určitého <area> v citojátkách, jinak pokud je oddělám tak vše naskočí. Přijde mě to docela divný. V ostatních případech to nedělá - např. v menu, u odkazů apod. |
||
| joe Profil |
#18 · Zasláno: 27. 10. 2011, 22:37:19
amorekj:
Můžeš zkusit dát pseudotřídu :after / :before na hover oblasti (tedy area:hover:after { content: ... } Což by bylo doplňující. Nevýhodou je, že takový obsah pak není součástí samotného HTML kódu, takže (předpokládám) že nebude indexován. Cotojátka jsem nepoužíval, v této době se už dají nahradit pomocí CSS (funkční v novějších prohlížečích, právě přes :after / :before) |
||
| margin Profil * |
#19 · Zasláno: 28. 10. 2011, 11:36:09
joe:
„Můžeš zkusit dát pseudotřídu :after / :before na hover oblasti (tedy area:hover:after { content: ... }“ Nefunfuje, area není vidět, takže není vidět ani content. Takže podle mého názoru nejvhodnější se mi stále jeví klasická kombinace map, area a JavaScript. Zmatlal jsem ukázku, která vychází z příkladu na jpw.cz, Skrývání a odkrývání textu na přání uživatele. Jde to udělat i lépe, ale neumím. Hover popis k obrázku – přístupný i bez JS a CSS Udělaný je jenom popis modré a červené sjezdovky. |
||
| amorekj Profil |
#20 · Zasláno: 28. 10. 2011, 23:20:30
Děkuji moc :)
|
||
| joe Profil |
#21 · Zasláno: 29. 10. 2011, 01:15:34
margin:
„Nefunfuje, area není vidět, takže není vidět ani content.“ Proč bych nemohl? Můžu si jí zobrazit, area jako každý jiný tag by měl jít stylovat, to že to v některých prohlížečích nefunguje není můj problém :-) Například takto to funguje dle mého očekávání - pokud se najede na slovo "diskuse" (bohužel jen v Opeře, pomocí CSS si zviditelním area a nastyluju, pozice zůstavají, takže získám dvě klikací místa) <style>
area:hover {
cursor: help;
background: yellow;
position: relative;
display: block;
}
area:hover:after {
content: 'test';
display: block;
}
</style>
<img src="http://diskuse.jakpsatweb.cz/img/logo.png" usemap="#logo">
<map name="logo">
<area shape="rect" coords=" 112, 18, 230, 58" href="http://diskuse.jakpsatweb.cz">
</map>„Takže podle mého názoru nejvhodnější se mi stále jeví klasická kombinace map, area a JavaScript.“ Já nevím proč byste všude dávali JS, daleko jednodušší mi to přijde tak, jak to mám zrovna na té stránce a nemusím se dělat s nějakýma mapama. Ahá, teprve teď si všímám, že amorekj chce najetí na celou sjezdovku. Tak to se mapám nevyhne, když tam jdou tvořit vlastní tvary (čekal jsem, že chce jen ty kolečka / obdélníčky s obrázkama) „Hover popis k obrázku – přístupný i bez JS a CSS“ Vylepšil bych to tak, že funkce init() by byla document.body.className = "js"; a pak v CSS si skryju nebo zobrazím to, co potřebuji., protože vím, že JavaScript je zapnutý. Taky se tam moc opakuje zobrazSkryj(), spíš bych si udělal nějaký svůj atribut u tagu area, kam bych napsal ID toho společného elementu, který s tou oblastí souvisí. JS pak umístil tam, kde má být, ale to už se jedná jenom o takové vyšperkování :-) Takhle to taky funguje... |
||
| Chamurappi Profil |
#22 · Zasláno: 29. 10. 2011, 05:16:57
Reaguji na joa:
„bez zbytečných zastaralostí, jako je klikací mapa“ Jak jsi přišel na to, že jsou klikací mapy zastaralé? Dokud se nikdo neodváží rozšířit clip o jiné tvary, tak jsou nenahraditelné.
„spíš bych si udělal nějaký svůj atribut u tagu area, kam bych napsal ID toho společného elementu“ Já bych ho dal do hrefu (za mřížku) a pak zkusil zajistit, aby to lidem s vypnutým JS fungovalo na prokliknutí místo na onmouseover.
|
||
| joe Profil |
#23 · Zasláno: 29. 10. 2011, 10:14:20
Chamurappi:
„Jak jsi přišel na to, že jsou klikací mapy zastaralé?“ Jsem čekal, kdo kdy přijde s podobnou otázkou :-) Myslel jsem v případě těch malých koleček, protože klasické použití tagů mi přijde daleko jednodušší a efektivnější způsob. „Já bych ho dal do...“ Proč ne, kdyby nechtěl přímo po kliknutí najet na nějaké další informace, místo hledání odkazu "více". Asi by to tak ale bylo nejlepší. |
||
|
Časová prodleva: 12 let
|
|||
0