Archivlink: javarea.de Forum > JavaScript > hotspot und mouseover.. hilfe! :(
Vollständigen Link anzeigen: javarea.de Forum > JavaScript > hotspot und mouseover.. hilfe! :(

Pages: [1] 2 ... nächste » ... Letzte »

geschrieben von McGiftfrosch am 03.03.2006 - 19:36
Hey ihr!!

Ich hoffe ich ärgere euch jetzt nicht mit meiner Frage.. ich hab folgendes Problem..

Dieses hier:
http://www.it-academy.cc/content/ar....php?ID=713

Das würde ich gerne ohne Flash hinbekommen.. ich kenn mich bei dem Tutorial einfach nicht aus

Tut mir leid, falls ich euch geärgert habe..

Wäre wirklich dankbar wenn mir jemand helfen könnte!!

DANKE DANKE DANKE DANKE!!

Viele Grüße,
Steffi

geschrieben von weisnix am 03.03.2006 - 21:40
Viel vergnügen!

Dann leg mal los und zerlege dein Bild. Genau nach Anweisung.

Du brauchst das schwarzweiße und die farbigen Ausschnitte.

Das schwarzweiße dann in etwa wie das hier – und die farbigen gif´s dann mit mouseover darüber legen.

geschrieben von zippy am 03.03.2006 - 22:28
Hab mir nicht das ganze Tutorial durchgelesen, aber mir scheint, es geht auch anders, wenn auch etwas umständlich.

1.) Mit Maps kannst auch Polygone, also Vielecke, definieren, die dann auf Links ansprechen. Ein Javascript-Mouseover könnte dann das Hintergrundbild (in dem Beispiel die Band) austauschen. Wennst über einen Musiker fährst, dann kommt das Hintergrundbild mit diesem als bunt.

Link dazu:
http://de.selfhtml.org/html/grafike....sitive.htm

2.) Im IE gehen sounds mit bgsound. Das ist aber kein "normiertes" Kommando. Die anderen Browser machen nicht mit. Fürn Firefox(ex-bird) gibts ne Art Plugin, dass er das kann. Hat aber kaum jemand installiert.

3.) Selber hab ich schon mehrmals "Mikro-Flashs" mit Musik eingesetzt, die nichts anderes konnten, als Musik zu spielen. Aus mir undurchschaulichen Gründen hab ich ein Megabyte mp3 bei gehörmäßig gleicher Qualität in 400kB Flash untergebracht. Einen Austausch solcher Miniflashes per Mouseover hab ich noch nie probiert, würde mich also über detaillierte Erfolgsberichte zu diesem Thema freuen.

4.) Zusammenfassung: Mit maps kannst Du mittels onMouseOver="javascript:hintergrundtausch()" den Bildeffekt erzeugen. Ein Austausch der Musik mittels <bgsound src="..."> mittels derselben Methode funzt nur im IE. Ob ein Javascript-Austausch von Flashs mittels mouseover funktioniert, würde mich selbst interessieren. Wegen meiner versteckten Soundflashs nämlich.


geschrieben von McGiftfrosch am 04.03.2006 - 12:27
Hi!!

Vielen Dank für die schnellen Antworten!!

Habe jetzt insgesamt 5 "halb s/w, halb farbe" bilder.. sprich.. den typen 1 in farbe, alles andere s/w (das ist das erste bild..), dann den typen 2 in farbe, typ1 und alles andere in s/w (das ist das zweite bild..) usw..

und ein hintergrundbild, welches komplett s/w ist..

wie mach ich jetzt weiter?

tut mir leid, dass ich eure zeit verschwende, aber ich bin einfach langsam im Verstehen.. :/

Viele liebe Grüße,
Steffi

geschrieben von zippy am 04.03.2006 - 13:58
Interessante Sache, Frosch. Habs ausprobiert. Kannstas anschauen und den Quelltext kopieren. Die Gesichter flippen ein bisserl, weil ich sie erst nachträglich unkenntlich gemacht habe.

http://oekozone.com/map/b.htm

Der soundeffekt gaht auf diese Art leider nur im IE.

geschrieben von McGiftfrosch am 04.03.2006 - 14:00
wow zippy!!

das schaut ja echt toll aus.. echt wahnsinn.. genauso wie ich's mir vorgestellt hab!!

DANKE DANKE DANKE.. darf ich dich nochmal kontaktieren falls ich mich immer noch nicht auskennen sollt? *g*

