Anzeige

Map-Funktion

Map-Funktion | PSD-Tutorials.de

Erstellt von Moochi, 02.08.2008.

  1. Moochi

    Moochi Gesperrt

    Dabei seit:
    22.12.2007
    Beiträge:
    29
    Geschlecht:
    weiblich
    Ort:
    Norden, Ostfrs.
    Software:
    Adobe Photoshop CS4, Inkscape, Photofiltre & Gimp2
    Kameratyp:
    Fujifilm Finepix Z10fd
    Map-Funktion
    Guten morgen liebes Forum :)

    Also, ich brüte über einer Homepage für meine Klasse und möchte gerne eine Idee bezüglich des Klassenfotos realisieren.
    Ich habe mich mal durch google gekämpft und bin nun soweit, dass ich weiß das durch das Map-Tag bestimmt Bereiche auf Bildern verlinkt werden können.
    Nun ist es so, dass ich zu jedem Schüler eine extra Seite mit Steckbrief gemacht habe. Unter dem Foto befindet sich eine Auflistung der Namen (verlinkt).
    Meine eigentliche Frage ist jetzt, ob es irgendwie möglich wäre, dass wenn man mit der Maus über den auf dem gemapten Bild verlinkten Bereich fährt, ein highlighten des zugehörigen Namens unten drunter möglich wäre. Also, dass man z.B. über das Gesicht von XY geht und in der Namensauflistung der Name dann fett oder farbig hervorgehoben wird.


    LG,
    Michelle

    PS: Hab mal ein Bild angehängt, dass mein Konzept zeigen soll. Hoffe ihr könnt mit Frage und Bild was anfangen und mir helfen...

    [​IMG]
     
    #1      
  2. serverhombre

    serverhombre Guest

    Map-Funktion
    AW: Map-Funktion

    Hallo
    also ich hab mal das hier bisschen angepasst:
    ImageMap mit CSS_v2

    kannst dir ja mal den Quellcode anschauen, ist zwar sicherlich nicht die beste Methode denn der IE 6 hat probleme mit dem Hover :'( .
    In IE7,FF,Opera,Netscape ist es aber ok.

    ist aber bisschen Aufwand alle Bildpunkte und die Namen zu positionieren. (position:absolute; ):rolleyes::motz:

    Bei Fragen kannst dich ja nochmal melden.
     
    #2      
  3. Moochi

    Moochi Gesperrt

    Dabei seit:
    22.12.2007
    Beiträge:
    29
    Geschlecht:
    weiblich
    Ort:
    Norden, Ostfrs.
    Software:
    Adobe Photoshop CS4, Inkscape, Photofiltre & Gimp2
    Kameratyp:
    Fujifilm Finepix Z10fd
    Map-Funktion
    AW: Map-Funktion

    Ah, vielen Dank.
    Genau das meinte ich :)

    Das mit dem Aufwand geht schon in Ordnung..es sind ja Ferien :D


    EDIT: Äh, doch nochmal eine Frage..^^
    Das ist ja jetzt mit CSS, also die Bildpunkte. Geht das auch irgendwie mit dem Map-Tag(HTML)?
    →SELFHTML
     
    Zuletzt bearbeitet: 02.08.2008
    #3      
  4. serverhombre

    serverhombre Guest

    Map-Funktion
    AW: Map-Funktion

    Also nur mit ner Html ImageMap wird das so nichts man braucht css bzw. muss dann noch mit javascript nachhelfen.:rolleyes:
    Da müsste ich aber jetzt rumbasteln. :muede:

    Noch paar Beispiel mit css gibts hier:
    Stu Nicholls | CSSplay | Image map
    Stu Nicholls | CSSplay | Image map for detailed information
     
    #4      
  5. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Map-Funktion
    AW: Map-Funktion

    Hallo Moochi,
    ich finde die Idee recht interessant.
    Das mit dem übergreifenden Highlighting ist nur mit Javascript zu lösen.
    Da Du nun schon signalisiert hast, dass da ein gewisser Aufwand in Ordnung geht könnte man es auch direkt angehen.
    du kannst den map tags event handler zuweisen, in diesem Fall wären es die onmouseover, und die onmouseout:
    Code (Text):
    1.  
    2. <area coords.... alt="Peter Parker" onmouseover="hilihght('PeterParker')" onmouseout="unhilight()">
    3.  
    so wird bei jedemmouseover die funktion hilight(schuelername) ausgeführt.
    die aufgabe der Funktion beschreibt man in einem <script></script> Bereich im head:
    Code (Text):
    1.  
    2. <script type="text/javascript">
    3. function hilight(schuelername){
    4.   document.getElementById(schuelername).className = "hilighted";
    5. }
    6. </script>
    7.  
    das zum hilighting.

    die zweite funktion muss nun dafür sorgen, dass das hilighting für des Element wieder aufgehoben wird, wenn die maus, das 'area' wieder verlässt:
    Code (Text):
    1.  
    2. function unhilight(){
    3.    var dieLinks = document.getElementsByTagName("a");
    4.    for (var i = 0; i < dieLinks.length; i++){
    5.       dieLinks[i].className = "";
    6.    }
    7. }
    8.  
    auch diese Funktionsbeschreibung steht im head-bereich.
    sie sammelt alle <a> Elemente und entfernt per schleife die Klassennamen wieder, und damit das hilighting.

    das sollte erstmal ein Start zum ausprobieren sein.

    natürlich muss jeder eintrag unter dem bild die jeweilige id="schuelername" haben
    ________________________
    fast vergessen: die Klasse "hilighted" muss natürlich auch noch definiert werden (zb imStyle bereich im head)
    Code (Text):
    1.  
    2. <style type="text/css">
    3. .hilighted{
    4. background: yellow;
    5. }
    6. </style>
    7.  
    das mit der Klasse hat den vorteil, dass man mehrere eigenschaften auf einmal manipulieren kann zB unterstrichen, fett, schriftgrösse, hintergrund etc (oder auch einen ramen)
     
    Zuletzt bearbeitet: 02.08.2008
    #5      
  6. jackprince

    jackprince xHTML & CSS Junkie

    Dabei seit:
    12.07.2007
    Beiträge:
    528
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    Putty, PS, DW, N++, Filezilla, Editor, ID, AI
    Kameratyp:
    Lumix
    Map-Funktion
    AW: Map-Funktion

    Man könnte auch direkt bei StudiVZ klauen gehen *g*

    Muss aber sagen das wowohl die Variante von serverhombre
    als auch die von soki ihr Vorteile haben.
     
    #6      
  7. saint44

    saint44 Schlingel

    Dabei seit:
    28.04.2008
    Beiträge:
    660
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Adobe Creative Suite Web CS3
    Kameratyp:
    Nikon D5000
    Map-Funktion
    #7      
x
×
×
teststefan