• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

mouseover effekt

Status
Für weitere Antworten geschlossen.
K

kepi

Neues Mitglied
Hallo!

Hoffe es kann mir jemand helfen,
ich habe eine ein Bild (Weltkarte in jpg, ursrünglich in illustrator format)...ich möchte den Effekt, wenn man über bestimmte Länder mit der Maus fährt, das diese sich einfärben....wie muss ich da vorgehen?

Grüsse,
kepi
 
Hi,

mein Problem liegt aber auch darin, dass ich mich nicht mit Adobe Illustrator auskenne...die Landkarte habe ich, die einzelnen Länder sind auch umkreist..
Wie muss ich denn nun Schritt für Schritt vorgehen?

Wie schon erwähntr, mein Ziel ist es

- wenn man über bestimmte Länder mit der Maus fährt sollen diese ein andere Farbe annehmen...die verlinkung bestimmter länder habe ich mit image map im illustrator hinbekommen...


wie bekomme ich das mit dem mouseover effekt hin ???....gibt es irgendwo so etwas ähnliches wie ne Anleitung? das wäre so cool....hab schon ewig gegoogelt, aber keine gefunden, die mir wirklich geholfen hat.

grüsse,
kepi
 
Zuletzt bearbeitet:
Hi kepi,

warum onmouseover?
Javascript hat doch ein Teil der User sowieso aus Sicherheitsgründen abgeschaltet.

Das geht doch auch mit reinem CSS.
a:hover ist doch mittlerweile auf alle Elemente anwendbar.

koslowski
 
hi,

also ich habe z.b, hier ein image map auf ein land meiner landkarte gelegt...
Code: 
<html>
<head>
<title>Landkarte</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (landkarte.ai) -->
<img src="Bilder/test5.gif" width="2824" height="1319" border="0" alt="" usemap="#test5_Map">
<map name="test5_Map">
<area shape="poly" alt="" coords="1350,700, 1349,697, 1350,695, 1349,693, 1349,690, 1350,690, 1350,687, 1350,684, 1348,683, 1346,682, 1346,676, 1345,676, 1345,675, 1343,674, 1342,673, 1341,672, 1335,672, 1335,672, 1329,676, 1324,677, 1324,676, 1320,676, 1318,677, 1316,677, 1315,676, 1311,676, 1309,674, 1304,674, 1303,671,
1299,670, 1299,667, 1297,668, 1293,668, 1288,669, 1283,671, 1279,672, 1276,674, 1273,675, 1265,675, 1263,676, 1261,673, 1259,672, 1258,670, 1256,670, 1253,669, 1252,668, 1250,668, 1250,671, 1251,673, 1250,674, 1249,675, 1248,677, 1248,678, 1247,678, 1248,679, 1250,680, 1252,679, 1255,677, 1257,677, 1260,677, 1262,677, 1265,677,
1264,680, 1262,681, 1260,682, 1256,682, 1253,681, 1250,681, 1248,682, 1246,685, 1246,687, 1249,689, 1251,691, 1251,693, 1249,694, 1247,696, 1247,697, 1252,697, 1253,701, 1254,703, 1255,706, 1257,708, 1259,708, 1260,707, 1262,707, 1264,709, 1265,710, 1267,711, 1269,711, 1272,711, 1273,710, 1273,707, 1276,706, 1278,707, 1281,709,
1283,711, 1287,711, 1292,710, 1295,708, 1297,707, 1298,708, 1301,707, 1302,706, 1303,707, 1303,709, 1303,711, 1303,711, 1305,712, 1306,712, 1306,707, 1307,706, 1309,707, 1311,708, 1313,707, 1317,706, 1318,707, 1321,707, 1325,707, 1327,705, 1331,705, 1336,705, 1339,705, 1341,703, 1343,702, 1347,702, 1347,703, 1349,703, 1351,704,
1350,700" href="http://www.test.de">
</map>
<!-- End ImageReady Slices -->
</body>
</html>
wie und wo kann ich denn nun dieses ahover realisieren an der stelle von dieses image map ist?

ich raffs einfach nicht!
 
Hi kepi,

hier erstmal ein Link
zu Imagemaps.

Mit imagemaps kenne ich mich überhaupt nicht aus, aber zu a:hover hätte ich einen Vorschlag:
Code: 
<body id="startseite">
              <div id="container">
                 <p>
 <img src="karte.png" width="345" height="312" border="0       alt="Karte" usemap="#Landkarte">
<map name="Landkarte">
<area shape="rect" coords="11,10,59,29"
href="http://www.koblenz.de/" alt="Koblenz"   title="Koblenz"> 
</map>
</p>             
</div>
            </body>

das Ansprechen dann über Nachfahrenselektoren z.B.
Code: 
#startseite area a:hover,
           #startseite area a:focus  { color:#....;
                                                  background-color:#....;  }

