Jump to content

change an image


diiazopde

Recommended Posts

hi , i try to write a function that provide to change the image when i click on it:

<body>

<script>

function hide(){ if (document.getElementById("image").src == "arrowup.png"){ document.getElementById("image").src = "arrowdown.png"; } else { document.getElementById("image").src = "arrowup.png"; } }

</script>

<img id="image" onclick="hide()" src="arrowdown.png" width="30" height="30"/>

</body>

 

but it doesnt work , what is the problem, please????

Link to comment
Share on other sites

I think it's probably that the src attribute contains a full path to the image rather than just the string you gave it.

 

Perhaps try this:

if(document.getElementById("image").getAttribute("src") == "arrowup.png") {
Link to comment
Share on other sites

I can't see anything in that fragment of code that could cause it to go wrong. Have you checked for error messages in the Javascript console?

Link to comment
Share on other sites

i want the hide and show a block when you clik on an image, using Javascript code, so this is the complete code for this function but it doenst work

 

<script>

function hide(){ if(document.getElementById("arrow").src == "arrowup.png"){ document.getElementById("arrow").src = "arrowdown.png"; document.getElementById("box").style.display = "none"; } else { document.getElementById("arrow").src= "arrowup.png"; document.getElementById("box").style.display = "block"; } }

</script>

 

<img id="arrow" onclick="hide()" src="arrowdown.png" width="30" height="30"/>

<div id="box" style="display:none;">

</div>

 

please help me!!

Edited by diiazopde
Link to comment
Share on other sites

Like I said earlier, use getAttribute() for comparing the src.

 

This is working for me:

<script>function hide(){  if(document.getElementById("arrow").getAttribute("src") == "arrowup.png"){    document.getElementById("arrow").src = "arrowdown.png";    document.getElementById("box").style.display = "none";  } else {    document.getElementById("arrow").src= "arrowup.png";    document.getElementById("box").style.display = "block";  }}</script><img id="arrow" onclick="hide()" src="arrowdown.png" alt="Arrow"><div id="box" style="display:none;">Content</div>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...