Grüße,
Steffi

geschrieben von zippy am 04.03.2006 - 14:23
Gern geschehen. ich lern ja ne Menge bei solchen Versuchen. Hoffentlich hast nen Dreamweaver oder was ähnliches, um die vielen Koordinaten für die Polygone automatisch zu erzeugen.

Im Dreamweaver findest du die Funktion im "Bilder-Meue", unter Hotspot-Polygon zeichnen". Musst aber dann beim Bild unter usemap="#...." den Namen der Map eintragen, und in die einzelnen <area shape="....."....> die Kommandos für onMouseOver() und onMouseOut().

Frontpage kanns wahrscheinlich auch, aber damit kenn ich mich nicht aus.

geschrieben von McGiftfrosch am 04.03.2006 - 14:30
Okay, also.. ich habe jetzt folgenden Code..


<html>

<head>
<SCRIPT type=text/javascript>


function showimage(pic)
{
document.getElementById('testbild').src=pic+".jpg";
}
function restoreimage()
{
document.getElementById('testbild').src="Barcelona7bgrau.jpg";
}

</SCRIPT>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Neue Seite 1</title>
</head>

<body>

<p><map name="FPMap0"><AREA onmouseover="showimage('test1')"
onmouseout=restoreimage()
coords="94, 11, 67, 23, 47, 39, 47, 60, 56, 78, 63, 105, 55, 124, 38, 146, 16, 173, 6, 200, 9, 268, 15, 355, 20, 399, 25, 404, 366, 405, 337, 357, 311, 355, 305, 298, 332, 287, 338, 270, 329, 247, 312, 241, 294, 218, 248, 217, 215, 207, 204, 178, 177, 137, 158, 113, 177, 101, 171, 79, 176, 45, 178, 11, 158, 0" shape="polygon"
href="file:///C:/Dokumente und Einstellungen/Steffi/Eigene Dateien/Eigene Webs/testtest/lalalaa.htm">
<area coords="177, 43, 196, 28, 230, 28, 258, 40, 263, 92, 254, 118, 259, 142, 277, 146, 285, 166, 296, 194, 316, 219, 341, 248, 367, 274, 392, 282, 404, 272, 419, 163, 421, 129, 441, 108, 454, 113, 463, 131, 456, 156, 447, 165, 443, 158, 451, 135, 445, 124, 431, 144, 422, 231, 417, 287, 450, 295, 495, 300, 500, 325, 515, 370, 512, 405, 367, 404, 339, 356, 314, 355, 306, 299, 341, 283, 333, 255, 318, 242, 297, 219, 248, 216, 221, 206, 190, 156, 161, 115, 178, 102, 171, 81" shape="polygon" nohref>
<area coords="263, 142, 271, 122, 284, 112, 270, 80, 275, 50, 302, 31, 329, 26, 346, 42, 364, 55, 366, 78, 360, 104, 373, 117, 408, 117, 426, 110, 448, 103, 465, 99, 486, 87, 509, 80, 528, 86, 551, 100, 539, 125, 523, 132, 513, 116, 519, 134, 517, 143, 500, 139, 513, 214, 522, 252, 551, 246, 569, 252, 584, 266, 599, 277, 599, 397, 599, 405, 510, 405, 516, 363, 495, 299, 420, 285, 433, 145, 443, 127, 452, 137, 444, 162, 448, 169, 461, 156, 465, 133, 455, 114, 438, 110, 418, 126, 401, 274, 393, 281, 368, 274, 293, 187, 279, 147" shape="polygon" nohref>
<area coords="353, 44, 370, 24, 397, 17, 419, 33, 437, 57, 434, 81, 438, 97, 455, 96, 479, 82, 514, 69, 552, 81, 555, 124, 525, 157, 535, 179, 570, 212, 593, 238, 599, 247, 599, 279, 563, 246, 527, 248, 502, 149, 516, 143, 530, 134, 548, 120, 551, 102, 526, 82, 505, 82, 471, 97, 440, 105, 420, 108, 409, 114, 373, 115, 360, 105, 367, 74, 368, 55" shape="polygon" nohref>
</map>
<img border="0" src="file:///C:/Dokumente%20und%20Einstellungen/Steffi/Eigene%20Dateien/Eigene%20Webs/testtest/Barcelona7bgrau.jpg" usemap="#FPMap0" width="600" height="406"></p>

</body>

</html>


Aber irgendwie kommt da dauernd so ein Java-Script Fehler..