Color ist für Schriftfarbe z.B., Background-color für das Element.

Ist nur ein Beispiel aber vielleicht kannst du mit dem Link oben und dem Vorschlag etwas basteln.:)
 
also das mit den imagemap hatte ja schon geklappt....ich kann nur nicht oder immer moch nicht den bereich einfärben wenn ich mit der maus drüber gehe
 
Hi,

ich konnte mein Problem immer noch micht lösen.
Kann mir denn keiner helfen? Wie bekomme ich einen Mouseover Effekt auf einer Weltkarte hin. Ich will ja nur das sich das entsprechende Land in eine andere farbe einfärbt....das ist bestimmt nicht schwer!Aber ich bekomme es einfach nicht hin...muss ich die einzelenen Länder erstmal einfärben und dann nochmal speichern?? Und dann im Programmcode irgendwie aufrufen per mouseover....???

Grüsse,
kepi
 
Code: 
<html>
<head>
<title>Weltkarte</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
    WeltKarte = new Image();
    WeltKarte.src = " WeltKarte.gif";

    Germany = new Image();
    Germany.src = "Germany.gif";

    function Bildwechsel(Bildnr,Bildobjekt)
  {
   window.document.images[Bildnr].src = Bildobjekt.src;
  }

</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (WeltKarte.ai) -->
<a href="WeltKarte.html" onMouseOver="Bildwechsel(0,Germany)"
 onMouseOut="Bildwechsel(0,WeltKarte)">
<img src="Bilder/Weltkarte3.gif" width="2824" height="1319" border="0" alt="" usemap="#WeltKarte3_Map"></a>
<map name="WeltKarte_Map">
<area shape="poly" alt="" coords="899,963, 892,963, 883,956, 875,951, 865,951, 855,948, 850,950, 848,951, 847,950, 849,946, 847,944, 845,944, 835,938, 829,938, 827,941, 821,946, 821,944, 826,938, 826,936, 816,937, 815,941, 810,940, 809,938, 818,929, 818,925, 814,921, 813,913, 809,910, 809,910, 805,915, 805,918, 802,921,
800,922, 799,924, 797,924, 794,923, 793,922, 791,919, 786,919, 785,922, 783,923, 776,923, 773,926, 771,926, 767,927, 764,925, 762,918, 762,915, 763,913, 763,911, 762,909, 761,905, 758,905, 759,906, 752,911, 743,913, 739,912, 739,912, 735,912, 738,914, 738,916, 737,917, 738,920, 742,922, 741,924, 738,924, 730,929, 725,929,
723,928, 723,926, 720,926, 718,922, 714,925, 706,925, 706,928, 709,931, 705,932, 703,933, 707,938, 708,941, 707,948, 705,958, 705,958, 705,960, 695,960, 693,963, 687,967, 686,969, 687,971, 683,975, 684,978, 685,982, 688,985, 688,988, 690,988, 695,992, 701,988, 702,996, 703,998, 703,998, 709,999, 709,999, 713,999, 720,992,
724,989, 732,990, 732,993, 730,996, 731,1000, 737,1008, 740,1006, 742,1006, 746,1010, 748,1009, 750,1009, 755,1013, 759,1015, 761,1018, 760,1021, 758,1023, 761,1028, 771,1027, 771,1030, 770,1032, 774,1035, 775,1039, 774,1044, 773,1048, 773,1053, 768,1047, 773,1053, 774,1058, 772,1062, 778,1063, 783,1063, 787,1067, 787,1074,
791,1073, 794,1073, 795,1077, 793,1080, 794,1084, 793,1084, 797,1086, 798,1091, 796,1094, 794,1093, 789,1096, 789,1102, 787,1102, 785,1101, 782,1104, 784,1107, 780,1110, 778,1109, 776,1112, 776,1114, 779,1114, 784,1116, 784,1118, 786,1118, 791,1121, 799,1128, 800,1132, 798,1134, 798,1135, 800,1135, 803,1134, 804,1132, 805,1127,
805,1125, 806,1123, 810,1117, 812,1113, 814,1114, 813,1118, 811,1121, 808,1124, 809,1125, 814,1121, 817,1116, 817,1113, 826,1102, 827,1096, 827,1084, 831,1082, 836,1075, 839,1075, 842,1072, 848,1071, 849,1068, 863,1067, 863,1065, 868,1064, 869,1058, 876,1047, 877,1041, 880,1037, 880,1028, 881,1025, 879,1024, 879,1014, 881,1007,
882,1007, 885,1007, 887,1004, 892,996, 896,994, 902,986, 904,982, 904,973, 899,963" href="http://test.de">
</map>
<!-- End ImageReady Slices -->
</body>
</html>
Was mache ich denn falsch?
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben