inhalt eines img elements

basti1012 · 7. Oktober 2017

wenn ich über ein image element gehe kommt nur einleeres alert.ich möchte aber dem inhalt sehen ...

hier der code..

window.document.onmousemove = function(e) {

if(!e) e = window.event;

var element1 = e.target;

var inhalt = element1.innerHTML;

alert(inhalt)

}

// ----------------------------------------------------

var inhalt=element1.textContent;

var inhalt=element1.outerHTML;

das geht auch nicht .textContent zeigt auch leer an und outerHTML zeigt alles mögliche an,aber ich möchte nur

den inhalt des image elemt haben ..

was mache ich falsch...

und wie kann ich mit if abfragen ob das elemment unter der maus ein img ist ..

weil

if(inhalt == img)

geht ja so nicht weil inhalt ja immer leer anzeigt

Das soll ein userscript werden,weiss nicht ob das wichtig ist

Sempervivum · 7. Oktober 2017

Ein img-Element ist inhaltsleer, es hat keinen Inhalt in deinem Sinne, auf den Du mit innerHTML oder textContent zugreifen könntest.

Außerdem ist es verfehlt, in einem onmousemove-Handler ein alert anzubringen, weil dieser den ganzen Browser blockiert und das onmousemove-Element wiederholt triggert.

basti1012 · 7. Oktober 2017

der alert ist nur zum test gewesen...

ichwill eigentlich bilder die auf einer seite vorhanden sind mit mausover vergrössern.....aber alles was ich er googelt habe bringt mich nicht weiter...überall steht drinne das man das in der html seite einbinden muss,aber da ich ein userscript bauen will geht das ja glaube nicht ...also wollte ich versuchen das unter der maus die daten auszulesen und danndamit arbeiten kann,also anzeigen und vergrössern... hat einer nee andere idee wie ich an die img daten ran komme wenn ich da mit der maus drauf bin

Sempervivum · 8. Oktober 2017

Zitat

da ich ein userscript bauen will

Was meinst Du damit? So ein Skript für Tampermonkey o. ä., das man auf eine fremde Seite anwenden kann?

Du musst berücksichtigen, dass, wenn ein Bild in Originalgröße eingebunden ist, dieses sich nur mit Qualitätsverlust vergrößern lässt.

Jav · 8. Oktober 2017

Das Einfachste ist wohl eines der Beispiele nachzubauen, die du findest, vermutlich wird da mit 2 Bildern gearbeitet: das kleine, das angezeigt wird, und das grosse dann ausschnittweise in einem anderen DIV.

Wie man ansonsten die Binärdaten mit JS in ein Bild verwandelt habe ich auch noch nicht gemacht (falls das überhaupt geht); wäre interessant, aber im Moment für mich nicht machbar.

Was meinst du mit "ein userscript bauen" ? Eigentlich wird doch JS immer in HTML eingebunden und nicht standalone verwendet.

basti1012 · 8. Oktober 2017

ja Tampermonkey bei opera oder gfeasemonkey beim ff...userscript ist meines wissens fast das gleiche wie javascripte,zumindest lassen sich viele sachen die man mit javascripte machen kann auch im userscript anwenden...bei javascript habe ich ja schon reichlich gefunden wie man bilder gross kriegt und wie man die originalgrösse auslesen kann und so weiter..aber das im userscript zu übernehmen kriege ich noch nicht hin ...es wird auch sehr viel geschrieben ds man die bilder eine id geben soll,aber wie gibt man ein bild eine id ,von einen bild was schon da ist ?? das sind noch meine probleme die ich nooch erfragen muss bzw goggeln,,aber noch nix gefunden.... bin geradedabei für ein browser spiel ein eigenes kontexmenü zu bauen und will dann mit rechts klick die bilder vergrössern.......paste und copysoll da auch noch rein aber das was ich finde funktioniert alles injava aber wohl irgendwie nicht mit userscripte

Sempervivum · 8. Oktober 2017

Du brauchst nicht auf die Bilddaten selber zuzugreifen, sondern musst nur die entspr. Attribute manipulieren. Statt deines Ansatzes mit mousemove empfehle ich, mouseover und mouseout zu verwenden, dann kannst Du auf eine Neuigkeitsauswertung verzichten.

Dieses funktioniert bei mir im Tampermonkey:

Code

        window.addEventListener("load", function () {
            var imgs = document.querySelectorAll("img");
            for (var i = 0; i < imgs.length; i++) {
                var im = imgs[i];
                var cstyle = getComputedStyle(im, null);
                var width = parseInt(cstyle.getPropertyValue("width"));
                var height = parseInt(cstyle.getPropertyValue("height"));
                im.setAttribute("data-owidth", width);
                im.setAttribute("data-oheight", height);
                im.addEventListener("mouseover", function () {
                    this.width = this.getAttribute("data-owidth") * 1.2;
                    this.height = this.getAttribute("data-oheight") * 1.2;
                });
                im.addEventListener("mouseout", function () {
                    this.width = this.getAttribute("data-owidth");
                    this.height = this.getAttribute("data-oheight");
                });
            }
        });

Alles anzeigen

Sempervivum · 8. Oktober 2017

PS: Man kann das Ganze stark vereinfachen, wenn man CSS und transform:scale() verwendet. Das hat zusätzlich den Vorteil, dass sich das Layout beim Vergrößern nicht verschiebt.

Code

var imgs = document.querySelectorAll("img");
            for (var i = 0; i < imgs.length; i++) {
                var im = imgs[i];
                im.addEventListener("mouseover", function () {
                    this.style.transform = "scale(1.2)";
                });
                im.addEventListener("mouseout", function () {
                    this.style.transform = "scale(1.0)";
                });
            }
        });

Alles anzeigen

basti1012 · 8. Oktober 2017

dein code funktioniert das ist schon mal gut ..habe das mal mit css gemacht ...

addGlobalStyle('img:hover { background: yellow;transform:scale(1.5);border:1px solid red; }');

so geht es auch gute idee vondir ...

kann man bei userscripte eigentlich die css auch so nehmen wie man die im netz findet,dann kann man einfach kopieren anstatt immer das addGlobalStyle zu nehmen ,das währe einfacher aber leider kenne ich da kein anderen weg ..

noch nee frage wegen bilder...ich habe auch ein paar bilder die als background images gespeichert sind,also in url(bild). wie kann ich das bild den vergrössern, weil in meinen fall ist das element ein div ...ein css mit div erstellen währe etwas doof weil auf der seite noch mehr div ist was da nicht mit spielen soll

Sempervivum · 8. Oktober 2017

Zitat

addGlobalStyle('img:hover { background: yellow;transform:scale(1.5);border:1px solid red; }');

Geniale Idee, so ist es noch viel einfacher!

Zitat

ich habe auch ein paar bilder die als background images gespeichert sind,also in url(bild). wie kann ich das bild den vergrössern, weil in meinen fall ist das element ein div ...ein css mit div erstellen währe etwas doof weil auf der seite noch mehr div ist was da nicht mit spielen soll.

Du kannst einen CSS-Selektor auf Grund von Attributen verfeinern:

https://www.mediaevent.de/css/…tor-attributselektor.html

Also in deinem Fall:

Code

div[background-image] {transform: scale(1.5)}
div[background*='url('] {transform: scale(1.5)}

Nebeneffekt: Auch der Inhalt des div wird vergrößert. Will man das vermeiden, müsste man intensiver nachdenken.

Sempervivum · 8. Oktober 2017

PS: Test ergibt, dass es so nicht funktioniert, weil man auf diese Weise offenbar nur Attribute auswerten kann und keine CSS-Eigenschaften. Dies funktioniert jedoch:

CSS

Code

        *[class*='magnify']:hover {
            transform: scale(1.2);
        }

JS

Code

            var elems = document.querySelectorAll("*");
            for (var i = 0; i < elems.length; i++) {
                var ele = elems[i];
                if (Object.values(ele.style).indexOf('background-image') > -1) ele.classList.add('magnify');
            }

Mal sehen, vielleicht findest Du dafür ja auch noch eine einfachere Lösung

Sempervivum · 8. Oktober 2017

Noch zu dieser Frage:

Zitat

kann man bei userscripte eigentlich die css auch so nehmen wie man die im netz findet

Eine alternative Möglichkeit könnte dieses sein:

Code

    var stl = document.createElement("style");
    stl.innerHTML = "body {color: red;}";
    document.body.appendChild(stl);

Ist das CSS umfangreicher, müsstest Du es auf eine Zeile komprimieren. Das wäre aber genau so gut bei dem Verfahren mit addGlobalStyle() möglich.

basti1012 · 8. Oktober 2017

danke dir schon mal bin noch am tüffteln ...habe noch neefrage zu

addGlobalStyle('img:hover { background: yellow;transform:scale(1.5);transition: all 2s;border:1px solid red; }');

was muss ich da ändern ,das bei mouseout der effekt auch funktioniert,also das das bild langsam kleiner wird,und nicht abruck...habe es mit after probiert aber das geht nicht,und wenn ich das hover weglasse geht auch nicht

basti1012 · 8. Oktober 2017

nee andere lösung habe ich nicht gefunden aber deine lösung finde ich gut und funktioniert.... danke dir ...

jetzt habe ich noch ein problem wo ich nicht weiter kommeund nicht verstehe...

es geht um dieses script

https://werner-zenk.de/javascr…ischenablage_kopieren.php

ich möchte da kopie paste mit dcript raus machen über kopierten text... wie ich makierten text auslese das habe ich schon gefunden und klappt auch ...

jetzt bekomme ich das nicht hin das der makierte text in der ablage kommt ,ich habe es so probiert ,,

Code

var text = " makierter text der in ablage soll";

button.addEventListener("click", function (event) { 
 event.preventDefault(); 
 text.select(); 
 document.execCommand("copy"); 
});

das sollte doch gehen weil inputwahr ja vorher der text aus den inputfeld,oder habe ich da irgendwie ein denkfehler drinne???

Sempervivum · 8. Oktober 2017

Zitat

addGlobalStyle('img:hover { background: yellow;transform:scale(1.5);transition: all 2s;border:1px solid red; }');

was muss ich da ändern ,das bei mouseout der effekt auch funktioniert

Du brauchst das transition nur dem img ohne hover zuzuweisen:

Code

addGlobalStyle('img:hover { background: yellow; transform:scale(1.5); border:1px solid red; }');
addGlobalStyle('img { transition: all 2s; }');

basti1012 · 8. Oktober 2017

komisch eben wo ich das ohne hover versucht habe hats nicht geklappt....jetzt habe ich dein code kopiert und es klappt...musste da wohl ein tipp fehler drinn gehabt habe oder so ..

naja dank dir hat aufjedenfall geklappt .....

hast du noch nee idee wegen mein copy in zwischenablage problem ( siehe vorheriegen beitrag von mir ) oder soll ich dafür neues thema aufmachen?

Sempervivum · 8. Oktober 2017

Zu dem copy-Problem:

Die Funktion select() lässt sich nur auf Eingabefelder anwenden, nicht jedoch auf Variablen:

https://wiki.selfhtml.org/wiki…ent/forms/elements/select

Da Du schreibst:

Zitat

das sollte doch gehen weil inputwahr ja vorher der text aus den inputfeld,oder habe ich da irgendwie ein denkfehler drinne???

hast Du den Text ja offenbar in einem input. Wenn Du darauf die Funktion select anwendest, sollte es funktionieren.

basti1012 · 8. Oktober 2017

bei den code

Code

var input = document.getElementById("input"); 
var button = document.getElementById("copy-button"); 

button.addEventListener("click", function (event) { 
 event.preventDefault(); 
 input.select(); 
 document.execCommand("copy"); 
});

funktioniert ja alles..aber ich will ein vorhandenentext aus dem script sagen wir mal

var bla = "hallo text"

in der zwischen ablage kopieren ..

mit

Code

input.select();

aus demtextfeld geht es ja aber wie kriege ich den text aus "bla" in der zwischenablage weil bla.select(); geht ja leider nicht ....

habe da schon mehrere sachen versucht ,aber nicht das erreicht was ich haben will

Sempervivum · 8. Oktober 2017

Dann führt wahrscheinlich kein Weg daran vorbei, den Text aus der Variablen in ein temporäres input-Feld einzutragen und von dort aus in die Zwischenablage zu kopieren:

Code

    <button id="toclipboard">Copy</button>
    <script>
        var txt = "Hallo Welt";
        toclipboard.addEventListener("click", function() {
            var inp = document.createElement("input");
            inp.value = txt;
            document.body.appendChild(inp);
            inp.select();
            document.execCommand("copy");
            inp.parentNode.removeChild(inp);
        });
    </script>

Alles anzeigen

Dies hat bei mir nur funktioniert, wenn ich das input mit appendChild() in das DOM eingefügt habe.

basti1012 · 8. Oktober 2017

dein code wie er da steht klappt so leider nicht ...und das mit appendchild verstehe ich wahrscheinlich nie ...habe das versucht und habe ein input feld erzeugt ....das input feld hat auch den text den ich da rein geschrieben habe nicht kopiert ...aber das feld soll ja nicht angezeigt werden weil sonst könnte ich ja das script nehmen was ich schon habe ....aber ich will makierten text in der zwischenablage habe ,aber das klappt irgendwie nicht , ich glaube mitlerweile das geht nicht mit userscripte ,weil habe noch nix gefunden was funktiniert auser das vorhandene,,aber das macht ja nicht das was ich brauche

inhalt eines img elements

Jetzt mitmachen!

Teilen