• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

SmoothScroll funktioniert nicht bei ImageMap?

M

macfreakmac

Neues Mitglied
Hi Leute,

ich habe ein Java-Script im Internet gefunden, der mit AnkerTags arbeitet und statt springt zum gewünschten Anker scrollt (langsam).

Das funktioniert auch alles wunderbar, aber ich habe auch ein Bild mit ImageMaps der auch mit # zum gewünschten Anker !springt! aber nicht scrollt.

Was mache ich falsch? Kann man daran etwas ändern?

Code zum ImageMap:

Code: 
 <map name="Map2" id="Map2">
    <area shape="rect" coords="8,120,90,197" href="#top" target="_blank" />
  </map>



Link zum JavaScript
 
Werbung:
Das JavaScript ist aktuell nur für Link-Elemente, also <a>, ausgelegt. Das ImageMap verlinkt übder <area>. Du müsstest entweder das JavaScript anpassen, dass es auch <area> anpasst oder das ImageMap durch einen Link ersetzen (Tipp: den Link könnte man auch per CSS an die gewünschte Position auf dem Bild setzen).
 
Ist mir jetzt zu spät, um das nachzubauen und selber verwende ich auch nie image maps. Aber ich kann dir einen kurzen Workaround liefern.


Lösche die hrefs und positioniere über dem Bild einen unsichtbaren Container der selben Größe mit position absolute. In diesen packst du nun richtige Anker und schiebst diese per CSS an die gewünschte Position.

HTML: 
<a href="#einAnker"></a>


Da ich ein Anhänger kurzen und leicht verständlichen Codes bin, schreibe ich das dazugehörige Script in jQuery (einbinden nicht vergessen). Du kannst statt dessen natürlich auch gerne einen Textwall mit vanilla JS erstellen. ^^
Code: 
$(document).ready(function() {
        $('a[href*=#]').click(function(e) {
            e.preventDefault();
            target = $(this).attr('href');

            $('html').animate({
                scrollTop: $(target).offset().top
            }, 1000, function(){location.hash = target;});
            
        });
    });

Um das kurz zu erläutern:

- Der erste Teil der Funktion wählt alle Anker, deren href Attribut mit einer Raute beginnt, blockiert deren Standardverhalten (das sofortige Springen zum jeweiligen Anker) und schreibt den Wert von href in die Variable target.

- Der zweite Teil bedient sich der jQuery Funktion animate(). Als Selektor wählen wir mit $('html') (bei älteren IE Versionen war es afaik noch $('html body')) die gesamte Seite aus und scrollen zur Top unseres Ankers. Die 1000 steht hier für die Dauer der Animation (1s) und kann beliebig angepasst werden. Nach der Zahl folgt noch eine optionale Callback-Funktion, welche den Namen des Ankers an die URL anhängt.
 
Werbung:
Vielen Dank schonmal!

Aber dein jQeury Code funktioniert leider nicht wirklich!

Ich habe diesen so im <head> Bereich eingebunden:

Code: 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script>
	$(document).ready(function() {
        $('a[href*=#]').click(function(e) {
            e.preventDefault();
            target = $(this).attr('href');


            $('html').animate({
                scrollTop: $(target).offset().top
            }, 1000, function(){location.hash = target;});
            
        });
    });</script>

mfg macfreakmac
 
Also bei mir funktioniert es. Ich benutze die Funktion selber zum Scrollen innerhalb von Seiten. Was sagt denn die Fehlerkonsole?

Binde ihn mal am Fuß der Seite, kurz vor dem schließenden Body Tag ein, und jQuery ist mittlerweile bei Version 1.8.2.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben