NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
S účinností od 26. 3. jsme aktualizovali Zásady zpracování osobních údajů – doplnili jsme informace o monitorování telefonických hovorů se zájemci o studium. Ostatní části zůstávají beze změn.

Diskuze: HTML <map> Tag - nefunkčný na webe

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

Aktivity
Avatar
Ivana Červíková
Člen
Avatar
Ivana Červíková:30.1.2020 21:51

Ahojte, pokúšam sa na stránke sfunkčniť zdrojový kód s <map> tagom. V aplikácií mi to pekne zobrazuje, avšak keď to vložím na stránku, tak mi zobrazovanie nejde.

HTML:

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Elektrické vozidlo</title>
  <link href="css/course.css" rel="stylesheet" />
  <link href="css/prism.css" rel="stylesheet" />
  <script language="JavaScript" src="script/course.js"></script>
  <script language="JavaScript" src="script/resize.js"></script>
  <script language="JavaScript" src="script/prism.js"></script>
</head>
<body onload="ScoInit()" onunload="ScoFinish()">
  <!-- headerTheory -->
  <div class="page-header">
    <div class="A0_topic">
    </div>
    <div class="headerTheory">
    </div>
    <div class="page-header-text">
      Elektrické vozidlo
    </div>
  </div>
  <p class="welcome">
    <span style="font-size: 1em;">Seznamte se s komponentami elektrického vozidla
    na blokovém schématu. Najdete i vysvětlení dostupných 4mm bezpečnostních měřicích
    zdířek.</span>
  </p>
  <div id="T00">
    <p class="mouse">
      <span style="font-size: 1em;">Přejeďte ukazatelem myši po obrázku a zjistěte
      více o jednotlivých komponentách karty.</span>
    </p>
  </div>
  <div class="divhide" id="T02">
    <p class="info">
      <span style="font-size: 1em;">Převodovka</span>
    </p>
  </div>
  <div class="divhide" id="T03">
    <p class="info">
      <span style="font-size: 1em;">Spínač zapalování a spuštění,&nbsp;plynový pedál,&nbsp;krabice
      diagnostiky</span>
    </p>
  </div>
  <div class="divhide" id="T06">
    <p class="info">
      <span style="font-size: 1em;">Karoserie&nbsp;mínus/hmotnost</span>
    </p>
  </div>
  <div class="divhide" id="T07">
    <p class="info">
      <span style="font-size: 1em;">Toky energie&nbsp;motor/generátor&nbsp;–&nbsp;převodovka</span>
    </p>
  </div>
  <div class="divhide" id="T09">
    <p class="info">
      Motor/generátor
    </p>
  </div>
  <div class="divhide" id="T12">
    <p class="info">
      <span style="font-size: 1em;">Invertor</span>
    </p>
  </div>
  <div class="divhide" id="T13">
    <p class="info">
      <span style="font-size: 1em;">Invertor&nbsp;–&nbsp;měřicí zdířky&nbsp;napětí
      meziobvodu</span>
    </p>
  </div>
  <div class="divhide" id="T15">
    <p class="info">
      <span style="font-size: 1em;">Invertor&nbsp;– DC/AC měnič</span>
    </p>
  </div>
  <div class="divhide" id="T16">
    <p class="info">
      <span style="font-size: 1em;">Invertor&nbsp;– DC/DC měnič</span>
    </p>
  </div>
  <div class="divhide" id="T17">
    <p class="info">
      <span style="font-size: 1em;">Vysokonapěťová baterie</span>
    </p>
  </div>
  <div class="divhide" id="T18">
    <p class="info">
      <span style="font-size: 1em;">Vysokonapěťovábaterie&nbsp;–&nbsp;měřicí zdířky:
      Nabíjecí&nbsp;a&nbsp;vybíjecí proud,&nbsp;napětí baterie.&nbsp;Přemosťovací
      zástrčky&nbsp;zde&nbsp;musí&nbsp;být&nbsp;zasunuty. Bez&nbsp;přemosťovacích
      zástrček&nbsp;nebo bez&nbsp;&nbsp;nízkoohmové&nbsp;měřeného rozsahu&nbsp;&nbsp;ampérmetru&nbsp;se&nbsp;&nbsp;zobrazuje&nbsp;chyba&nbsp;a&nbsp;&nbsp;systém&nbsp;je&nbsp;nefunkční.&nbsp;Zde&nbsp;se&nbsp;&nbsp;spojení&nbsp;s&nbsp;invertorem&nbsp;přeruší&nbsp;a&nbsp;vytvoří.</span>
    </p>
  </div>
  <div class="divhide" id="T20">
    <p class="info">
      <span style="font-size: 1em;">Kódovací zástrčka;&nbsp;musí&nbsp;být&nbsp;zasunuta&nbsp;pro&nbsp;&nbsp;správné&nbsp;přiřazenísystému,&nbsp;pro&nbsp;&nbsp;zobrazení&nbsp;na&nbsp;monitoru</span>
    </p>
  </div>
  <div class="divhide" id="T21">
    <p class="info">
      <span style="font-size: 1em;">Potenciometr&nbsp;pro&nbsp;&nbsp;změnu&nbsp;&nbsp;dostupné&nbsp;&nbsp;kapacity
      baterie. Baterie&nbsp;přitom&nbsp;zachová&nbsp;svůj&nbsp;stav nabití&nbsp;mezi&nbsp;60
      %&nbsp;a&nbsp;80 %&nbsp;své&nbsp;celkové&nbsp;kapacity.</span>
    </p>
  </div>
  <div class="divhide" id="T22">
    <p class="info">
      <span style="font-size: 1em;">Měřicí zdířky&nbsp;pro&nbsp;větev vedení&nbsp;k&nbsp;motor-generátoru</span>
    </p>
  </div>
  <div class="divhide" id="T23">
    <p class="info">
      <span style="font-size: 1em;">Toky energie&nbsp;motor/generátor&nbsp;–&nbsp;převodovka</span>
    </p>
  </div>
  <div class="divhide" id="T24">
    <p class="info">
      <span style="font-size: 1em;">Elektrotechnické značky&nbsp;pro&nbsp;&nbsp;umístění&nbsp;servisního
      konektoru&nbsp;v&nbsp;proudovém obvodu&nbsp;vysokonapěťové baterie</span>
    </p>
  </div>
  <div class="divhide" id="T25">
    <p class="info">
      <span style="font-size: 1em;">Nabíjecí jednotka</span>
    </p>
  </div>
  <div class="divhide" id="T26">
    <p class="info">
      <span style="font-size: 1em;">Nabíjecí jednotka&nbsp;– AC/DC měnič</span>
    </p>
  </div>
  <div class="divhide" id="T27">
    <p class="info">
      <span style="font-size: 1em;">Nabíjecí jednotka;&nbsp;zdířky&nbsp;pro&nbsp;externí
      nabíjení&nbsp;vozidla</span>
    </p>
  </div>
  <div class="divhide" id="T70">
    <p class="info">
      <span style="font-size: 1em;">Toky energie:&nbsp;Invertor&nbsp;- motor-generátor</span>
    </p>
  </div>
  <div class="divhide" id="T130">
    <p class="info">
      <span style="font-size: 1em;">Rezolver</span>
    </p>
  </div>
  <div class="divhide" id="T150">
    <p class="info">
      <span style="font-size: 1em;">Komunikace&nbsp;zwischen&nbsp;spínačem zapalování
      a spuštění,&nbsp;plynovým pedálem,&nbsp;krabicí diagnostiky&nbsp;a&nbsp;vysokonapěťovýmsystémem.</span>
    </p>
  </div>
  <div class="divhide" id="T60">
    <p class="info">
      <span style="font-size: 1em;">Uzemnění</span>
    </p>
  </div>
  <div class="divhide" id="T600">
    <p class="info">
      <span style="font-size: 1em;">Stínění</span>
    </p>
  </div>
  <p class="no-border">
  </p>
  <table class=" no-border" style="width: 100%;">
    <tbody>
      <tr>
        <td width="600" class="text-center" valign="top" colspan="2">
          <img width="600" height="485" src="images/a0_ct6k_elektrofahrzeug.jpg" border="0" usemap="#FPMap1" />
          <map name="FPMap1">
            <area onmouseover="ShowHideDiv('T600','T00')" onmouseout="ShowHideDiv('T00','T600')" shape="rect" coords="456,134,482,170" />
            <area onmouseover="ShowHideDiv('T60','T00')" onmouseout="ShowHideDiv('T00','T60')" shape="rect" coords="457,99,483,135" />
            <area onmouseover="ShowHideDiv('T60','T00')" onmouseout="ShowHideDiv('T00','T60')" shape="rect" coords="457,284,483,320" />
            <area onmouseover="ShowHideDiv('T60','T00')" onmouseout="ShowHideDiv('T00','T60')" shape="rect" coords="457,415,483,451" />
            <area onmouseover="ShowHideDiv('T60','T00')" onmouseout="ShowHideDiv('T00','T60')" shape="rect" coords="168,415,194,451" />
            <area onmouseover="ShowHideDiv('T150','T00')" onmouseout="ShowHideDiv('T00','T150')" shape="rect" coords="161,210,204,255" />
            <area onmouseover="ShowHideDiv('T130','T00')" onmouseout="ShowHideDiv('T00','T130')" shape="rect" coords="340,251,451,304" />
            <area onmouseover="ShowHideDiv('T27','T00')" onmouseout="ShowHideDiv('T00','T27')" shape="rect" coords="72,365,106,423" />
            <area onmouseover="ShowHideDiv('T26','T00')" onmouseout="ShowHideDiv('T00','T26')" shape="rect" coords="102,374,147,418" />
            <area onmouseover="ShowHideDiv('T25','T00')" onmouseout="ShowHideDiv('T00','T25')" shape="rect" coords="68,327,162,444" />
            <area onmouseover="ShowHideDiv('T24','T00')" onmouseout="ShowHideDiv('T00','T24')" shape="rect" coords="303,420,351,435" />
            <area onmouseover="ShowHideDiv('T07','T00')" onmouseout="ShowHideDiv('T00','T07')" shape="rect" coords="453,49,516,95" />
            <area onmouseover="ShowHideDiv('T22','T00')" onmouseout="ShowHideDiv('T00','T22')" shape="rect" coords="368,98,443,129" />
            <area onmouseover="ShowHideDiv('T21','T00')" onmouseout="ShowHideDiv('T00','T21')" shape="rect" coords="379,343,427,396" />
            <area onmouseover="ShowHideDiv('T20','T00')" onmouseout="ShowHideDiv('T00','T20')" shape="rect" coords="545,250,596,276" />
            <area onmouseover="ShowHideDiv('T18','T00')" onmouseout="ShowHideDiv('T00','T18')" shape="rect" coords="274,344,334,405" />
            <area onmouseover="ShowHideDiv('T17','T00')" onmouseout="ShowHideDiv('T00','T17')" shape="rect" coords="208,325,446,443" />
            <area onmouseover="ShowHideDiv('T16','T00')" onmouseout="ShowHideDiv('T00','T16')" shape="rect" coords="283,262,326,307" />
            <area onmouseover="ShowHideDiv('T15','T00')" onmouseout="ShowHideDiv('T00','T15')" shape="rect" coords="382,198,425,243" />
            <area onmouseover="ShowHideDiv('T13','T00')" onmouseout="ShowHideDiv('T00','T13')" shape="rect" coords="279,228,334,260" />
            <area onmouseover="ShowHideDiv('T12','T00')" onmouseout="ShowHideDiv('T00','T12')" shape="rect" coords="202,164,453,313" />
            <area onmouseover="ShowHideDiv('T09','T00')" onmouseout="ShowHideDiv('T00','T09')" shape="rect" coords="360,36,452,133" />
            <area onmouseover="ShowHideDiv('T70','T00')" onmouseout="ShowHideDiv('T00','T70')" shape="rect" coords="375,133,438,167" />
            <area onmouseover="ShowHideDiv('T06','T00')" onmouseout="ShowHideDiv('T00','T06')" shape="rect" coords="484,346,512,392" />
            <area onmouseover="ShowHideDiv('T03','T00')" onmouseout="ShowHideDiv('T00','T03')" shape="rect" coords="72,188,162,313" />
            <area onmouseover="ShowHideDiv('T02','T00')" onmouseout="ShowHideDiv('T00','T02')" shape="rect" coords="518,39,563,142" />
          </map>
        </td>
      </tr>
    </tbody>
  </table>
  <p class="no-border">
  </p>
  <p>
    <span style="font-size: 1em;">Podkladový vzor se nasune na tréninkový systém.
    Pomocí kódovací zástrčky na pravé straně blokového schématu se zobrazení na displeji
    přepne na správný systém. Tyto zdířky není dovoleno použít pro měření. Jedna přemosťovací
    zástrčka musí být zasunuta pro kódování a dvě přemosťovací zástrčky pro spojení
    od baterie k invertoru!</span>
  </p>
