tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
4
ZUGRIFFE
3579
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. #1
    DerBo DerBo ist offline Mitglied
    Registriert seit
    Feb 2005
    Beiträge
    24
    Hallo,
    ich sitze schon ne Weile an dem Problem.
    Ich möchte eine Deutschlandkarte machen, wenn man z.B. über ein Bundesland mit der Maus fährt, soll dieses Bundesland per einzelnem Bild hervorgehoben werden.
    Ich habe mich da schon etwas belesen und habe einige möglichkeiten herausgefunden.
    Code :
    1
    2
    3
    4
    
    <img src="deutschland.png" id="karte" name="karte" alt="Karte" usemap="#Landkarte">
    <map name="Landkarte">
    <area shape="poly" coords="0,80,70,80,70,140,0,140" href="http://www.nrw.de/" id="nrw" alt="NRW" title="Nordrhein Westfalen" onMouseOver="...." onMouseOut="...." >
    </map>
    das wäre die möglichkeit mit einem Polygonzug(Die Koordinaten werden noch ausführlicher, wenn alles klappt). Der Titel wird auch beim drüber fahren angezeigt und der link funktioniert auch soweit.
    Allerdings bekomme ich da einfach kein Bild drüber.
    Mit der OnMouseOver funktion
    Code :
    1
    
    OnMouseOver="document.karte.src='nrw.png';"
    klappt das soweit, aber es flackert und das sieht äusserst unschön aus.

    Ich kenne aber bisher noch keine andere Möglichkeit das irgendwie hinzubekommen und hoffe das mir jemand helfen kann.
    Danke im voraus
     

  2. #2
    Maik Tutorials.de Gastzugang
    Hi,

    schau mal hier: http://www.doktormolle.de/temp/haeusle/

    mfg Maik
     

  3. #3
    DerBo DerBo ist offline Mitglied
    Registriert seit
    Feb 2005
    Beiträge
    24
    Hey Maik,
    du schon wieder Ich danke dir, nun klappts. Hat zwar ne Zeit gedauert bis ich verstanden habe was das script macht, aber nun funktioniert es.
    Als overlay Bild nehme habe ich bisher nur immer *.png´s benutzt. Jetzt grade sehe ich mal den Unterschied der Größe von png (5kb) zu gif (1kb).
    Die Qualität sieht bei png aber sichtbar besser aus als bei gif. Ich weiss nur nicht wie ich gif´s in Photoshop richtig abspeicher.
    Kannst du mir da auch evtl. noch weiter helfen?
     

  4. #4
    DerBo DerBo ist offline Mitglied
    Registriert seit
    Feb 2005
    Beiträge
    24
    Hey Maik,
    also auf jeden Fall schon einmal dicken Dank an dich. Hab mir nen Wolf gesucht, aber wie erwähnt funktioniert nun alles. Ich nehme auch nun ainfach für alles png´s. Sieht irgendwie besser aus.
     

  5. #5
    Schnackswatz Schnackswatz ist offline Grünschnabel
    Registriert seit
    Sep 2011
    Beiträge
    1
    Hallo,
    ich würde gerne noch einmal das Thema aufgreifen, da ich bei einer Sache nicht weiterkomme. Vielleicht ist ja jemand bereit zu diesem Thema abermals zu helfen. Das Javascript unter der oben genannten URL
    lädt die Grafiken aus dem Root des Servers.
    Was muß denn an Code geändert werden, damit die Grafiken aus
    irgendeinem Unterverzeichnis geladen werden oder verstehe ich da etwas falsch ?

    Lieben Gruß

    Mike

    Hier der Javascript-Code von obengenannter URL:
    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    
    pics=new Array();
    function setHover()
    {
    p=new Image();p.src=document.images.imageMap.src;pics[0]=p;
    for(a=0;a<document.getElementsByTagName('area').length;++a)
        {
        o=document.getElementsByTagName('area')[a];nr=eval(a+1);
        p=new Image();p.src=o.id+'.gif';pics[pics.length]=p;
        aOVER=new Function('F','colored('+nr+');');aOUT=new Function('F','colored(0);');
        o.onmouseover=aOVER;o.onmouseout=aOUT;
        }
    }
    function colored(i)
    {
    document.images.imageMap.src=pics[i].src;
    }
    if(document.getElementsByTagName){window.onload=setHover;}
     

Ähnliche Themen

  1. Imagemap mit CSS Hover oder Mouseover?
    Von Wunder_von_Bern im Forum Javascript & Ajax
    Antworten: 17
    Letzter Beitrag: 06.03.12, 19:39
  2. mouseover hover Bild von klein nach gross
    Von amberrachel im Forum CSS
    Antworten: 8
    Letzter Beitrag: 02.01.10, 00:55
  3. Antworten: 4
    Letzter Beitrag: 24.06.06, 07:52
  4. Mouseover (Hover) bei Text
    Von mR.fLopPy im Forum HTML & XHTML
    Antworten: 4
    Letzter Beitrag: 05.09.04, 00:08
  5. HOver/MouseOver in mit Grafiken in HTML
    Von StifflersMom im Forum HTML & XHTML
    Antworten: 5
    Letzter Beitrag: 26.06.03, 15:51