Skocz do zawartości

Hosting dHosting.pl - 10% rabat!

Dynloth

Problem z kodowaniem interaktywnego układu mięśni

Rekomendowane odpowiedzi

Siemanko,  

Piszę do Was w sprawie pomocy, mianowicie tworze interaktywny układ mięśni i mam pewien problem, który wydaje się nielogiczny - przynajmniej jak dla mnie, gdyż jestem początkujący w tej dziedzinie.

Mam taki oto kod w całości: 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <title>Atlas</title> 
        <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> 
        <meta name="Description" content="" /> 
        <meta http-equiv="Content-Language" content="pl" /> 
        <meta name="Keywords" content="" /> 
        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  
        <style type="text/css"> 
            #area{ 
                width:646px; 
                height: 600px; 
                position: relative; 
            } 
            #sylwetka{ 
                position: absolute;top:0;left:0; 
                z-index: 1; 
            } 
            #area li{ 
                position: absolute;top:0;left:0; 
                z-index: 2; 
                display: none; 
            } 
        </style> 
        <script type="text/javascript"> 
            $(document).ready(function() { 
                $("area").hover(function() { 
                    var href=$(this).attr("href"); 
                    $(href).fadeIn("fast"); 
                }, function() { 
                    var href=$(this).attr("href"); 
                    $(href).fadeOut("fast"); 
                }); 
            }); 
        </script> 
    </head> 
    <body> 
        <div id="area"> 
            <img id="sylwetka" usemap="#miesnie" src="https://street-workout.pro/Sylwetka.png" /> 
            <ul> 
                <li id="barki"><img src="https://street-workout.pro/barki.png" usemap="#miesnie" /></li> 

            </ul> 
            <map id="#miesnie" name="miesnie" > 
                <area shape="poly" alt="barki" title="Ćwiczenia na barki" coords="164,170,148,180,139,196,136,211,136,225,158,214,170,195,188,180,178,174,172,172" href="#barki" /> 

            </map> 
        </div> 
    </body> 
</html>

I w tym kodzie prawie wszystko działa jak trzeba - czyli po najechaniu na lewy bark sylwetki przodem do odbiorcy kolor zmienia się na szary, lecz po dodaniu adresu do przekierowania, tak aby można było kliknąć w ten bark i zostać przekierowanym, to wtedy po najechaniu myszką na bark nie ma już podświetlenia. 

Tutaj mamy wersję z podświetleniem: https://workoutathletes.com/forum/atlas-cwiczen/

A tutaj po dodaniu linka: https://workoutathletes.com/forum/test2/

Po prostu w znaczniku href zmieniam #barki na link i wtedy się sypie, zauważyłem że href musi być taki jak id barki tyle że z #. 

Gdzie tu logika? Według mnie znacznik href odpowiada za link do przekierowania, więc w jakim celu musi być taki sam jak id barki, przecież wtedy całość traci sens... Chyba że coś przeoczyłem? 🤔

 

Bardzo proszę o pomoc..

Pozdrawiam serdecznie,

Dominik. 

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Dzięki za odpowiedź.

Tak u mnie działa to na dwa obrazki. Hmm, a w przykładzie który podałeś to gdzie powinny być linki umieszczone do przekierowania po kliknięciu? 

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach
Napisano (edytowane)

Nie mogłem edytować posta więc dodaję drugiego: 

//Edit

Poszperałem trochę w linku który podesłałeś i jeden pomysł nawet mi się wydał słuszny, że może trzeba dodatkowo zdefiniować ID dla danej partii mięśniowej i troszkę przerobiłem kod, ale efekt ten sam, link działa a nie podświetla kolorem. ;/ 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <title>Mapa</title> 
        <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> 
        <meta name="Description" content="" /> 
        <meta http-equiv="Content-Language" content="pl" /> 
        <meta name="Keywords" content="" /> 
        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  
        <style type="text/css"> 
            #area{ 
                width:646px; 
                height: 600px; 
                position: relative; 
            } 
            #sylwetka{ 
                position: absolute;top:0;left:0; 
                z-index: 1; 
            } 
            #area li{ 
                position: absolute;top:0;left:0; 
                z-index: 2; 
                display: none; 
            } 
        </style> 
        <script type="text/javascript"> 
            $(document).ready(function() { 
                $("area").hover(function() { 
                    var href=$(this).attr("href"); 
                    $(href).fadeIn("fast"); 
                }, function() { 
                    var href=$(this).attr("href"); 
                    $(href).fadeOut("fast"); 
                }); 
            }); 
        </script> 
    </head> 
    <body> 

              <div id="area">
    <img src="https://street-workout.pro/Sylwetka.png" width="1023" height="804" alt="Sylwetka" usemap="#miesnie">
    <map name="miesnie">
        <area shape="poly" coords="164,170,148,180,139,196,136,211,136,225,158,214,170,195,188,180,178,174,172,172" href="http://www.stackoverflow.com" id="barki" />
    </map>
    <img src="https://street-workout.pro/barki.png" width="1023" height="804" alt="Barki" id="ID_barki">
			</div>
              

    </body> 
</html>
Edytowane przez Dynloth

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Problem ROZWIĄZANY. Jeśli są jakiekolwiek wątpliwości, pytania proszę o założenie nowego tematu.

Wszelkie uzasadnione reklamacje/pretensje/sugestie/rady przyjmuje ekipa forum.

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach
Gość
Ten temat został zamknięty. Brak możliwości dodania odpowiedzi.

  • Przeglądający   0 użytkowników

    Brak zarejestrowanych użytkowników przeglądających tę stronę.

×

Powiadomienie o plikach cookie

Umieściliśmy na Twoim urządzeniu pliki cookie, aby pomóc Ci usprawnić przeglądanie strony. Możesz dostosować ustawienia plików cookie, w przeciwnym wypadku zakładamy, że wyrażasz na to zgodę.