document.getSelection() prüfen, ob ein Bild selektiert ist im IE

B

BlubBlub

Mitglied
Hi,
hat jemand ne Idee wie ich rausfinden kann, ob der User im IE ein Bild auf einer Webseite selektiert hat?
Auf Selfhtml wird die Methode getSelection() beschrieben http://de.selfhtml.org/javascript/objekte/document.htm#get_selection . Doch diese gibt mir entweder den selektierten Text zurück oder einen leeren String falls nichts oder ein Bild selektiert wurde. Aber für mein Programm ist es wichtig unterscheiden zu können, ob der User nun nur ein Bild oder nichts selektiert hat.

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html><head><title>Test</title>
<script type="text/javascript">
function selektierterText () 
{
	if (document.selection) 
	{
		alert(document.selection.createRange().text);
	}
}
</script>
</head><body>
viel Text zum Selektieren viel Text zum Selektieren
<p><img src="../pic1.jpg" title="title1" alt="bild1" /></p>
<p><img src="../pic2.jpg" /></p>
<form>
<input type="button" value="zeigen" onmousedown="selektierterText();">
</form>
</body></html>
 
Zuletzt bearbeitet:
Also eigentlich ist getSelection nur für Text zu gebrauchen. Mit einem kleinen Trick kann man aber auch dein Problem lösen.


HTML: 
<script type="text/javascript">
function selektierterText () {
if (window.getSelection)  {
	alert(window.getSelection());
} else if (document.getSelection) {
	alert(document.getSelection());
} else if (document.selection) {
    alert(document.selection.createRange().text);
}
}
</script>

<p style="font-family:Verdana; font-size:0%; color: transparent;">1<img src="bild1.jpg" alt="Bild 1"></p>

<p style="font-family:Verdana; font-size:0%; color: transparent;">2<img src="bild2.jpg" alt="Bild 2"></p>

<input type="button" value="zeigen" onmousedown="selektierterText();">

Zu jedem Bild wird ein unsichtbarer Text platziert welcher dann ausgewertet wird.

Zwei Haken gibt es bei der Sache aber:
- beim Markieren muss man immer ein bisschen übers Bild hinaus gehen um den Text noch zu erwischen
- man sollte wie im Beispiel nur kurze Texte zur Markierung verwenden, da sich sonst das Bild verschiebt.
 
Danke für die Antwort, leider ist diese Lösung für mein Programm nicht gut geeignet. Mein eigentliches Programm umfasst mittlerweile ca 1000 Zeile Code weshalb ich diesen hier nicht posten kann. Jedenfalls wird mein Programm in eine x beliebige fremde Seite integriert und da dieser Trick eigentlich nur gut geeignet wäre, wenn man die Webseite selbst erstellt hat brauch ich eine andere Lösung. Die Sache ist halt die, dass je nachdem, ob der User auf der x beliebigen Seite etwas markiert hat oder nicht wird entweder ein jQuery Dialog oder ein anderer jQuery Dialog geöffnet.
 
Bin mir jetzt nicht ganz sicher ob das hier so funktioniert wie du dir das vorstellst:


HTML: 
<script type="text/javascript">
var maus;

function test (bild) {
if (maus == 1) {
	alert(bild);
	maus = 0;
}
}

</script>

<body onmousedown="javascript:maus=1;" onmouseup="javascript:maus=0;">
<img src="bild1.jpg" alt="Bild 1" onmouseover="test('bild1.jpg');">
<img src="bild2.jpg" alt="Bild 2"  onmouseover="test('bild2.jpg');">
</body>
 
Nene das geht auch nicht, da du ja in das image Tag ein onmouseover gesetzt hast. Ich aber hab die Seite in die ich meinen Code integriere nicht geschrieben. Es ist eine fremde Seite.

Du musst dir das so vorstellen, du gehst zum Beispiel auf die Seite google.de dann betätigst du aus deiner Schnellsuchleiste ein Bookmarklet. Dieses Bookmarklet sorgt dafür, dass in die google Seite mein JavaScript Code geladen wird.
Mein Code schaut nun, ob ein Bereich auf der Google Seite markiert ist. Ist ein Bild beispielsweise markeirt öffnet mein JavaScript ein jQuery Dialog A falls nichts markiert ist wird ein jQuery Dialog B geöffnet.
 
Jetzt verstehe ich wie das läuft.
Aber da mache ich dir keine großen Hoffnungen, das wird so wohl nicht zu lösen sein.

Kannst du etwas mehr erzählen was da genau gemacht werden soll. Angenommen ich bin auf Seite X und markiere ein Bild, was mache ich dann nachdem ich es markiert habe? Kann man hier nicht einsteigen?
 
Mein Programm funktioniert für den Firefox, den Chrome und Opera, da ich nämlich über das Selection Objekt an ein DocumentFragment rankomme.

Was aber jetzt hauptsächlich dafür sorgt, dass ich in FireFox/Chrome/Opera sehen kann, ob nichts oder beispielsweise ein Bild markiert wurde ist das Attribut rangeCount des Selection Objekts welches größer 0 ist falls etwas markiert wurde.

Das Selection Objekt des IE hält sich aber nicht an die W3C Implementierung, dort bekommt man auch kein DocumentFragment über das Selection Objekt sondern nur einen Text, also ziemlich spärlich, weshalb ich mir ein PlugIn für den IE runtergeladen habe um
an DocumentFragment ranzukommen, auch wenn dies auch nicht ganz der Implementierung des W3C enstpricht. http://code.google.com/p/ierange/

Leider bestitz dieses Plugin keine Implementierung wo das Attribut rangeCount vorkommt.
Nun ist die weiter Ausführung meines Programms, davon aber abhängig, ob etwas selektiert wurde oder nicht.

HTML: 
				if (jQuery.browser.msie)
				{	
					if((''+mySelection) != '')  //wenn nur bilder im ie selektiert wurden ist loopCounter = 0 , lösung suchen
						loopCounter = 1;
					else loopCounter = 0;
				}
				else loopCounter = mySelection.rangeCount;

Zu deiner Frage im letzten Satz. Was passiert nachdem du etwas markiert hast. Da passiert eine ganze Menge.
Es wird der HTML Code des markierten Bereichs herausgelesen und in einem String gespeichert. Zudem werden alle CSS Daten des markierten Bereichs gespeichert und zwar nicht nur die inline, sondern auch die im style Tag stehen oder auch dazu gelinkt wurden und zwar nur genau die welche für den markierten Bereich relevant sind, zudem werden noch die links der markierten Bilder in einem String gespeichert. Das Programm ist mittlerweile recht komplex geworden, weshalb es schwer ist es in wenigen Sätzen zu beschreiben. Aus diesem Grunde hab ich das Problem in einem kleinen Programm oben vereinfacht dargestellt, da es dort auch treffend zu dargestellt wird und wenn es in diesem Miniprogramm oben funktioniert, dann hab ich auch ne Lösung für mein Programm.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück