Accessing different objects within .innerHTML Issue

StackOverflow https://stackoverflow.com/questions/21649255

Question

I am currently trying to change an object by accessing it from another object by using the .innerHTML command, here's a code that I am trying to use:

<!DOCTYPE html>
<div>
    <img id="ALogo" src="images/picture1" onMouseOver="logoChange1" onMouseOut="logoChange2"/>
</div>

</html>
<script>
var logo = document.getElementById("ALogo");

function logoChange1() {
logo.innerHTML = "src='images/picture1' 
};

 function logoChange2() {
logo.innerHTML = "src='images/picture2' 
};
</script>

Unfortunately, the actual image will not change, is there another way to do it? Or am I doing something wrong?

Was it helpful?

Solution

why don't you do:

function logoChange1() {
    logo.setAttribute("src", "images/picture1");
};

function logoChange2() {
    logo.setAttribute("src", "images/picture2");
};

or just change the src property:

function logoChange1() {
    logo.src = "images/picture1";
};

function logoChange2() {
    logo.src = "images/picture2";
};

OTHER TIPS

Try this.

<script>

function logoChange1() {
document.getElementById("myimage").setAttribute("src","images/picture1");
};

function logoChange2() {
document.getElementById("myimage").setAttribute("src","images/picture1");
};

</script>

My Source:http://www.javascriptkit.com/dhtmltutors/domattribute.shtml

Change the images 'src':

<img id="ALogo" src="http://www.placehold.it/200" onmouseover="logoChange1()" onmouseout="logoChange2()"/>

<script>
    var logo = document.getElementById("ALogo");
    logoChange1 = function(){
       logo.src = 'http://www.placehold.it/200&text=1';
    }
    logoChange2 = function(){
      logo.src = 'http://www.placehold.it/200&text=2';
    }
</script>

EG: http://jsbin.com/gewoz/1/edit?html,output

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top