zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Fadenkreuz auf Bild

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 26.08.2009, 18:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.09.2008
Beiträge: 29
Skullsplitter befindet sich auf einem aufstrebenden Ast
Standard Fadenkreuz auf Bild

Hallo!

Ich habe heute den ganzen Nachmittag damit verbracht bei Google ein passendes Script für mein Vorhaben zu suchen.

Ich benötige ein Fadenkreuz-Script, welches mir ein Fadenkreuz auf ein Bild zaubert.

Ich habe einen Ausschnitt aus einer Landkarte (immer 300x300 pixel groß) und auf diesem Bild sollte genau die Mitte mit einem Fadenkreuz gekennzeichnet werden.

Leider habe ich von Javascript keine Ahnung und weiß auch nicht, wie ich es sonst lösen sollte.

Kann mir da vielleicht einer von euch weiterhelfen?

Vielen Dank

Skullsplitter
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 30.08.2009, 17:55
Benutzerbild von Pr0g
(^.^)
XHTMLforum-Mitglied
 
Registriert seit: 23.08.2005
Ort: Düsseldorf
Beiträge: 535
Pr0g wird schon bald berühmt werden
Standard

Hi,

soll das Fadenkreuz mittig in dem 300x300px Ausschnitt erscheinen, also fixiert, oder mittig auf dem Bild, welches innerhalb des Ausschnitts bewegt wird? Wie wird das Bild in dem Ausschnitt bewegt? Gibt es vllt. schon einen Link des Ganzen, dass man es sich mal anschauen könnte.
__________________
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 31.08.2009, 11:41
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 29.07.2005
Beiträge: 1.073
xm22 befindet sich auf einem aufstrebenden Ast
Standard

Ich schätze mal, das ist so gemeint (Nur als Ansatz gedacht):

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de" xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>simple document</title>
<style type="text/css">
	span.a a {
		background: red;
	}
</style>
<script type="text/javascript">
	function init() {
		document.getElementById('container').onmousemove = function(e) {
			document.getElementById('divX').style.width = e.clientX + 'px';
			document.getElementById('divY').style.height = e.clientY + 'px';
		}
	};
</script>
</head>
<body onload="init()">
<div id="container" style="position: relative; height: 300px; width: 300px; background: #CCCCCC;">
	<div id="divX" style="position: absolute; top: 0px; left: 0px; border-right: 1px solid #000000; height: 100%;"></div>
	<div id="divY" style="position: absolute; top: 0px; left: 0px; border-bottom: 1px solid #000000; width: 100%;"></div>
</div>
</body>
</html>
__________________
... Meine Meinung
Mit Zitat antworten
  #4 (permalink)  
Alt 31.08.2009, 19:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.09.2008
Beiträge: 29
Skullsplitter befindet sich auf einem aufstrebenden Ast
Standard

Sorry, hatte viel zu tun!

Jap, genau so wars gemeint

vielen dank!
Mit Zitat antworten
  #5 (permalink)  
Alt 31.08.2009, 20:27
Benutzerbild von Pr0g
(^.^)
XHTMLforum-Mitglied
 
Registriert seit: 23.08.2005
Ort: Düsseldorf
Beiträge: 535
Pr0g wird schon bald berühmt werden
Standard

Ich würde vor
Code:
document.getElementById('divX').style.width = e.clientX + 'px';
noch
Code:
if (!e) { e = window.event; }
einfügen, dann klappts auch (in Verbindung mit px Angaben anstelle von %) mit dem IE6.
__________________
Mit Zitat antworten
  #6 (permalink)  
Alt 03.09.2009, 16:20
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 29.07.2005
Beiträge: 1.073
xm22 befindet sich auf einem aufstrebenden Ast
Standard

Das stimmt - War ja auch nur ein Ansatz ohne irgendwelche Absicherung


EDIT: Mir fällt auch gerade auf, dass die Lösung über die Veränderung der Größe nicht optimal ist, weil dann evtl. andere Elemente überlagert werden. Besser wäre wohl, wenn die Divs nur eine "Dicke" von 1px haben und das Kreuz über die Links-/Rechts-Position gesteuert wird.
__________________
... Meine Meinung

Geändert von xm22 (03.09.2009 um 16:23 Uhr)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Bild durch Bild ersetzten! (a:hover) Prof. Awesome CSS 11 16.03.2011 15:33
Bild als Active makieren siriussmarty CSS 0 08.07.2010 15:37
Bild über Bild rafa CSS 2 24.01.2010 19:46
Bild über Bild legen mit position: relative (IE6 Problem) naitsab CSS 3 09.06.2009 14:20
Verflixter Rahmen um ein Bild Webelix CSS 6 22.07.2007 13:32


Alle Zeitangaben in WEZ +2. Es ist jetzt 04:35 Uhr.