Bild wechseln mit reinem Javascript

so versuche ich einen mouseover mit nur Javascript, so dass das Bild nicht wirklich für seo ich in html zuerst einrichten, um die CSS richtig und bin damit alles mit erscheinen erscheinen document.write, so dass es mit Javascript generiert werden kann (mein Wissen ist begrenzt). so mit HTML Ich mache Dinge mitBild wechseln mit reinem Javascript

<img src="img/brokenarrowwear-googleplus.png" onmouseover="this.src='img/brokenarrowwear-google-circle.png';" onmouseout="this.src='img/brokenarrowwear-googleplus.png';"/>

aber da es verwendet „“ und ‚‘ sie nicht wirklich funktionieren. Ich versuchte es als

document.write(' <img src="img/brokenarrowwear-googleplus.png" onmouseover="this.src=' + 'img/brokenarrowwear-google-circle.png' + ';" onmouseout="this.src=' + 'img/brokenarrowwear-googleplus.png' + ';"/> ')

, aber das hat auch nicht wirklich funktioniert. weiß jemand wie ich pures javascript machen kann? Ich fand

$("img.image-1").mouseenter(function() { 
    $(this).replaceWith($('<img src="~/Content/images/prosecutor_tile_b.jpg">')); 
});

aber ich denke nicht, dass es funktioniert.

Quelle

2016-05-11 Felicyia

Was meinst du damit, dass das Bild nicht wirklich für SEO angezeigt wird? –

Warum funktioniert die erste Methode (inline 'onmouseover') nicht? (funktioniert gut: https://jsfiddle.net/tfmzzea7/) – Adam

Verwenden Sie \ 'anstelle von' + ' –

Einfache Inline reine Javascript-Lösung:

<script> 
      document.write("<img src=\"http://placehold.it/150x150?text=image1\" onmouseover=\"this.src='http://placehold.it/150x150?text=image2'\" onmouseout=\"this.src='http://placehold.it/150x150?text=image1'\" />");  
</script>

Der Text "image1" und mit der Maus darüber sagt, wird der Text in dem Bild sagen "Bild2"

Quelle

2016-05-11 18:54:51 jasonlam604

aber das hat immer noch "" und "" so dass es nicht funktioniert muss es zwischen document.write ('') passen – Felicyia

@Felicyia - entkommen Sie einfach die '' 'mit' \ ''. Auf eine verwandte Anmerkung - was in der Welt machst du mit' document.write' für irgendetwas? – Adam

weil das ist die einzige Art und Weise wusste ich, wie man "schreiben" Der Inhalt, den ich auf der Seite sehen musste. – Felicyia

Vielleicht kann dies helfen:

<img id="mypic" src="img/brokenarrowwear-googleplus.png" onmouseover='pictureChange(true)' onmouseout='pictureChange(false)'>

Die Funktion pictureChange:

function pictureChange(change){ 
    If(change==true){ 
     document.getElementById("mypic").src="img/brokenarrowwear-googleplus.png"; 
    }else{ 
    document.getElementById("mypic").src="img/brokenarrowwear-google-circle.png"; 
    } 
}

Quelle

2016-05-11 19:01:54 Eierschale

Das Problem ist nicht das Skript. Ich sehe es in der Skriptquelle, aber ich sehe es nicht im gerenderten HTML, tatsächlich fehlt das ganze img-Tag. Bedeutung Sie haben eine Art von Renderproblem oder ein anderes Skript hat es entfernt.

Mal sehen, ob es mit dem Inline-Javascript zu tun hat und mit Backslashes zu entkommen funktioniert nicht: Entfernen Sie die Attribute onmouseover und onmouseout von google img, geben Sie eine ID = "googlelogo" und fügen Sie das folgende Skript am Ende hinzu Dein Körper:

<script> 
document.getElementById("googlelogo").onmouseover = function() { 
    this.src = "img/brokenarrowwear-google-circle.png"; 
    } 
document.getElementById("googlelogo") .onmouseout = function() { 
    this.src = "img/brokenarrowwear-googleplus.png"; 
    } 
</script>

Quelle

2016-05-11 20:30:18 yezzz

Bild wechseln mit reinem Javascript

Antwort

Verwandte Themen