PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Verweissensitive Grafik


Korrix
24-06-2005, 14:53
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.
BlueJay
24-06-2005, 16:29
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
Korrix
26-06-2005, 22:26
:-) Danke für die schnelle Antwort.

Leider bin ich mit JavaScript nicht so vertraut. Kannste mal ein kleines Beispiel machen?

Danke, Korrix
BlueJay
27-06-2005, 08:09
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:


function bild_aus()
{
document.getElementById('hoverlayer').style.visibi lity="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.visibi lity="visible";
}



mal so quick and dirty, Familie knatscht schon, will mich haben.

so long,
BlueJay
Säck
05-07-2005, 21:35
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


<img src=./pics/bild.jpg usemap="#mymap" name="bild" />


Danach die verschiedenen zonen definieren, zu jeder zone kannst du javascript events programmieren


<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>


Und noch den Javascript code


<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>

Wenn du jetzt auf die Zone Physic Tools fährst wird
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/index.php?site=workbench.inc.php
Der Speed auf der Homepage ist sehr langsam, dient nur zum testen und zeigen.

gruss