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

Ivana Červíková

Člen

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

Filip Němeček

Tvůrce

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

Ivana Červíková

Člen

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

Peter Mlich

Člen

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í

Nahoru Odpovědět

1.2.2020 11:48

Peter Mlich

Člen

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

Nejčastěji vyhledáváné

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