Warum funktionieren Map Highlights mit jquery nicht?

DarkSheep · 13.10.2021

Ich grüße euch da draußen!

Mein Plan ist, mit einem <map> bild und den links etwas zu bauen. Ich habe das ganze auch zum Laufen gebracht und es entspricht genau dem was ich mir vorstelle. Lauffähig ist das ganze auf einer Test .html Datei. Jedoch habe ich versucht das ganze auf die Seite einzufügen wo es hin soll. Dort funktioniert das ganze leider nicht und ich frage mich wieso. Mein erster Gedanke ist die falsche Platzierung des <script> codes, nur bin ich absolut unwissend das Java etc. angeht

Vielleicht kann mir hier jemand bei dem Problem helfen

Hier die funktionsfähige Test-Datei:

HTML:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Airsoft Team Raptor</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <meta name="description" content="" />
        <meta name="keywords" content="Airsoft, Team, Alb-Donau, Ulm, Neu-Ulm, Memmingen, Augsburg, Landsberg am Lech, Kuftstein, Tirol, Weilheim-Schongau, Allgäu, Ostallgäu">
    </head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="map.js"></script>
<script type="text/javascript">$(function() {
        $('.map').maphilight();
    });
</script>
<body>
<img src="bär.jpg" class="map" width="912" height="684" alt="Test" usemap="#test"/>
<map name="test">
<area shape="rect" coords="380,224,515,290" title="FAST Helm - 50 €" href="#" alt="FAST Helm - 50 €"/>
<area shape="rect" coords="388,289,481,325" title="Supergeile Pornobrille - 40 €" href="#" alt="Supergeile Pornobrille - 40 €"/>
<area shape="rect" coords="482,289,515,344" title="Headset - 20 €" href="#" alt="Headset - 20 €"/>
<area shape="rect" coords="439,342,461,362" title="Zigarre des Helden - 69 €" href="#" alt="Zigarre des Helden - 69 €"/>
<area shape="rect" coords="262,415,377,482" title="Handschuhe - 20 €" href="#" alt="Handschuhe - 20 €"/>
<area shape="rect" coords="41,359,401,483" title="ICS M.A.R.S. - 400 €" href="#" alt="ICS M.A.R.S. - 400 €"/>
</map>
    </body>
</html>

----------------------------------------------------------------------------------

Hier die Datei in der es eigentlich landen sollte aber nicht funktioniert (Dies hier zeigt einen meiner vielen Versuche die gescheitert sind)

HTML:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Airsoft Team Raptor</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <meta name="description" content="" />
        <meta name="keywords" content="Airsoft, Team, Alb-Donau, Ulm, Neu-Ulm, Memmingen, Augsburg, Landsberg am Lech, Kuftstein, Tirol, Weilheim-Schongau, Allgäu, Ostallgäu">
        <link rel="stylesheet" href="assets/css/main.css" />

    </head>

    <body class="is-preload">

        <!-- Header -->
            <header id="header">
                <a class="logo" href="index.html">Airsoft Team Raptor</a>
            </header>

        <!-- Heading -->
            <div id="heading" >
                <h1>Tipps für Anfänger</h1>
            </div>

        <!-- Main -->
            <section id="main" class="wrapper">
                <div class="inner">
                    <div class="content">


<img src="bär.jpg" class="map" width="912" height="684" alt="Test" usemap="#test"/>
<map name="test">
<area shape="rect" coords="380,224,515,290" title="FAST Helm - 50 €" href="#" alt="FAST Helm - 50 €"/>
<area shape="rect" coords="388,289,481,325" title="Supergeile Pornobrille - 40 €" href="#" alt="Supergeile Pornobrille - 40 €"/>
<area shape="rect" coords="482,289,515,344" title="Headset - 20 €" href="#" alt="Headset - 20 €"/>
<area shape="rect" coords="439,342,461,362" title="Zigarre des Helden - 69 €" href="#" alt="Zigarre des Helden - 69 €"/>
<area shape="rect" coords="262,415,377,482" title="Handschuhe - 20 €" href="#" alt="Handschuhe - 20 €"/>
<area shape="rect" coords="41,359,401,483" title="ICS M.A.R.S. - 400 €" href="#" alt="ICS M.A.R.S. - 400 €"/>
</map>



                    </div>
                </div>
            </section>

        <!-- Footer -->
            <footer id="footer">
                <div class="inner">
                    <div class="copyright">
                        &copy; 2018 - 2021 by Airsoft Team Raptor / Dark-Sheep<br><a href="history.html" target="_blank">Homepage History</a>
                    </div>
                </div>
            </footer>

        <!-- Scripts -->
            <script src="assets/js/jquery.min.js"></script>
            <script src="assets/js/browser.min.js"></script>
            <script src="assets/js/breakpoints.min.js"></script>
            <script src="assets/js/util.js"></script>
            <script src="assets/js/main.js"></script>
            <script src="assets/map.js"></script>
        <script type="text/javascript">$(function() {
                $('.map').maphilight();
            });
        </script>

    </body>
</html>

Hoffe jemand kann mich erleuchten warum die Java Scripts nicht geladen werden

Liebe Grüße, Chris

basti1012 · 13.10.2021

Kannst du das mal online stellen?
ich kann das so nicht testen, weil ich links zu den Scripten nicht habe usw...
Was sagt den die Fehlerkonsole dazu?