Ich bin einfach zu dumm dafür glaub ich..

geschrieben von René am 04.03.2006 - 14:35
HTML-Quelltext
1: 
<img id="testbild" border="0" src="file:///C:/Dokumente%20und%20Einstellungen/Steffi/Eigene%20Dateien/Eigene%20Webs/testtest/Barcelona7bgrau.jpg" usemap="#FPMap0" width="600" height="406">

geschrieben von McGiftfrosch am 04.03.2006 - 14:43
Gut.. das hab ich jetzt geändert.. und es kommt auch kein Fehler mehr, aber wenn ich dann mit der Mouse über das Bild fahre, ändert sich das Bild zwar, aber in ein "Das Bild kann nicht angezeigt werden" (mit dem roten X rechts oben..)

also langsam geb ich's auf

geschrieben von zippy am 04.03.2006 - 14:53
HTML-Quelltext
1: 
2: 
3: 
4: 
<AREA onmouseover="showimage('test1')" 
onmouseout=restoreimage()
coords="94, 11, 67, 23, 47, 39, 47, 60, 56, 78, 63, 105, 55, 124, 38, 146, 16, 173, 6, 200, 9, 268, 15, 355, 20, 399, 25, 404, 366, 405, 337, 357, 311, 355, 305, 298, 332, 287, 338, 270, 329, 247, 312, 241, 294, 218, 248, 217, 215, 207, 204, 178, 177, 137, 158, 113, 177, 101, 171, 79, 176, 45, 178, 11, 158, 0" shape="polygon" 
href="file:///C:/Dokumente und Einstellungen/Steffi/Eigene Dateien/Eigene Webs/testtest/lalalaa.htm">


In meinem Beispiel heißen die Bilder: test0.jpg, test1.jpg und so weiter. Du musst natürlich DEINE Bildernamen eintragen. Im Beispiel hab ich auch nur deshalb die Bildernamen in Namen (zB.test0) und typ (".jpg"wird im Javascripthinzugefügt) geteilt, weil das Javascript auch Tondateien, die ebenfalls so heißen, anspricht.

Wennst also das Javascript aus dem Beispiel verwendest, gehört an der oben rot markierten Stelle der gewünschte Namen des Austauschbildes OHNE .jpg rein. Wennst ihn MIT der Endung eintragen musst, zB, weil Du auch Gifs oder PNGs verwendest, dann ändere eine Zeile im Javascript:

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
<html>

<head>
<SCRIPT type=text/javascript>

function showimage(pic)
{
document.getElementById('testbild').src=pic;
}
function restoreimage()
{
document.getElementById('testbild').src="Barcelona7bgrau.jpg";
} 
</SCRIPT>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Neue Seite 1</title>
</head>

<body>

<p><map name="FPMap0"><AREA onmouseover="showimage('deintauschbild1.jpg')" 
onmouseout=restoreimage()
coords="94, 11, 67, 23, 47, 39, 47, 60, 56, 78, 63, 105, 55, 124, 38, 146, 16, 173, 6, 200, 9, 268, 15, 355, 20, 399, 25, 404, 366, 405, 337, 357, 311, 355, 305, 298, 332, 287, 338, 270, 329, 247, 312, 241, 294, 218, 248, 217, 215, 207, 204, 178, 177, 137, 158, 113, 177, 101, 171, 79, 176, 45, 178, 11, 158, 0" shape="polygon" 
href="file:///C:/Dokumente und Einstellungen/Steffi/Eigene Dateien/Eigene Webs/testtest/lalalaa.htm">
<area coords="177, 43, 196, 28, 230, 28, 258, 40, 263, 92, 254, 118, 259, 142, 277, 146, 285, 166, 296, 194, 316, 219, 341, 248, 367, 274, 392, 282, 404, 272, 419, 163, 421, 129, 441, 108, 454, 113, 463, 131, 456, 156, 447, 165, 443, 158, 451, 135, 445, 124, 431, 144, 422, 231, 417, 287, 450, 295, 495, 300, 500, 325, 515, 370, 512, 405, 367, 404, 339, 356, 314, 355, 306, 299, 341, 283, 333, 255, 318, 242, 297, 219, 248, 216, 221, 206, 190, 156, 161, 115, 178, 102, 171, 81" shape="polygon" onmouseover="showimage('deintauschbild2.jpg')" 
onmouseout=restoreimage()
 nohref>
