mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Mo 07.10.2024 00:20 Benutzername: Passwort: Auto-Login

Thema: Landkarte mit Mouseover vom 18.05.2010


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Landkarte mit Mouseover
Seite: 1, 2  Weiter
Autor Nachricht
Hubsi17
Threadersteller

Dabei seit: 18.05.2010
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 18.05.2010 18:11
Titel

Landkarte mit Mouseover

 Antworten mit Zitat Zum Seitenanfang
Hallo,

ich würde gerne eine grobe (einige Hauptstädte und Grenzen zur Orientierung) Landkarte von Deutschland mit Standorten und Bezirken basteln.
Die Standorte, zu dem immer ein Bezirk drum herum gehört, sollen als kleine Punkte sichtbar sein und sobald ich mich mit der Maus innerhalb eines Bezirkes aufhalte, sollte dieser Bezirk optisch hervorgehoben und mit einem Link klickbar verknüpft sein.

Wie kann ich so etwas machen?
Vielleicht sogar komlett in css oder html?

THX für eure Hilfe Lächel
  View user's profile Private Nachricht senden
michael2105

Dabei seit: 26.04.2010
Ort: Köln
Alter: 48
Geschlecht: Männlich
Verfasst Di 18.05.2010 19:28
Titel

Antworten mit Zitat Zum Seitenanfang
Ja das geht komplett in html und css - guckst du hier: http://www.html-world.de/program/html_14.php

Am Ende der Seite findest du auch ein paar Links zu Tools die das automatisieren und dir den fertigen Code liefern.


Gruß
Michael
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
Hubsi17
Threadersteller

Dabei seit: 18.05.2010
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 18.05.2010 20:46
Titel

Antworten mit Zitat Zum Seitenanfang
Hi, danke schonmal für die Antwort.

Bekomme ich über diesen Weg auch die optische hervorhebung eines Gebietes worüber sich gerade die Maus befindet hin?
  View user's profile Private Nachricht senden
michael2105

Dabei seit: 26.04.2010
Ort: Köln
Alter: 48
Geschlecht: Männlich
Verfasst Di 18.05.2010 22:42
Titel

Antworten mit Zitat Zum Seitenanfang
Natürlich - brauchst doch nur in CSS eine extra Klasse für den Hover-Status machen - da schreibste dann halt border:2 px solid #ff0000 oder background-color:#808080 rein. Hauptsache es hebt sich farblich vom Rest ab und passt von Stil her ins Farbschema der Seite.

Gruß
Michael
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
zweitaccount

Dabei seit: 25.01.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 19.05.2010 09:47
Titel

Antworten mit Zitat Zum Seitenanfang
michael2105 hat geschrieben:
Natürlich - brauchst doch nur in CSS eine extra Klasse für den Hover-Status machen - da schreibste dann halt border:2 px solid #ff0000 oder background-color:#808080 rein.


Ein area:hover gibts aber imho nicht. Der TE will ja die
Areas highlighten nicht das Bild selbst...

@Hubsi17
Dazu müsstest Du mit wohl JavaScript ran. Beispiel:
http://zweitaccount.zw.ohost.de/imageMapHighlight/

Grob geschrieben sähe das dann so aus:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image Map Highlight</title>
<style type="text/css">
<!--
#imageWithMap {
   width:500px;
   height:500px;
   border:0;
}
-->
</style>
</head>
<body>
<img src="normal.gif" usemap="#myImageMap" id="imageWithMap" alt="My Image" />
<map name="myImageMap" id="myImageMap">
<area shape="poly" coords="155,412,215,452,298,446,384,440,385,414,401,325,288,279,250,301,169,314,147,368,160,404" href="#" alt="My Highlight 1" id="myMap1" />
<area shape="poly" coords="352,155,251,162,170,311,250,302,287,279,402,324,453,292" href="#" alt="My Highlight 2" id="myMap2" />
<area shape="poly" coords="153,409,107,426,82,426,68,356,65,309,82,195,101,120,202,75,304,63,363,75,352,152,246,162,164,313,150,368,153,408" href="#" alt="My Highlight 3" id="myMap3" />
</map>
<script type="text/javascript">
<!--
   // Elemente sammeln
   var myImageMap = document.getElementById('imageWithMap');
   var myMap1 = document.getElementById('myMap1');
   var myMap2 = document.getElementById('myMap2');
   var myMap3 = document.getElementById('myMap3');
   // MouseOver Events dazu
   myMap1.onmouseover = function(){
      myImageMap.src = 'highlight1.gif';
   }
   myMap2.onmouseover = function(){
      myImageMap.src = 'highlight2.gif';
   }
   myMap3.onmouseover = function(){
      myImageMap.src = 'highlight3.gif';
   }
   // MouseOut Event
   myMap1.onmouseout = function(){
      myImageMap.src = 'normal.gif';
   }
   // Das selbe gilt für die anderen beiden
   myMap2.onmouseout = myMap1.onmouseout;
   myMap3.onmouseout = myMap1.onmouseout;
-->
</script>
</body>
</html>


Grüße
zweitaccount
  View user's profile Private Nachricht senden
Hubsi17
Threadersteller

Dabei seit: 18.05.2010
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 19.05.2010 18:52
Titel

Antworten mit Zitat Zum Seitenanfang
Hi, Danke für deine Hilfe. Gefällt mir schon recht gut Lächel

Ohne javascript gehts also leider gar nicht?
  View user's profile Private Nachricht senden
michael2105

Dabei seit: 26.04.2010
Ort: Köln
Alter: 48
Geschlecht: Männlich
Verfasst Mi 19.05.2010 19:01
Titel

Antworten mit Zitat Zum Seitenanfang
Klar gehts ohne Javascript siehe hier: http://frankmanno.com/ideas/css-imagemap-redux/#ex

Oder direkt mal bei Google: http://www.google.de/search?q=imagemap+nur+mit+css+und+html&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:de:official&client=firefox-a
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Hubsi17
Threadersteller

Dabei seit: 18.05.2010
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 19.05.2010 19:16
Titel

Antworten mit Zitat Zum Seitenanfang
Aber über diesen Weg könnte ich die Bereiche nur Recheckig machen oder sehe ich das falsch?

Ich hätte schon gerne die Bezirke entsprechend ihrer (oft an Regierungsgrenzen angepasste Linien) Umrisse markiert.
  View user's profile Private Nachricht senden
 
Ähnliche Themen Mouseover auf Landkarte
Bildergalerie Mouseover andere Position & Mouseover Scroll
Landkarte ausrollen mit flash
Landkarte mit Punkten in html
Veranstaltungskalender mit Landkarte für Webseite
Software um Länder auf Landkarte zu beschriften
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB