WinFuture-Forum.de: Hintergrundbild (karte) Verlinken - WinFuture-Forum.de

Zum Inhalt wechseln

Nachrichten zum Thema: Entwicklung
Seite 1 von 1

Hintergrundbild (karte) Verlinken


#1 Mitglied ist offline   Skiller 

  • Gruppe: aktive Mitglieder
  • Beiträge: 164
  • Beigetreten: 06. September 05
  • Reputation: 0
  • Geschlecht:Männlich
  • Wohnort:Negenborn

geschrieben 03. Juli 2008 - 13:13

Hi,

ich habe folgendes problem:

Ich möchte eine Karte, die der im Anhang liegenden ähnelt, verlinken. Dabei soll jedoch nicht die gesamte Karte, sondern nur die einzelnen Straßen verlinkt werden. Da das Bild im Hintergrund eines DIV's liegt kann ich auch keine imagemap benutzen. Ich hatte die Idee Links (<a style='display: block;'>) in den DIV zu setzten, allerdings wäre der aufwand gigantisch, da die orginale Karte eine Größe von 3000x2300 hat.

Vielleicht kann man ja mit Javascript die position ermitteln auf die man geklickt hat und dann die Farbe ermitteln und wenn die mit der Straße uberein stimmt eine weiterleitung machen?

Es wäre nett wenn ihr mir helfen könntent.

Angehängte Miniaturbilder

  • Angehängtes Bild: karte.gif

Dieser Beitrag wurde von Skiller bearbeitet: 03. Juli 2008 - 13:16


Eingefügtes Bild
0

Anzeige



#2 Mitglied ist offline   K050V4 

  • Gruppe: aktive Mitglieder
  • Beiträge: 788
  • Beigetreten: 13. August 04
  • Reputation: 0
  • Geschlecht:Männlich
  • Wohnort:Stuttgart
  • Interessen:(X)HTML<br />CSS2+<br />PHP 4/5<br />MySQL 5<br />Symfony 1.2+<br />JavaScript / AJAX<br />jQuery<br />C++<br />C#<br />Java<br />...

geschrieben 03. Juli 2008 - 19:30

Mausposition ermitteln: 
	// handle onmousemove event
	//
	function dpl_mouse_pos(e) {

		// position where mousemove fired
		//
		var xPos	=  e? e.pageX : window.event.x;
		var yPos	=  e? e.pageY : window.event.y;
	
		
		// for ie add scroll position
		//
		if (document.all && !document.captureEvents) {
			xPos	+= document[docEl].scrollLeft;
			yPos	+= document[docEl].scrollTop;
		}
		
		// display position
		//
		document.feld.ausg.value = "Left = " +xPos +" : Top = " +yPos;
		
		// for the dino pass event
		//
		if (document.layers) routeEvent(e);
	}


Dann einfach bei einen onclick-Event die x- & y-Koordinaten abfragen.
Aber jetzt mit der Farbe, dass wird ein Problem :S

Zitat

"In der Welt des Erkennbaren ist die Idee des Guten die höchste." - Platon

Spritify! Easy CSS-Sprite-Generator | Albanisch Deutsch Wörterbuch
0

#3 Mitglied ist offline   Erte 

  • Gruppe: aktive Mitglieder
  • Beiträge: 1.084
  • Beigetreten: 03. Januar 07
  • Reputation: 0
  • Geschlecht:Männlich

geschrieben 03. Juli 2008 - 19:58

Da musste mit nem Image Map ran. Dafür musste die Koordinaten des einzelnen Randpunkte berechnen. Am besten notierst du dir die mit GIMP oder so.
0

#4 Mitglied ist offline   Diewie 

  • Gruppe: aktive Mitglieder
  • Beiträge: 409
  • Beigetreten: 18. Juni 06
  • Reputation: 0
  • Geschlecht:Männlich
  • Wohnort:Geisenhausen / München

geschrieben 03. Juli 2008 - 20:39

Hier mal mein Skript zur Mauspositionsermittlung z.B. auf einem DIV:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Klickposition</title>
<script type="text/javascript">
<!--
	var IE = document.all?true:false; 
	if (!IE) document.captureEvents(Event.MOUSEMOVE) 
	document.onmousemove = setMouseXY;
	
	var mouseX = 0; 
	var mouseY = 0; 
	
	function setMouseXY(e) {
		if (IE) {
			mouseX = event.clientX + document.body.scrollLeft; 
			mouseY = event.clientY + document.body.scrollTop; 
		} else {
			mouseX = e.pageX; 
			mouseY = e.pageY; 
		}
		
		mouseX -= document.getElementById('karte').offsetLeft;
		mouseY -= document.getElementById('karte').offsetTop;
		if (mouseX < 0) mouseX = 0;
		if (mouseY < 0) mouseY = 0;
	
		return true; 
	}
	
	function getCoords() {
		alert(mouseX + "\n" + mouseY);
		return true;
	}
-->
</script>
</head>

<body>
<div id="karte" style="width: 674px; height: 480px; background-image: url(karte.gif); background-repeat: no-repeat;" onclick="getCoords();"></div>
</body>
</html>
Die Farbe an der Klickposition auswerten, ist soviel ich weiß nicht möglich. Bleibt dir wohl nichts anderes übrig als wirklich Bereiche zu definieren.

Gruß,
Stefan
0

#5 Mitglied ist offline   Skiller 

  • Gruppe: aktive Mitglieder
  • Beiträge: 164
  • Beigetreten: 06. September 05
  • Reputation: 0
  • Geschlecht:Männlich
  • Wohnort:Negenborn

geschrieben 04. Juli 2008 - 12:46

Danke für eure Antworten ich werde mal schaun in wieweit mir eure Antworten weiter helfen und mich dann noch mal melden.

Eingefügtes Bild
0

#6 Mitglied ist offline   bardelot 

  • Gruppe: aktive Mitglieder
  • Beiträge: 517
  • Beigetreten: 20. März 04
  • Reputation: 0

geschrieben 04. Juli 2008 - 14:14

Möglicherweise könntest du etwas passendes mit Flash realisieren.

Noch zwei Color Picker Beispiele, das erste mit Flash und das zweite per Javascript Canvas.

Dieser Beitrag wurde von bardelot bearbeitet: 04. Juli 2008 - 14:15

0

Thema verteilen:


Seite 1 von 1

1 Besucher lesen dieses Thema
Mitglieder: 0, Gäste: 1, unsichtbare Mitglieder: 0