jQuery und verlinkte Image Maps

Peter Klein

Peter Klein

Erfahrenes Mitglied
Servus,

ich habe ein kleines Testcase hochgeladen, nicht schön, sollte aber das Problem einigermaßen darstellen.

Zu testzwecken wird das Image im <img />-Tag gwechselt, läuft später sauber über Sprites.

Wenn man auf den ersten Link klickt, soll der dazugehörige Bereich gehighlightet werden (es können mehrere Bereiche existieren, die dann alle zusammen den Highlight bekommen).
Ebenso bei den anderen Links.

Wenn man auf den zuvor gehighlighteten Bereich klickt, soll der zu deisem Bereich gehörende Text rechts eingeblendet werden. Funktioniert auch soweit, solange ich es mit direktem Ansprechen der Elemente belasse.
Aber ich möchte den Javascript-Code sehr schlank halten, und komme nicht weiter wie ich Beziehungen hinbekomme, das ich nur eine Funktion habe aber diese auf alle Bereiche angewandt wird.

War das verständlich erklärt? I hope so.

Grüße Peter
 
Zuletzt bearbeitet:
Moin Peter,

so ganz sicher bin ich nicht, ob ich es recht verstanden habe :-)

Aber ich glaube, was du benötigst, wäre ein Attriibut, welches in allen " zusammengehörigen" Elementen(also jeweils Link, area und teaser-div) gleich ist, dann könntest du alle bequem ansprechen.
Dazu könntest du bspw. class verwenden, ich hab da mal was vorbereitet :-)
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="http://industryltd.com/ecocitynew/" />
<link rel="stylesheet" href="style.css" type="text/css"  charset="utf-8" />
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#teaser div{display:none;}

</style>
<script type="text/javascript" >
$(document).ready(function()
{
  //Dieser Array wird nur benötigt, um später zu verhindern, dass jemand auf ein
  //nicht gehighligthtetes Gebäude klickt
  
  var sections=['one','two','three'];
  
  //Beim Klick auf Link....
  $('#links a').click(
    function()
    {
      //alle areas "deaktivieren"
      $('#Map area').css('cursor','default');
      $('#Map area').click(function(){return false;});
      
      //alle Teaser verstecken
      $('#teaser div').hide();
      
      //Bild austauschen
      $("#expose").attr({src:"expose" + $(this).attr('class') + ".png"});
      
      //Areas gemäss Bauphase "aktivieren"
      for(i=0;i<sections.length;++i)
      {
        $('#Map area.'+sections[i]).css('cursor','pointer');
        $('#Map area.'+sections[i]).click(
          function()
          {
            //alle Teaser verstecken
            $('#teaser div').hide();
            //gewählten Teaser zeigen
            $('#teaser div.'+$(this).attr('class')).show();
            return false;
          }
        );
        //Beenden der Schleife, wenn aktuelle Bauphase erreicht
        if(sections[i]==$(this).attr('class'))break;
      }
      return false;
    }
  );
  
  //alle areas "deaktivieren"
  $('#Map area').css('cursor','default');
  $('#Map area').click(function(){return false;});
});
</script>



</head>
<body>
  <!-- LINKS -->
  <div id="links">
    <a href="one.html"   class="one">Bauabschnitt 1</a><br />
    <a href="two.html"   class="two">Bauabschnitt 2</a><br />
    <a href="three.html" class="three">Bauabschnitt 3</a><br />
  </div>
	<!-- BILD -->
  <img id="expose" src="start.png" alt="wrf" width="895" height="488" usemap="#Map" />
	<!-- MAP -->
  <map name="Map" id="Map">
    <area shape="poly" class="one" coords="742,139,820,200,803,220,781,286,657,297,643,260,643,237,650,222,654,175,655,160" href="one.html" alt="sectionone" />
    <area shape="poly" class="two" coords="313,87,429,165,430,183,407,199,406,228,292,144,290,103" href="two.html" alt="sectiontwo" />
    <area shape="poly" class="three" coords="313,87,429,165,430,183,407,199,406,228,292,144,290,103" href="#" alt="" />
  </map>
  <!-- TEASER -->
  <div id="teaser">
    <div class="one">
      <h2>KAMMFABRIK</h2>
      <p>Combining innovative integrated energy concepts with cutting edge engineering  and architecture, ECO CITY sets new standards for an environment-friendly, high-tech working environment. Good for the people, healthy for the community, friendly to the planet.</p>
    </div>
    <div class="two">
      <h2>Gemüseladen</h2>
      <p>Rapidiously underwhelm user-centric opportunities for resource sucking total linkage. Dramatically impact premium resources without parallel experiences. Interactively leverage existing team building supply chains whereas compelling vortals</p>
    </div>
    <div class="three">
      <h2>Head-Shop</h2>
      <p>Rapidiously underwhelm user-centric opportunities for resource sucking total linkage. Dramatically impact premium resources without parallel experiences. Interactively leverage existing team building supply chains whereas compelling vortals</p>
    </div>
  </div>
</body>
</html>

Wie du erkennst, hab ich da ein bisserl an der HTML-Source rumgepfuscht:-(

Alle zusammengehörigen Elemente haben die selbe Klasse.
Klickt man nun auf eines, kann man diese per $(this).attr('class') bequem ermitteln, und darüber auf die passenden "Geschwister" zugreifen, da sie ja derselben Klasse zugehörig sind.
Beispiel:
Code: 
$('#teaser div.'+$(this).attr('class')).show();
Zeigt beim Klick auf die Map den dazu passenden Teaser

Ich hoffe, das geht ein wenig in die gewollte Richtung.
 
Hi Sven

Du hast mir den entscheidenden Tipp gegeben. Irgendwann die Nacht kam ick auch drauf es über Klassen zu machen und las Deinen Post dann.

Dank Dir schonmal. Werd es schön erweitern, und die AUftraggeber sind glücklich...gerins.

Dieser Tipp war defintiiv n bier wert.

Peter
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück