Autor Zpráva
UltimaUrsa
Profil
Zdravím, potřebuji poradit resp. pomoci s doplněním nebo změnou kódu. Jsem úplný začátečník a samouk, a zkouším v html různé funkce ... a teď jsem se setkal s problémem:

na stránce mám vložený obrázek (elektrické schema) png pomocí tagu img. Stranou mám tabulku a seznam funkcí kde každá buňka obsahuje id s jinou funkcí el. obvodu, resp. s jinou variantou sepnutých kontaktů v obvodu. Na konci stránky mám script, kde tedy při najetí myší na každou buňku (onmouseover) se mi podsvítí pod obrázkem se schéma jiný obrázek (s kontakty), a po odjetí myši se všechny kontakty rozpojí (onmouseout).

tabulka s funkcema
<table>
<tr><td>způsob spínání stykčů</td></tr> 
<tr>
<td  id="abc">sepnou stykače K1 a K2</td>
<td  id="bac">sepnou stykače K2 a K3</td>
<td  id="cab">sepnou stykače K3 a K1</td>
</tr>  
</table>

obrázek
<table>   
<tr height="225">
<td width="232" id="stykace"><a href="#"><img src="../img/stykace.png"></a></td></tr></table>

script na konci stránky
<script type="text/javascript"> 
      
    document.getElementById("abc").onmouseover = function() {
          document.getElementById("stykace").style.backgroundImage = "url(../img/abc.png)";};
    document.getElementById("abc").onmouseout = function() {
          document.getElementById("stykace").style.backgroundImage = "url(../img/stykace.png)";};          
     
    document.getElementById("bac").onmouseover = function() {
          document.getElementById("stykace").style.backgroundImage = "url(../img/bac.png)";};
    document.getElementById("bac").onmouseout = function() {
          document.getElementById("stykace").style.backgroundImage = "url(../img/stykace.png)";};            
    
    document.getElementById("cab").onmouseover = function() {
          document.getElementById("stykace").style.backgroundImage = "url(../img/cab.png)"; }; 
   document.getElementById("cab").onmouseout = function() {
          document.getElementById("stykace").style.backgroundImage = "url(../img/stykace.png)";};     
        
</script>

můj problém spočívá v tom, že:
potřebuji aby se při otevření stránky automaticky načetla základní pozice kontaktů tedy obrázek stykače, protože jinak mám obvod úplně bez kontaktů dokud nedojedu myší na některou buňku v tabulce. Všechny moje varianty co jsem si našel na různých diskuzí mi nefungují.
a navíc bych chtěl doplnit funkci o zvůk cvakání kontaktů, a to mi taky nefunguje.

předem moc děkuji za jakoukoliv radu.
RastyAmateur
Profil
UltimaUrsa:
Co takhle ten výchozí obrázek rovnou napsat do toho HTML s tím, že se to pak prostě překreslí?

Zvuky už nebude těžké vygooglit, z fráze "to mi taky nefunguje" se nedá moc poradit.
UltimaUrsa
Profil
RastyAmateur [#2]:
všechno co jsem vygooglil mi nefungovalo, proto to sem píšu. Předpokládám že napsat kód na vkládání zvuku při změně obrázku není moc složité ...
Keeehi
Profil
No ukázku máš například přímo na JPW.
Zvuky na stránkách » Ozvučené přejíždění odkazu

Problém ale je, že přehrávání zvuků v minulosti bylo hojně zneužíváno reklamami, což uzivatele otravovalo. Takže to prohlížeče začaly blokovat.

Zkus si v googlu omezit vyhledávání třeba na stránky z posledního roku. U nich je velká pravděpodobnost že budou toto omezení reflektovat než nějaký článek z před deseti let.
UltimaUrsa
Profil
Keeehi [#4]:
jásně ... chápu, děkuji, zkusím to
ten odkaz co jsi mi sem dal jsem už zkoušel taky ... a právě bez úspěchu
Bubák
Profil
Ohledně zvuků je nějaké info a návody tady: Přehrávání zvuků na webu
Třeba ti to pomůže.

Vyzkoušel jsem HTML a JS a funguje podle očekávání, jen jsem měl "na sobě" dva "stykace.png" posunuté vůči sobě.
Já bych to udělal trochu jinak, bez JS a stykače by spínaly po kliknutí myší, a to hlavně proto, že JS není moje silná stránka.
Pokud JS řešení s minimem změn, tak bych změnil kód druhé tabulky nějak takhle:
<table>   
<tr>
<td><a href="#"><img id="stykace"width="232" height="225" src="../img/stykace.png"></a></td></tr></table>
Protože je zbytečné, aby obrázek stykače měl na pozadí obrázek stykače, tak stačí deklarovat hodnotu "none"
Bubák
Profil
Neuvědomil jsem vy, že obvod má zobzazit jak vypnuté, tak sepnutí kontakty, takže něco z toho, co jsem psal dříve, neplatí.
Přidal jsem obrázek vyp.png, kde by měly být kontakty ve vypnutém stavu.
Koukám, že jsem včera ani nedal odkaz.
Stykače
UltimaUrsa
Profil
Bubák [#7]:
jo skvělé, díky ... někdy si říkám, bože jak je to jednoduché ...

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

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

0