</body>
</html>

Nejaké rady, kde môže byť chyba?

Ďakujem.

 
Odpovědět
30.1.2020 21:51
Avatar
Filip Němeček
Tvůrce
Avatar
Filip Němeček:31.1.2020 7:32

Když se podíváš do konzole v panelu pro vývojáře nejsou tam třeba nějaké chybové hlášky? Co se nezobrazuje, přímo ten obrázek nebo jednotlivé <area> části?

 
Nahoru Odpovědět
31.1.2020 7:32
Avatar
Ivana Červíková
Člen
Avatar
Odpovídá na Filip Němeček
Ivana Červíková :31.1.2020 16:03

Nezobrazujú sa <area> časti. Chybové hlášky tam nevidím žiadne.

 
Nahoru Odpovědět
31.1.2020 16:03
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:1.2.2020 11:48

Zkopiruj si priklad, ktery bude fungovat, najdeny googlem. A ten si pak uprav. Treba ja znam z intervalu tuto mapu.
https://www.interval.cz/…5/ukazka.htm

Akceptované řešení
+20 Zkušeností
Řešení problému
 
Nahoru Odpovědět
1.2.2020 11:48
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:1.2.2020 11:52

Jakoze vemes funkcni kod a postupne jej upravujes. Ukladas si kazdou funkcni verzi do noveho souboru. Ja to obvykle delam takto:
soubor.htm - pracovni verze (stejna jako 2 nebo ji prave menim)
soubor.1 - jakakoliv predchozi verze, kteruo jsem si chtel ulozit
soubor.2
Ve Faru dam F5, *.3, enter, a zaloha provedena.

 
Nahoru Odpovědět
1.2.2020 11:52
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 5 zpráv z 5.