Skocz do zawartości
"Idzie nowe..." - o zmianach i nie tylko ×
Przeniesienie zakupów z IPS Marketplace / Moving bought items from IPS Marketplace ×

Problem z kodowaniem interaktywnego układu mięśni

Dynloth

Przez Dynloth
w Web & Hosting & Grafika

 Udostępnij

Rekomendowane odpowiedzi

Dynloth Użytkownik społeczności

Dynloth

Opublikowano
Opublikowano

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. 

Odnośnik do komentarza
Udostępnij na innych stronach
DejaVu24 Doświadczony

DejaVu24

Opublikowano
Opublikowano (edytowane)

tutaj zobacz

https://stackoverflow.com/questions/9830009/change-background-color-of-html-area-tag

działa elegancko

https://davidlynch.org/projects/maphilight/docs/demo_usa.html

--edit

a dobra widzę, że ty chcesz na dwa obrazki zrzucać.. no to tam to nie to ;)

Edytowane przez DejaVu24
  • Lubię to 1
Odnośnik do komentarza
Udostępnij na innych stronach
Dynloth Użytkownik społeczności

Dynloth

Opublikowano
  • Autor
Opublikowano (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
Odnośnik do komentarza
Udostępnij na innych stronach
  • Manager
DawPi Arcymistrz

DawPi

Opublikowano
  • Manager
Opublikowano

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.

intermedia - profesjonalne rozwiązania Invision Power Board

---

Chcesz uzyskać szybko i sprawnie pomoc? Uzupełnij wersję i adres w profilu.

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

  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...

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ę.