Javascript change a picture when clicking - javascript

I wrote this function to change my pic what is the problem?
my aim is when clicking on a pic toggle between 2 images if image p is showing by clicking shows me image p1
I have this in script:
<script>
function changeimage()
{
if(this.getElementById('myimage').src=="../../images/p1.gif")
{
document.getElementById('myimage').src="../../images/p.gif";
}
else
{
document.getElementById('myimage').src="../../images/p1.gif";
}
}
</script>
in the html part I have these ones which are more than one picture but I set the whole of them with Id=myimage is it wrong to set the whole one same ID?:
<table width="100%">
<tr>
<td><img id='myimage' src="../../images/p1.gif" onclick="changeimage();setTable('table2');setTable('table2-2');check('table3');check('table3-3');check('table3-3-3');check('table4');check('table5');check('table6');check('table6-1');"></td>
<td style="font-weight: bold;font-size:13; font-family:arial,verdana;" width="25%">General Rule Options</td>
<td valign="bottom" width="100%">
I have many rows in my tables like this

The problem is the following line:
if(this.getElementById('myimage').src=="../../images/p1.gif")
In particular, it's the use of this. In your function this will refer to the window, and the window doesn't have a getElementById method. Use document like you have in the other cases:
if(document.getElementById('myimage').src=="../../images/p1.gif") {
//...
}
And it looks like it should work fine. Alternatively, you can pass in an a reference to the clicked element when you call the event handler, and reference that instead of using getElementById. For example:
onclick="changeimage(this);"

