image map mit js

Einklappen
X
Einklappen
 
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige template Weiter
  • #1

    image map mit js

    hallo,:
    kann leider kein flash, deswegen nutze ich die image map funktion von jquery. leider komm ich hier nicht weiter:

    habe folgenden code von der demo seite.

    PHP-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <    html xmlns="http://www.w3.org/1999/xhtml">
    <    head>
    <    meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <    title>jQuery Tooltip Plugin Demo</title>

    <    link rel="stylesheet" href="http://jquery.bassistance.de/tooltip/jquery.tooltip.css" />
    <    link rel="stylesheet" href="css/tip.css" />
    <    script src="http://jquery.bassistance.de/tooltip/lib/jquery.js" type="text/javascript"></script>
    <    script src="http://jquery.bassistance.de/tooltip/jquery.tooltip.js" type="text/javascript"></script>
    <    script src="http://jquery.bassistance.de/tooltip/demo/chili-1.7.pack.js" type="text/javascript"></script>
    <    script type="text/javascript">
    $(function() {
    $(    "map > area").tooltip({ positionLeft: true });
    $(    "#block").click($.tooltip.block);
    });
    </    script>

    </    head>
    <    body>

            
        
            <    img id="map" src="karte.png" border="0" usemap="#Landkarte">

            <    map name="Landkarte">
              <    area shape="rect" coords="11,10,59,29"
                        href="http://www.koblenz.de/" alt="Koblenz" title="ssKoblenz">
              <    area shape="rect" coords="42,36,96,57"
                        href="http://www.wiesbaden.de/" alt="Wiesbaden" title="Wiesbaden">
              <    area shape="rect" coords="42,59,78,80"
                        href="http://www.mainz.de/" alt="Mainz" title="Mainz">
              <    area shape="rect" coords="100,26,152,58"
                        href="http://www.frankfurt.de/" alt="Frankfurt" title="Frankfurt">
              <    area shape="rect" coords="27,113,93,134"
                        href="http://www.mannheim.de/" alt="Mannheim" title="Mannheim">
              <    area shape="rect" coords="100,138,163,159"
                        href="http://www.heidelberg.de/" alt="Heidelberg" title="Heidelberg">
              <    area shape="rect" coords="207,77,266,101"
                        href="http://www.wuerzburg.de/" alt="W&uuml;rzburg" title="W&uuml;rzburg">
              <    area shape="rect" coords="282,62,344,85"
                        href="http://www.bamberg.de/" alt="Bamberg" title="Bamberg">

              <    area shape="rect" coords="255,132,316,150"
                        href="http://www.nuernberg.de/" alt="N&uuml;rnberg" title="N&uuml;rnberg">
              <    area shape="rect" coords="78,182,132,200"
                        href="http://www.karlsruhe.de/" alt="Karlsruhe" title="Karlsruhe">
              <    area shape="rect" coords="142,169,200,193"
                        href="http://www.heilbronn.de/" alt="Heilbronn" title="Heilbronn">
              <    area shape="rect" coords="140,209,198,230"
                        href="#ssdfsdf" alt="Stuttgart" title="Stutssstgart<br>ds">
              <    area shape="rect" coords="187,263,222,281"
                        href="http://www.ulm.de/" alt="Ulm" title="Ulm">
              <    area shape="rect" coords="249,278,304,297"
                        href="http://www.augsburg.de/" alt="Augsburg" title="Augsburg">
              <    area shape="poly" coords="48,311,105,248,96,210,75,205,38,234,8,310"
                        href="http://www.baden-aktuell.de/" alt="Baden" title="Baden">
            </    map> 
    siehe jQuery Tooltip Plugin Demo

    mein problem ist folgendes: ich will eine definierte div box "anzeigen" lassen und nicht das href="" teil.

    leider hab ich davon eher weniger ahnung

    wäre super wenn mich da jemand unterstuetzen koennte.

    stellt euch auf einen javascript neuling ein
    Stichworte: -
  • #2
    Hallo,

    diese tooltip Library leistet das nicht, was du willst. Dafür müsste sie umgeschrieben werden. Machst du das aus Spaß, um JS zu lernen oder hast du ein dringendes Projekt?

    Wenn du nur übst, vergiss JQuery und lerne JavaScript-Grundlagen. Wenn du die drauf hast, kannst du dir mit JQuery das Leben leichter machen, auch wenn du JQuery dann nicht mehr brauchst.

    Für Anfänger ist JQuery nur so weit geeignet, wie man bereit ist, sich auf die bereits eingebaute Funktionalität zu beschränken. Man kommt also schnell zum Ziel und es gibt nette Features, aber es wird nie alles das leisten, was du dir an Features wünschst.

    Wenn du das für ein Projekt brauchst, mach besser ein Jobangebot draus.

    Gruß,

    Amica
    [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
    Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
    Super, danke!
    [/COLOR]

    Kommentar

    • #3
      ja, ist eigentlich dringend, sogar sehr.


      werde mich auf jedenfall mit JS genauer beschäftigen, aber jetzt müsste ich das leider umsetzen.

      bräuchte ja nur einen tip wie ich das umsetzen kann.
      es als jobangebot einzustellen mache ich her ungern, so leid es mir tut.

      vielleicht weiss doch schnell jemand eine lösung, das wäre super!
      Zuletzt geändert von svr; 22.09.2010, 15:01.

      Kommentar

      • #4
        Wie soll denn das div / der Tooltip aussehen? Bisher hast du noch keine brauchbaren Infos geliefert. Daher kann ich momentan nur sagen: In der tooltip.js Zeile 48 bis 63 abändern.
        [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
        Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
        Super, danke!
        [/COLOR]

        Kommentar

        • #5
          hallo,
          dank dir fuer deine antwort!

          es soll ganz einfach sein. ich moechte pro "bildpunkt" je eine div laden lassen

          (vom text her wie hier Image Map with Prototype Tooltips | CSS-Tricks kriege das aber nicht hin)

          die div kann ich ja dnan mittels css beliebig stylen.

          es geht nur darum, dass in die div einiges rein muss.
          extras wie verzögerung etc brauch ich eigentlich nicht. es soll eben eine div sein, sodass ich das ganze dann stylen kann.

          wichtig wäre IE kompatibilität, aber die ist bei jquery ja gegeben.

          danke!

          Kommentar

          • #6
            Hol dir einfach das div mit der id tooltip und schreib dort rein, was immer du willst, am besten onmouseover.
            [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
            Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
            Super, danke!
            [/COLOR]

            Kommentar

            • #7
              tut mir leid, das verstehe ich geradde nicht.

              reden wir von meinem geposteten link oder jquery.

              ich weiss, es ist viel verlangt, aber das ganze mit code wäre am besten

              danke!

              Kommentar

              • #8
                wirklich keiner eine idee?

                Kommentar

                • #9
                  Die Idee hast du schon von mir bekommen. Wo hapert es genau? Hast du dir das div mit der ID „tooltip“ schon mal angesehen? Wenn nicht, kennst du document.getElementById() und die anderen tollen Methoden zur DOM-Manipulation schon?

                  Ist immer noch etwas unklar? Dann poste bitte deinen eigenen Ansatz und stelle konkrete Fragen zu den Stellen, wo du nicht weiter kommst.

                  Gruß,

                  Amica
                  [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
                  Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
                  Super, danke!
                  [/COLOR]

                  Kommentar

                  • #10
                    Zitat von AmicaNoctis Beitrag anzeigen
                    Hol dir einfach das div mit der id tooltip und schreib dort rein, was immer du willst, am besten onmouseover.
                    welches div, weshakb onmouseover??

                    habe von der seite das mal genommen und das gebastelt.

                    PHP-Code:
                    <script type='text/javascript' src='prototype.js'></script>
                    <                    script type='text/javascript' src='scriptaculous.js?load=effects'></script>
                    <                    script type='text/javascript' src='prototip.js'></script>
                    <                    script type='text/javascript'>
                        function                     init() {
                                            //<![CDATA[
                                                new Tip('tooltip-1', '<h3>Content for Tooltip 1</h3>', 
                    {                    title : '', className: 'silver', effect: 'slide', showOn: 'mousemove',
                                         hideOn: 'mouseout', fixed: true, hook:{target: 'topLeft', tip: 'bottomLeft'} });
                            new                     Tip('tooltip-2', '<h3>Content for Tooltip 2</h3>',
                     {                    title : '', className: 'silver', effect: 'slide', showOn: 'mousemove', 
                    hideOn: 'mouseout', fixed: true, hook:{target: 'topLeft', tip: 'bottomLeft'} });
                                            //]]>
                                            }
                                            Event.observe(window, 'load', init, false);
                    </                    script>
                    <                    style type="text/css">
                    .                    prototip                 { position: absolute; }
                    .                    prototip .silver             { width: 733px; font-size: 1.8em; }
                    .                    prototip .silver .content         { text-align: center; padding: 10px 0; }

                    </                    style>


                    <                    img src="karte.png" alt="image" usemap="#Map" />
                    <                    map name="Map" id="Map">
                        <                    area shape="circle" coords="4,4,4" href="#" id="tooltip-1"/>
                        <                    area shape="circle" coords="178,169,12" href="#" id="tooltip-2" />
                    </                    map> 
                    aber das wahrscheinlich müll

                    danke

                    Kommentar

                    • #11
                      Hallo,

                      wenn du dir diese Tooltip Demo nochmal ansiehst, wirst du feststellen, dass die jquery.tooltip.js mittels einer Funktion createHelper (95–114) ein div am Ende des Dokuments einfügt, was erstmal so aussieht:

                      HTML-Code:
                      <div id="tooltip" style="display: none;">
    <h3></h3>
    <div class="body"></div>
    <div class="url"></div>
</div>
                      Wenn du dann mit der Maus über eine Stadt hoverst (entspricht dem Event onmouseover), wird dieses div mit Leben gefüllt:
                      1. h3 bekommt den Namen der Stadt
                      2. in div.url wird die Adresse eingetragen
                      3. div#tooltip selbst wird positioniert und auf display: block gesetzt


                      Dadurch siehst du es als Tooltip. Beim Verlassen der Stadt mit dem Mauszeiger (also onmouseout) wird es mit display: none wieder unsichtbar geschaltet, bleibt dabei aber gefüllt, bis es beim nächsten onmouseover mit neuen Werten überschrieben wird.

                      Wenn du jetzt auch einen eigenen onmouseover-Handler dazu bastelst, der den anderen aber nicht behindern darf, kannst du das ganze Ding beliebig umbauen oder einfach div.body füllen, was ja im Moment nicht benutzt wird. Damit wäre dein Problem gelöst.

                      Gruß,

                      Amica
                      [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
                      Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
                      Super, danke!
                      [/COLOR]

                      Kommentar

                      • #12
                        ich weiss es ist viel verlangt, aber könntest du mir mit etwas code dabei helfen.
                        ich bin wie gesagt neuling auf dem gebiet, habe aber leider druck, dass das fertig wird.

                        sobald ich da shinter mir habe, werde ich mich sofort da ran setzen, das verspreche ich.


                        wäre super, wenn das ginge. vielleicht kann ich dir auch bei etwas helfen?

                        vielen dank!

                        Kommentar

                        Vorherige template Weiter
                        Lädt...
                        X