Hallo,
ich habe ein Bild der Erde, auf dem alle Kontinente abgebildet sind. Es ist möglich, einen der Kontinente auszuwählen (z.B. mit einer Image-Map).
Dabei soll jeweils der mit dem Mauszeiger überfahrene Kontinent hervorgehoben werden.
Die Bilder sowie auch die hervorgehobenen Kontinente exisisieren schon.
Problem: Wie kann ich das HTML/CSS/JavaScript-technisch realisieren?
Korrix
PS: eine CSS-Lösung ist mir am liebsten.
hmmm.
javascript-mäßig:
1. Erstellen eines layers mit einem Bild, was die Umrisse des Landes aufnimmt
2. onmouseover in dem entsprechendem anchor schaltet das entsprechende Bild in das Layer, Layer wird sichtbar gemacht an Mauszeiger oder sonstwo
3. onmouseout lässt Layer verschwinden
Hope that helps,
BlueJay
:-) Danke für die schnelle Antwort.
Leider bin ich mit JavaScript nicht so vertraut. Kannste mal ein kleines Beispiel machen?
Danke, Korrix
Habe jetzt kein Beispiel zur Hand für Image maps,
aber wenn du dir ein paar Quelltexte meiner Seite ansiehst, sind da genug Beispiele ( http://www.gamecraft.de, view-source: benutzen)
1. Du erstellst im HTML-Teil ein Layer mit Bild:
<div id="hoverlayer" style="position:absolute; width:34px; height:56px; z-index:4"><img src="startbild.gif" alt="dingsbumsda" width=34 height=56 name="hoverbild" id="hoverbild" border=jeNachGeschmack>
2. Am Anfang versteckst du das Bild:
<body onload="bild_aus()">
3. beim Hovern zeigst du es, bei mauseout schaltest du es ab.
<a href="...." onmouseover="bild_ein('afrika.gif',300,200)"
onmouseout="bild_aus()"> ghaöozjstihsv,ztss </a>
4. javascript-Teil:
mal so quick and dirty, Familie knatscht schon, will mich haben.Code:function bild_aus() { document.getElementById('hoverlayer').style.visibility="hidden"; } function bild_ein(bildname,x,y) { document.images['hoverbild'].src=bildname; document.getElementById('hoverlayer').style.left=x; document.getElementById('hoverlayer').style.top=y; document.getElementById('hoverlayer').style.visibility="visible"; }
so long,
BlueJay
Geändert von BlueJay (27-06-2005 um 09:55 Uhr)
Hallo
Ich hatte gerade dieselbe Aufgabe zu lösen.
Ich habe die Lösung via Image maps bevorzugt.
Diese Lösung ist echt einfach:
Zuerst Bild einfügen
Danach die verschiedenen zonen definieren, zu jeder zone kannst du javascript events programmierenHTML-Code:<img src=./pics/bild.jpg usemap="#mymap" name="bild" />
Und noch den Javascript codeHTML-Code:<map name="mymap"> <area name="Pysic Tools" coords="74,11,183,60" href="index.php?site=workbench/torzuraussenwelt.inc.php" onmouseover="animate('0');" onmouseout="original();" /> </map>
Wenn du jetzt auf die Zone Physic Tools fährst wirdCode:<script language="javascript"> // Create off-screen images to cache var number = 13; // Number of Images to animate images = new Array(number); for(var i = 0; i < number; i++) { images[i] = new Image(); images[i].src = "pics/bild" + i + ".jpg"; // URL to load } function animate(frame) { document.SophisWorkbench.src = images[frame].src; } function original(){ document.SophisWorkbench.src = "pics/bild.jpg"; } </script>
automatisch bild0.jpg geladen.
Damit kannst du
das bild0.jpg speichern mit einem Kontinet hervorgehoben.
WICHTIG: bei der zone bei animate('X') -> X ist bildX.jpg.
Realisation:
http://hugi.homelinux.org/sophisware...kbench.inc.php
Der Speed auf der Homepage ist sehr langsam, dient nur zum testen und zeigen.
gruss
Berechtigungen
Zitieren
Lesezeichen