Wie kann ich ein <img> Element programmgesteuert mit JavaScript auswählen?

Ich habe ein in einem HTML-Dokument, das ich hervorheben möchte, als ob der Benutzer es mit der Maus markiert hätte. Gibt es eine Möglichkeit, das mit JavaScript zu tun?Wie kann ich ein <img> Element programmgesteuert mit JavaScript auswählen?

Ich brauche es nur in Mozilla zu arbeiten, aber alle Informationen sind willkommen.

EDIT: Der Grund, warum ich das Bild auswählen möchte, ist eigentlich nicht so, dass es hervorgehoben erscheint, sondern damit ich das ausgewählte Bild dann mit XPCOM in die Zwischenablage kopieren kann. Also muss der IMG ausgewählt werden, damit dies funktioniert.

Quelle

2008-09-24 Joel Anair

Hier ist ein Beispiel, welches das erste Bild auf der Seite auswählt (das ist das Stack-Überlauf-Logo sein wird, wenn Sie es auf dieser Seite in Firebug testen):

var s = window.getSelection() 
var r = document.createRange(); 
r.selectNode(document.images[0]); 
s.addRange(r)

Relevante Dokumentation:

Quelle

2008-09-24 01:42:34

Perfekt. Genau das suche ich. –

Was 's.addRange (r)' tun? Ich habe hier gekämpft: http://stackoverflow.com/questions/42298386/select-html-from-iframe-using-javascript-jquery –

-1

Sie können die Quelle des Bildes austauschen, wie in img.src = "otherimage.png";

Ich tat dies tatsächlich an einem Punkt, und es gibt Dinge, die Sie tun können, um die Bilder vorzuladen.

Ich habe sogar spezielle Attribute auf den Bildelementen wie swap-image = "otherimage.png" eingestellt, dann nach allen Elementen gesucht, die es hatten, und Handler eingerichtet, um die Bilder automatisch zu tauschen ... du kannst ein paar lustige Sachen.

Sorry ich missverstanden die Frage! Aber für diejenigen von euch, die daran interessiert sind, das zu tun, wovon ich spreche, hier ist ein Beispiel dessen, was ich meine (grobe Implementierung, ich würde vorschlagen, Frameworks wie jQuery zu verwenden, um es zu verbessern, aber nur etwas, um dich in Gang zu bringen):

<html> 
<body> 
<script language="javascript"> 
function swap(name) { 
    document.getElementById("image").src = name; 
} 
</script> 
<img id="image" src="test1.png" 
    onmouseover="javascript:swap('test0.png');" 
    onmouseout="javascript:swap('test1.png');"> 
</body> 
</html>

Quelle

2008-09-24 01:21:42

Danke, Mike. Ich hätte genauer sagen sollen, wonach ich suchen würde. Das Bild kann nicht nur hervorgehoben erscheinen. Es muss eigentlich hervorgehoben werden. –

Nein, nicht deine Schuld, ich habe ein paar Worte falsch gelesen ... Entschuldigung! –

-2

Geben Sie dem Img-Tag eine ID. Verwenden Sie document.getElementById ('ID').

<script type="text/javascript" language="javascript"> 
function highLight() 
{ 
    var img = document.getElementById('myImage'); 
    img.style.border = "inset 2px black"; 
} 
</script> 
<img src="whatever.gif" id="myImage" onclick="hightLight()" />

EDIT :: Sie könnten .focus versuchen es zu aktivieren.

Quelle

2008-09-24 01:30:42

-1

Die Grundidee der "highLight" -Lösung ist in Ordnung, aber Sie möchten wahrscheinlich einen "statischen" Rahmenstil (definiert in CSS) für das IMG mit den gleichen Abmessungen wie in der highLight-Methode festgelegt es verursacht keine Größenänderung.

Darüber hinaus glaube ich, dass, wenn Sie den Anruf ändern „highlight (this)“ und die Funktion def „highlight (obj)“, dann können Sie die „document.getElementById()“ Anruf überspringen (und die Angabe des Attributs "id" für "img", solange Sie "obj.style.border" verwenden.

Sie müssen wahrscheinlich auch "highLight" richtig buchstabieren.

Quelle

2008-09-24 01:39:12

Was genau versuchen Sie zu tun? Wenn Sie XPCOM verwenden, schreiben Sie vermutlich eine Anwendung oder eine Erweiterung für eine; Können Sie die Bilddaten nicht einfach direkt in die Zwischenablage kopieren?

Quelle

2008-09-24 01:42:51 Eevee

Ich versuche, ein Bild in die Zwischenablage zu kopieren, aber es ist überraschend schwer zu tun XUL/JS/XPCOM. Bitte lesen Sie http://stackoverflow.com/questions/68103/how-do-i-copy-image-data-to-the-clipboard-in-my-xul-application, wenn Sie wissen wie! –

Meine persönliche Wahl Elemente für die Auswahl ist jquery:

Dann wird das Element Ihrer Wahl zu erhalten ist.

$ ("img # YOURIMAGEHERE") konzentrieren();

Quelle

2008-09-24 01:46:28 KevDog

Sie möchten vielleicht auch s.removeAllRanges() vor s.addRange (r) aufrufen.

Quelle

2009-10-09 19:41:10 Neil

Wie kann ich ein <img> Element programmgesteuert mit JavaScript auswählen?

Antwort

Verwandte Themen