NOVINKA! E-learningové kurzy umělé inteligence. Nyní AI za nejlepší ceny. Zjisti více:
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!

Diskuze: Změna určité části obrázku po kliknutí a danou určitou část

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
Neaktivní uživatel
Člen
Avatar
Neaktivní uživatel:27.10.2016 23:24

Dobrý den,

jak docílím toho, aby se změnila určitá část obrázku po kliknutí na danou určitou část?

HTML:

<map name="klavesnice">
    <div id="Q">
    <area href="bude#doplněno" alt="Q" shape=rect coords="58,86,89,117">
    </div>
</map>

CSS:

#Q {
    background-image: url('klavesnice.jpg')
}

#Q:hover {
    background-image: url('klavesnice_Q.jpg')
}
Editováno 27.10.2016 23:24
Odpovědět
27.10.2016 23:24
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel
Člen
Avatar
Neaktivní uživatel:28.10.2016 0:22

Druhá možnost je, že bych vyřešil text v obrázku přes pozicování, jenže mě štve, že když zvětším nebo zmenším stránku, tak text nezůstane v obrázku, ale na svým souřadnicích.

Nahoru Odpovědět
28.10.2016 0:22
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel
Člen
Avatar
Neaktivní uživatel:28.10.2016 1:50

Tak, zarovnáno na střed, text napozicován.

Pokud stránku zvětšuji, tak se mohu posouvat pouze doprava, ale doleva nemohu, proč?

<div style="display:flex; justify-content:center; align-items:center;">
               <div class="pismena_v_klavesnici">
                   <img src="klavesnice.png" usemap="#klavesnice">
                   <div id="Q">
                       <h3>Q</h3>
                   </div>
                   <div id="W">
                       <h3>W</h3>
                   </div>
                   <div id="E">
                       <h3>E</h3>
                   </div>
                   <div id="R">
                       <h3>R</h3>
                   </div>
                   <div id="T">
                       <h3>T</h3>
                   </div>
                   <div id="Z">
                       <h3>Z</h3>
                   </div>
                   <div id="U">
                       <h3>U</h3>
                   </div>
                   <div id="I">
                       <h3>I</h3>
                   </div>
                   <div id="O">
                       <h3>O</h3>
                   </div>
                   <div id="P">
                       <h3>P</h3>
                   </div>
               </div>
               </div>
Nahoru Odpovědět
28.10.2016 1:50
Neaktivní uživatelský účet
Avatar
Jan Poláček
Tvůrce
Avatar
Jan Poláček:28.10.2016 6:14

A co je cílem? pokud jen :hover nějakého znaku, tak bych opravdu využil jen CSS a klávesnici bych si normálně nastyloval bez obrázků.

Nahoru Odpovědět
28.10.2016 6:14
Instrukce na adrese 0x77104f29 odkazovala na adresu paměti 0x00000014. S pamětí nelze provést operaci: written.
Avatar
Neaktivní uživatel
Člen
Avatar
Odpovídá na Jan Poláček
Neaktivní uživatel:28.10.2016 13:14

Aktivní okno bych řešil později, teď se mi naskytl problém, viz příspěvek výše.

Cílem by ale bylo, aby se písmenko (tedy celý čtvereček) obarvil až po kliknutí na něj, nikoli po přejetí.

Editováno 28.10.2016 13:14
Nahoru Odpovědět
28.10.2016 13:14
Neaktivní uživatelský účet
Avatar
Ján Timoranský
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Ján Timoranský:28.10.2016 14:57

To čistým CSSkom nedosiahneš. Musel by si to robiť cez checkboxy, to skôr urob cez JS.

Nahoru Odpovědět
28.10.2016 14:57
Find what you love and let it kill you.
Avatar
Neaktivní uživatel
Člen
Avatar
Odpovídá na Ján Timoranský
Neaktivní uživatel:28.10.2016 15:28

Dobře, co ten problém se zvětšením okna?

Nahoru Odpovědět
28.10.2016 15:28
Neaktivní uživatelský účet
Avatar
Ján Timoranský
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Ján Timoranský:28.10.2016 15:49

Jednoducho, nerob klávesnicu ako obrázok, poskladaj ju z html elementov a naštýluj csskom. Tým pádom ti klávesy budú sedieť s popiskami kláves.

Nahoru Odpovědět
28.10.2016 15:49
Find what you love and let it kill you.
Avatar
Ján Timoranský
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Ján Timoranský:28.10.2016 15:50

Takýto príklad som našiel.

Nahoru Odpovědět
28.10.2016 15:50
Find what you love and let it kill you.
Avatar
Neaktivní uživatel
Člen
Avatar
Odpovídá na Ján Timoranský
Neaktivní uživatel:28.10.2016 16:38

Zajímavé a krásné řešení, ale to opravdu nejde jinak?

Mně se to začalo dělat až poté, co jsem zarovnal klávesnici i s vnořeným textem na střed.

Nahoru Odpovědět
28.10.2016 16:38
Neaktivní uživatelský účet
Avatar
Ján Timoranský
Tvůrce
Avatar
Ján Timoranský:28.10.2016 16:45

No musel by si scalovať text, súčasne s klávesnicou. Aspoň ak dobre chápem problému.

Nahoru Odpovědět
28.10.2016 16:45
Find what you love and let it kill you.
Avatar
Neaktivní uživatel
Člen
Avatar
Neaktivní uživatel:29.10.2016 18:05

Tak tedy: http://ejines.tk/

Můžete si všimnout, že když stránku zvětšujete, omezuje se možnost posunutí doleva.

Editováno 29.10.2016 18:05
Nahoru Odpovědět
29.10.2016 18:05
Neaktivní uživatelský účet
Avatar
maxy obr
Člen
Avatar
Odpovídá na Neaktivní uživatel
maxy obr:29.10.2016 18:18

Jde to pomocí obrázku a js soure map. Podívej se na to a když budeš hledat, tak najdeš i responzivní řešení.

 
Nahoru Odpovědět
29.10.2016 18:18
Avatar
Neaktivní uživatel
Člen
Avatar
Odpovídá na maxy obr
Neaktivní uživatel:29.10.2016 18:39

Omluv mě, pokud mi něco někdy hned nedojde, ale teprve začínám.

Dal jsem obrázku ID a v CSS jsem nastavil tyto hodnoty:

max-width: 100%;
height: auto;

Na mobilu, když přiblížím obrázek, posouvání funguje, ale na desktop stále ne.

Nahoru Odpovědět
29.10.2016 18:39
Neaktivní uživatelský účet
Avatar
maxy obr
Člen
Avatar
Odpovídá na Neaktivní uživatel
maxy obr:29.10.2016 19:06

Asi moc nerozumím, tomu co chceš ale když začínáš proč sis zvolil něco tak složitého.

 
Nahoru Odpovědět
29.10.2016 19:06
Avatar
Neaktivní uživatel
Člen
Avatar
Odpovídá na maxy obr
Neaktivní uživatel:29.10.2016 19:53

Tak snad to nedělá jenom mně.

Když stránku přiblížíš tak o 250% a více, nejde posouvat doleva, ale jenom doprava.

Přiložím ti přílohu.

Nahoru Odpovědět
29.10.2016 19:53
Neaktivní uživatelský účet
Avatar
Josef Kuchař - Pepa489
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Josef Kuchař - Pepa489:30.10.2016 10:57

Protože stránka se z výchozí polohy dá scrollovat pouze doprava

Nahoru Odpovědět
30.10.2016 10:57
2x piš, jednou debuguj
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 17 zpráv z 17.