<area coords="263, 142, 271, 122, 284, 112, 270, 80, 275, 50, 302, 31, 329, 26, 346, 42, 364, 55, 366, 78, 360, 104, 373, 117, 408, 117, 426, 110, 448, 103, 465, 99, 486, 87, 509, 80, 528, 86, 551, 100, 539, 125, 523, 132, 513, 116, 519, 134, 517, 143, 500, 139, 513, 214, 522, 252, 551, 246, 569, 252, 584, 266, 599, 277, 599, 397, 599, 405, 510, 405, 516, 363, 495, 299, 420, 285, 433, 145, 443, 127, 452, 137, 444, 162, 448, 169, 461, 156, 465, 133, 455, 114, 438, 110, 418, 126, 401, 274, 393, 281, 368, 274, 293, 187, 279, 147" shape="polygon" onmouseover="showimage('deintauschbild3.jpg')" 
onmouseout=restoreimage()
 nohref>
<area coords="353, 44, 370, 24, 397, 17, 419, 33, 437, 57, 434, 81, 438, 97, 455, 96, 479, 82, 514, 69, 552, 81, 555, 124, 525, 157, 535, 179, 570, 212, 593, 238, 599, 247, 599, 279, 563, 246, 527, 248, 502, 149, 516, 143, 530, 134, 548, 120, 551, 102, 526, 82, 505, 82, 471, 97, 440, 105, 420, 108, 409, 114, 373, 115, 360, 105, 367, 74, 368, 55" shape="polygon" nohref>
</map>
<img border="0" src="file:///C:/Dokumente%20und%20Einstellungen/Steffi/Eigene%20Dateien/Eigene%20Webs/testtest/Barcelona7bgrau.jpg" usemap="#FPMap0" width="600" height="406"></p>

</body>

</html>

geschrieben von McGiftfrosch am 05.03.2006 - 16:42
Danke für deine erneute Hilfe!!

Ich habs jetzt hinbekommen.. es funktioniert alles soweit..
ein problem gibt's aber trotzdem noch.. und zwar:

Ich arbeite mit Frontpage.. und wenn ich in Frontpage die Seite index.html als "Browservorschau" starte, funktioniert alles.. oben, unter der Menüleiste, zeigt sich dann so eine Art "Popupblocker", da muss ich dann auf "zulassen" klicken, dann funktionierts..
Wenn ich die Seite aber veröffentliche, funktioniert's nicht.. es wird auch kein "Popupblocker" angezeigt..

Hier die URL: http://www.freewebtown.com/mcgiftfrosch/

Was hab ich denn jetzt schon wieder falsch gemacht? :'(

Viele liebe Grüße,
Steffi

geschrieben von René am 05.03.2006 - 17:12
Hier funktioniert es, halte mit der Maus mal auf eine Person und warte etwas.

geschrieben von McGiftfrosch am 05.03.2006 - 17:15
Stimmt!!

ES FUNKTIONIERT *juhu*

ich danke euch allen vielmals!!!!!!

DANKE DANKE DANKE DANKE!!!



Viele Grüße aus Wien,
Steffi

geschrieben von zippy am 05.03.2006 - 17:25
Die Bilder sind RIESENGROSS, über 200kB! Komprimier sie auf ca 20-30kB. Dann geht es auch schneller. Der Server, auf dem Deine Seite liegt, braucht einige Sekunden, um dermaßen große Bilder zu "liefern".

Zusätzlich könntest Du die Bilder gleich beim Seitenaufruf preloaden lassen, bzw unsichtbar oder mit Höhe und Breite 0 neben das Hauptbild stellen. Sie werden dann sofort geladen, und nicht erst beim MouseOver.

Tipps für die Bilder (Photoshop):
1) Immer das selbe Ausgangsbild nehmen, Figur als Auswahl, Auswahl umkehren, Farbsättigung voll raus.
Damit erreichst Du, dass der Hintergrund stets den gleichen Kontrast hat. Dieser ist bei Deinen Tauschbildern nämlich immer etwas anders.
2.) "Für Web speichern". Versuche, die Dateigröße (wird angezeigt), so gering wie möglich für die geforderte Darstellungsqualität zu bekommen. Derzeit ist die Datenmenge aller Bilder fast ein Megabyte. Das ist zu viel für den verwendeten Server, und ModembenützerInnen brauchen mindestens 200 Sekunden, um die Seite komplett zu laden. So lange hält niemand die Maus übers Bild.



Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.