Verbindung von Imagemap und Bild tauschen


  • Taxel
  • 1011 Aufrufe 7 Antworten

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Verbindung von Imagemap und Bild tauschen

    HI Leute,

    weiß jemand von euch, ob man Folgendes in HTML realisieren kann:

    ein großes Bild auf einer Website, auf dem mehrere Personen zu sehen sind;
    sobald man mit der Maus auf das Bild fährt, wird alles schwarz-weiß(also grautöne);
    wenn man jetzt auf eine der Personen fährt, wird das ganze Bild getauscht, sodass nur diese Person farbig wird;
    außerdem kann man, wenn man auf die Person klickt, auf eine Seite, auf der eine Beschreibung dieser Person ist, gelangen

    wäre das möglich?
    Cuiusvis hominis est errare, nullius nisi insipientis in errore perseverare.
    Irren ist menschlich, doch im Irrtum zu verharren ist ein Zeichen von Dummheit.

    -Cicero

  • Hi,

    also ich denk mit ner Imagemap wirst Du da große Probleme haben, weil Du diese Polygone nur schwer nachbilden kannst. Ich würde versuchen, Divs über die Personen zu legen und das Gruppenbild dann immer je nachdem in welchem Div deine Maus grad ist austauschen.

    Grob so:
    • Hintergrundbild
    • absolute positionierte Divs mit onmouseover / onmouseout und onclick Ereignissen:
      • onclick = Öffnen der Detailseite
      • onmouseover = Tausch des Hintergrundbild mit dem Hintergrundbild, auf dem die anderen Personen nicht farbig sind + Overlay aufrufen, was den Rest "ausgraut"
      • onmouseout = Tausch des Hintergrundbildes in Ursprungszustand



    Bin aber für andere Anregungen oder Ideen offen :)

  • könnt ich mal bitte die Syntax von den ganzen Befehlen haben?
    und wie soll ich die Div-tags über die Personen legen?
    Cuiusvis hominis est errare, nullius nisi insipientis in errore perseverare.
    Irren ist menschlich, doch im Irrtum zu verharren ist ein Zeichen von Dummheit.

    -Cicero

  • huhu,

    basically:

    HTML-Quellcode

    1. <html>
    2. <head>
    3. <title></title>
    4. <style type="text/css">
    5. body {
    6. background-image: url(/bilder/hintergrungbild.jpg) no-repeat;
    7. margin: 0;
    8. padding: 0;
    9. }
    11. div {
    12. position: absolute;
    13. cursor: pointer;
    14. }
    16. #person1 {
    17. top: 10px;
    18. left: 200px;
    19. width: 87px;
    20. height: 150px;
    21. background-color: #ADADAD;
    22. }
    24. #person2 {
    25. top: 87px;
    26. left: 30px;
    27. width: 120px;
    28. height: 80px;
    29. background-color: #232523;
    30. }
    31. </style>
    32. <script type="text/javascript">
    33. function wechselHintergrund(id) {
    35. if(id) {
    37. document.body.backgroundImage = 'url(/bilder/hintergrungbild_'+id+'.jpg) no-repeat;';
    38. } else {
    40. document.body.backgroundImage = 'url(/bilder/hintergrungbild.jpg) no-repeat;';
    41. }
    42. }
    44. function oeffnePerson(name) {
    46. document.location.href = '/'+name+'.html';
    47. }
    48. </script>
    49. </head>
    50. <body>
    51. <div id="person1" onmouseover="wechselHintergrund(this.id);" onmouseout="wechselHintergrund();" onclick="oeffnePerson('peter');"> </div>
    52. <div id="person2" onmouseover="wechselHintergrund(this.id);" onmouseout="wechselHintergrund();" onclick="oeffnePerson('antje');"> </div>
    53. </body>
    54. </html>
    Alles anzeigen


    Wie Du siehst, gibt es 2 Divs, einmal mit id="person1" & einmal mit id="person2". Oben siehst Du den Teil

    Quellcode

    1. #person1 {
    2. top: [B]10px[/B];
    3. left: [B]200px[/B];
    4. width: [I] 87px;[/I]
    5. height: [I]150px[/I];
    6. [U]background-color: #ADADAD;[/U]
    7. }

    Über die Werte top und left kannst Du einstellen, wo das Div nachher erscheint. Der Einfachkeit halber habe ich noch eine Hintergrundfarbe eingestellt, damit Du siehst, wo das Div gerade ist ;) Die solltest Du rausnehmen, wenn Du alle Divs posistioniert hast!
    Dann musst Du noch die Größe des Divs einstellen. Jede Person kann auf deinem Hintergrundbild ja unterschiedlich groß sein!
    Mit diesen 4 Werten musst Du also für jede Person ein bisschen spielen, bis alles an der richtigen Stelle ist. Danach kannst Du die Zeile mit background-color entfernen.

    Gut. Dann zum Rest der Struktur. Du brauchst einmal das Basishintergrundbild und für jede Person ein Hintergrundbild, auf dem die entsprechende Person in Farbe dargestellt ist und der Rest nicht. Das Basishintergrundbild legst Du in den Unterordner "/bilder/" mit dem Namen "hintergrungbild.jpg". Die anderen Hintergrundbilder liegen ebenfalls in diesem Ordner, aber mit nem Namen "hintergrungbild_person1.jpg" oder "hintergrungbild_person2.jpg".
    Dieser Suffix person1 ist die ID von dem Div, das über der Person liegen soll. Deswegen musst Du es auch so nennen!

    Ansonsten gibts ja noch den Klick auf das Div:

    Quellcode

    1. <div id="person2" onmouseover="wechselHintergrund(this.id);" onmouseout="wechselHintergrund();" [B]onclick="oeffnePerson('[U]antje[/U]')[/B];"> </div>

    Wie Du sehen kannst, unterscheidet sich also nicht nur die id der Divs, sondern auch der Part in onclick. Ich habe hier die tatsächlichen Namen der Personen verwendet, da die HTML-Seiten für die Personen über Namen schöner sind... kann der Benutzer sich leichter merken als person1 :)
    Hier gilt einfach: eine HTML-Seite für den Benutzer mit dem Namen .html im Basisverzeichnis. Aus dem Beispiel gerade würde die Datei antje.html heissen.


    Hmm noch fragen? :)

  • danke für den code, aber der funktioniert nicht
    teilweise weiß ich jetzt auch warum:
    das Semikolon (;) hinter background-image fehlt
    nur das bild wechseln funktioniert noch nicht
    es ist doch möglich, dass ich statt "#person1" "#antje" schreib, wenn ich dann auch unten die ID von "person1" in "antje" umschreib, oder?
    Cuiusvis hominis est errare, nullius nisi insipientis in errore perseverare.
    Irren ist menschlich, doch im Irrtum zu verharren ist ein Zeichen von Dummheit.

    -Cicero

  • Hi,
    das ist nur ein kleiner JS-Fehler im Code. "backgroundImage" ist eine Eigenschaft vom style des HTML-Objekts, muss also so heißen

    Quellcode

    1. document.body.style.backgroundImage


    Aber es gibt auch noch 2 CSS-Fehler. Einmal sollten url-Angaben in Hochkommerta oder Anführungsstriche stehen (eher ein unbedeutener Fehler) und no-repeat ist eine Eigenschaft von background oder background-repeat, aber nicht von background-image.

    Also müsste es so funktionieren:

    HTML-Quellcode

    1. <html>
    2. <head>
    3. <title></title>
    4. <style type="text/css">
    5. body {
    6. background-image: url('/bilder/hintergrungbild.jpg');
    7. background-repeat: no-repeat;
    8. margin: 0;
    9. padding: 0;
    10. }
    12. div {
    13. position: absolute;
    14. cursor: pointer;
    15. }
    17. #person1 {
    18. top: 10px;
    19. left: 200px;
    20. width: 87px;
    21. height: 150px;
    22. background-color: #ADADAD;
    23. }
    25. #person2 {
    26. top: 87px;
    27. left: 30px;
    28. width: 120px;
    29. height: 80px;
    30. background-color: #232523;
    31. }
    32. </style>
    33. <script type="text/javascript">
    34. function wechselHintergrund(id) {
    36. if(id) {
    38. document.body.style.backgroundImage = 'url("/bilder/hintergrungbild_'+id+'.jpg")';
    39. } else {
    41. document.body.style.backgroundImage = 'url("/bilder/hintergrungbild.jpg")';
    42. }
    43. }
    45. function oeffnePerson(name) {
    47. document.location.href = '/'+name+'.html';
    48. }
    49. </script>
    50. </head>
    51. <body>
    52. <div id="person1" onmouseover="wechselHintergrund(this.id);" onmouseout="wechselHintergrund();" onclick="oeffnePerson('peter');"> </div>
    53. <div id="person2" onmouseover="wechselHintergrund(this.id);" onmouseout="wechselHintergrund();" onclick="oeffnePerson('antje');"> </div>
    54. </body>
    55. </html>
    Alles anzeigen


    Aber sonst reife Leistung, die_dani85 (also generell im HowTo)

    Gruß
    Broken Sword
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Broken Sword ()