You call changeImage() from the <img> element, and then reference this inside the function. Since the function runs without context (it's not tacked onto an object), this would refer to the window object, which doesn't have getElementById.
In your HTML, change onclick="changeImage() to onclick="changeImage(this) and change your changeImage function to work with the argument passed instead:
function changeimage(img) {
if(img.src=="../../images/p1.gif")
img.src="../../images/p.gif";
else
img.src="../../images/p1.gif";
}

In the if statement it should be document.getElementById() not this.getElementById().
Though having said that, you can pass a reference to the clicked element in to your function:
<img onclick="changeImage(this);">
function changeImage(imgEl) {
if(imgEl.src=="../../images/p1.gif") {
imgEl.src="../../images/p.gif";
} else {
imgEl.src="../../images/p1.gif";
}
}
That way if all of your table rows are using the same two images they can all call the same function. Better than having the function hardcoded to a particular element's ID.

You need to call the function on click like this:
http://jsfiddle.net/4ca9m/
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<img id="special" src="http://nssdc.gsfc.nasa.gov/image/planetary/venus/gal_venus_37218.jpg" alt ="none">
<script>
$("img#special").click(function () {
if($(this).attr("src") == "http://nssdc.gsfc.nasa.gov/image/planetary/venus/gal_venus_37218.jpg")
{
$(this).attr("src", "http://gcaptain.com/wp-content/uploads/2011/04/image5.png");
}
else
{
$(this).attr("src", "http://nssdc.gsfc.nasa.gov/image/planetary/venus/gal_venus_37218.jpg");
}
});
</script>
</body>
</html>

It doesn't work because when you use a relative path like:
<img src="../../images/p1.gif" onclick="changeimage();" />
The browser may secretly turn it into an absolute path like:
<img src="http://example.com/somewhere/images/p1.gif" onclick="changeimage();" />
At least Internet Explorer 9 exposes this behavior. However, you shouldn't depend on this behavior.
There are at least two ways how you can solve this problem:
Use data- attributes. You add a custom attribute to your image tag:
<img src="../../images/p1.gif" data-image="p1" onclick="changeimage();" />
Then change your JavaScript function to this:
<script>
function changeimage()
{
if(this.getElementById('myimage').getAttribute("data-image") == "p1") {
document.getElementById('myimage').src="../../images/p.gif";
document.getElementById('myimage').setAttribute("data-image", "p");
} else {
document.getElementById('myimage').src="../../images/p1.gif";
document.getElementById('myimage').setAttribute("data-image", "p1");
}
}
</script>
Use a variable to accomplish the same thing as above.
<img src="../../images/p1.gif" onclick="changeimage();" />
And the JavaScript:
<script>
var image = "p1";
function changeimage()
{
if(image == "p1") {
document.getElementById('myimage').src="../../images/p.gif";
image = "p";
} else {
document.getElementById('myimage').src="../../images/p1.gif";
image = "p1";
}
}
</script>
I prefer the first method because it allows me to include all information about the image in the image itself and not in a variable declared several lines away.

Related

New IMG title disappears when changing via javascript

I have an image that changes its src onclick. This functionality works fine, but I need to change the img title attribute as well. My code changes the title but only keeps the change while hovering my mouse over the img.
When I onmouseout of the img, FF Developer shows the title reverting to empty, ultimately not saving the new img title. Thought it was a browser issue but other browsers do the same.
Ideas?
<script type="text/javascript">
function my_func() {
if (document.getElementById("changeable").src == "mysrc") {
document.getElementById("changeable").src = "newsrc";
document.getElementById("changeable").setAttribute("title","Now showing newimg");
}
else {
document.getElementById("changeable").src = "newimg";
document.getElementById("changeable").setAttribute("title","Now showing defaultimg");
}
}
</script>
<img id="changeable" onclick="my_func();" src="mysrc" title="Click to toggle" />
You checked condition wrong,
Here,
document.getElementById("changeable").src result should be "file:///home/system/Desktop/mysrc"
use like,
<html><script type="text/javascript">
function my_func() {
if (document.getElementById("changeable").getAttribute('src') == "mysrc") {
document.getElementById("changeable").setAttribute('src',"newsrc");
document.getElementById("changeable").setAttribute("title","Now showing newimg");
}
else {
document.getElementById("changeable").src = "newimg";
document.getElementById("changeable").setAttribute("title","Now showing defaultimg");
}
}
</script>
<img id="changeable" onclick="my_func();" src="mysrc" title="Click to toggle" />
</html>

document.getElementById('rockImg').src == "rock.png" doesn't seem to get executed in if() block

I've just started studying javascript. What I wanna do with the following code is to switch two images as I click the image with id rockImg.
I successfully changed one to another with a single statement of document.getElementById('rockImg').src = "rock_happy.png"; but couldn't swap the two images by clicking the image.
AFAIK, the if-else statement syntax does not have anything wrong; to make sure, I referred this website: https://msdn.microsoft.com/en-us/library/85yyde5c(v=vs.94).aspx.
Is the problem on the comparison statement? Because it works properly when run with ocument.getElementById('rockImg').src = "rock_happy.png" only, this is the only case I can think out.
<html>
<head>
<title>iRock - The Virtual Pet Rock</title>
<script>
function change(){
// alert('yay! it changed!')
if(document.getElementById('rockImg').src == 'rock.png'){
document.getElementById('rockImg').src = "rock_happy.png";
}
else{
document.getElementById('rockImg').src = "rock.png";
}
}
</script>
</head>
<body>
<div style="margin-top:100px; text-align:center;">
<img id="rockImg" src="rock.png" alt="iRock" onclick="change()"/>
</div>
</body>
The src property always returns the entire image URL, not the relative path so the if condition would fail always.
Use setAttribute and getAttribute instead to get exact attribute value
function change(){
var img = document.getElementById('rockImg');
if(img.getAttribute('src') == 'rock.png'){
img.setAttribute('src', "rock_happy.png");
}
else{
img.setAttribute('src', "rock.png");
}
}
You can reduce the number of lines of code by using ternary operator instead of if...else statement.
function change(){
var img = document.getElementById('rockImg');
img.setAttribute('src',img.getAttribute('src') == 'rock.png' ? "rock_happy.png" : "rock.png");
}

Enable Javascript function on image click

I had an image which appears on the click of another image.
I'm posting the code below. Please tell me where I went wrong. Thanks !
JavaScript
function suit1() {
var element = document.getElementById("suit1");
element.setAttribute("Hidden", "False");
}
HTML
<img src="suit1.png" style="width:100%; height:595px;" hidden="true" id="suit1"/>
<img src="point.png" onclick="javascript:suit1()">
Try this:
function suit1() {
var element = document.getElementById("suit1");
element.removeAttribute("hidden");
}
As stated in the comments, the number in suit1() was causing the issue. However, changing the function name to any name other than the id for first img resolves the problem. HTML:
<img src="suit1.png" style="width:100%; height:595px;" hidden="true" id="suit1"/>
<img src="point.png" onclick="javascript:some1()">
JavaScript:
function some1() {
var element = document.getElementById("suit1");
element.removeAttribute("hidden");
}
Or change the id of the img.

How to change an img src with javascript?

I know there are other questions like this and I've tried following them I'm just not aware of what exactly I'm doing wrong. I've declared the pic variable as being linked to the image with the corresponding id of 'pic' and I've tried many different examples and trying to follow other questions like this but to no avail.
--- THE REAL QUESTION ----
I would like the image to change its src to another one that I have in my workspace with the click of a button.
HTML:
<img class="trans" id="pic" src="images/link_rouge.png" alt="" width="1000" height="333" />
JavaScript:
var pic = document.getElementById('pic');
function rouge() {
pic.src = "images/link_rouge.png";
}
function blue() {
pic.src = "images/link_blue.png";
}
I know the functions already work with the buttons because they are affecting some divs on the page that change color the only things not changing are the images.
The EventTarget.addEventListener() method registers the specified listener on the EventTarget it's called on.
Use addEventListener over button elements to attach click events and bind your handler functions to those events.
var pic = document.getElementById('pic');
function rouge() {
pic.src = "http://www.projectvictorycosplay.com/images/zelda/Links/3198_render_link.png";
}
function blue() {
pic.src = "http://bin.smwcentral.net/u/1944/Link%2BBlue%2BTP%2Bshrunk.png";
}
document.getElementById('btn1').addEventListener('click', rouge);
document.getElementById('btn2').addEventListener('click', blue);
img {
width: 200px;
}
<button id='btn1'>rouge</button>
<button id='btn2'>blue</button>
<br/>
<img class="trans" id="pic" src="http://www.projectvictorycosplay.com/images/zelda/Links/3198_render_link.png" alt="" width="1000" height="333" />
There's a chance your page has not loaded before pic is set equal to document.getElementById('pic');.
You can use something like jQuery's $(document).ready() function (or document.addEventListener("DOMContentLoaded", handler);) to ensure your page is fully loaded before assigning the pic variable.
$( document ).ready(function() {
var pic = document.getElementById('pic');
function rouge() {
pic.src = "images/link_rouge.png";
}
function blue() {
pic.src = "images/link_blue.png";
}
});
Note: You will need to pull the JQuery library into your project to use this method. See here.
Also, you can read this post to learn a little more about HTML/JavaScript and page loading.

Image Rollovers with Javascript

I'm doing this for my assignment which is due next week.
Our instructor wanted us to create image rollovers. I already created one but it won't work.
Here's my code:
<script>
function turnSwitchOn(img) {
buttonImg="lab11-1switchon.jpg"
document.getElementById(lightswitch).src=buttonImg
}
function turnSwitchOff(img) {
buttonImg="lab11-1switchoff.jpg"
document.getElementById(lightswitch).src=buttonImg
}
</script>
and here's the img:
<img src="lab11-1switchoff.jpg" alt="light switch" id="lightswitch" onMouseOver="turnSwitchOn()" onMouseOut="turnSwitchOff()" />
The picture on my Website won't change to the one I put in the Javascript code, why is that?
Your Id's need to be in quotes
function turnSwitchOn(img) {
buttonImg="lab11-1switchon.jpg"
document.getElementById("lightswitch").src=buttonImg
}
function turnSwitchOff(img) {
buttonImg="lab11-1switchoff.jpg"
document.getElementById("lightswitch").src=buttonImg
}
Besides the fix for making sure to call getElementById with a string ("lightswitch"), you could get a little nicer and not even have to lookup the image by id at all if you pass this into the function:
<script>
function turnSwitchOn(img) {
img.src="lab11-1switchon.jpg"
}
function turnSwitchOff(img) {
img.src="lab11-1switchoff.jpg"
}
</script>
<img src="lab11-1switchoff.jpg" alt="light switch" id="lightswitch" onMouseOver="turnSwitchOn(this)" onMouseOut="turnSwitchOff(this)" />

Categories