JavaScript - img name onclick event - javascript

How do I have JavaScript telling me the current image name with an ONCLICK event... and I need to do this with alert() for some reasons.
function imgName() {
window.alert()
}
HTML
<figure>
<img src="aster.jpg" alt="aster" onclick="window.alert()">
<figcaption><span>I am aster</span></figcaption>
</figure>
Thanks

Giving an id to image for query from js code.
and just writing:
alert(document.querySelector('#imageId').alt) //supposed alt as name.

Change:
onclick="window.alert()"
to:
onclick="imgName(this)"
and within your imgName function change:
window.alert()
to
alert(foo.src)
where foo is the argument you pass to the function via function imgName(foo)
function imgName(foo) {
alert(foo.src)
}
<figure>
<img src="aster.jpg" alt="aster" onclick="imgName(this)">
<figcaption><span>I am aster</span></figcaption>
</figure>
Or you could just ditch the function and alert the src directly via:
<figure>
<img src="aster.jpg" alt="aster" onclick="alert(this.src)">
<figcaption><span>I am aster</span></figcaption>
</figure>

Please see below -
<html>
<body>
<script language="javascript" >
function imgName() {
var fullPath = document.getElementById("img1").src;
window.alert(fullPath)
}
</script>
<img src="aster.jpg" alt="aster" id="img1" onClick="imgName()">
</form>
</body>
</html>

In "onclick" you are not calling the function "imgName()".
Do this:
<figure>
<img src="aster.jpg" alt="aster" onclick="imgName()">
<figcaption><span>I am aster</span></figcaption>
</figure>
If "current image name" means that you want the alt attribute ("aster"), the code of function need to be this:
function imgName() {
var nameOfPics = document.getElementsByTagName("img")[0].getAttribute("alt");
alert(nameOfPics);
}

The problems is when you click the image, you didn't call the related function.
Change onclick="window.alert()" with the related function to return window alert.
<img src="aster.jpg" alt="aster" onclick="window.alert()">
Change with :
<img src="aster.jpg" alt="aster" onclick="imgName()">
I Hope its can help you, pardon me if this is not the best answer

Related

Call a JavaScript function inside tag attribute

How can we call an JavaScript function inside tag attribute ?
let imageURL = () => 'http://www.example.com/image.png';
<img alt="error" src="javascript:imageURL()">
src accepts only url, you can place your function here: <img alt="Not available" src="whatever" onload="this.onload=null; this.src=imageURL();"/>
Use JavaScript to change the image src attribute:
document.getElementById('myImage').src = 'https://media.wired.com/photos/5b8999943667562d3024c321/master/w_2560%2Cc_limit/trash2-01.jpg';
<img alt="Not available" id="myImage" />
you can not run js function on attribute, try this function
first it try to load placeholder, after placeholder loaded it then trigger JS function
<img src="https://thumbs.gfycat.com/RapidRadiantBug-small.gif" onload="this.onload=null; this.src=imageURL();" />
Use javascript to change image source, see my example :
document.getElementById('image').setAttribute('src', 'https://media.wired.com/photos/5b8999943667562d3024c321/master/w_2560%2Cc_limit/trash2-01.jpg');
<img alt="Not available" src="" id="image">

Switch Image By Adding Text Before File Extension

I Hope you can help me.
When I click button it adds night before file extension ex.(interior-1.jpg to interior-1-night) but it only affects the first image which is interior-1.jpg.
What I want is to add "night" text before the file extension of all images under the "image" ID.
Here is my html code
<button onclick="changeMode()">switch</button>
<img id="image" src="interior-1.jpg"/>
<img id="image" src="interior-2.jpg"/>
<img id="image" src="interior-3.jpg"/>
<img id="image" src="interior-4.jpg"/>
<img id="image" src="interior-5.jpg"/>
Here is my javascript code
<script>
function changeMode() {
var filename = document.getElementById("image").src;
var modfilename = filename.replace(/(\.[\w\d_-]+)$/i, '-night$1');
document.getElementById("image").src = modfilename;
</script>
}
You should never use same id name on elements in the dom. Instead use same class name. To apply the src on all the img tag get all the tags using document.getElementsByClassName. Iterate over each element and change the src using a forEach loop
function changeMode() {
var filename = document.getElementsByClassName("image");
var a = '';
Object.values(filename).forEach((e) => {
a = e.src;
var modfilename = a.replace(/(\.[\w\d_-]+)$/i, '-night$1');
e.src = modfilename;
})
}
<button onclick="changeMode()">switch</button>
<img class="image" src="interior-1.jpg" />
<img class="image" src="interior-2.jpg" />
<img class="image" src="interior-3.jpg" />
<img class="image" src="interior-4.jpg" />
<img class="image" src="interior-5.jpg" />
The problem is that you are getting your element by GetElementById which only returns one element. You should change the id tag to name like this:
<img name="image" src="interior-1.jpg"/>
Then you should be able to retrieve all the elements using var els = document.getElementsByName('image');
now you need to change their file names, so
for (let i = 0; i<els.length; i++){
els[i].src = els[i].src.replace(/(\.[\w\d_-]+)$/i, '-night$1');
}
Here is my two cents. Use classes. This way you can query multiple elements instead of just one. Then apply your changes to each element using, in this case, a forEach.
The elements returend from document.querySelectorAll is a nodeList. That's why I use Array.prototype.forEach.call.
function changeMode() {
const imageNodes = document.querySelectorAll(".image");
Array.prototype.forEach.call(imageNodes, (node) => {
let modfilename = node.src.replace(/(\.[\w\d_-]+)$/i, '-night$1');
node.src = modfilename
})
}
<button onclick="changeMode()">switch</button>
<img class="image" src="interior-1.jpg"/>
<img class="image" src="interior-2.jpg"/>
<img class="image" src="interior-3.jpg"/>
<img class="image" src="interior-4.jpg"/>
<img class="image" src="interior-5.jpg"/>

Access an html node in javascript

I have following html code.
<div id="polaroid">
<figure>
<img src="assets/polaroid01.jpg" width="200" height="200" alt="Red mushroom" />
<figcaption>Pretty red mushroom</figcaption>
</figure>
<figure>
<img src="assets/polaroid02.jpg" width="200" height="200" alt="Rainbow near Keswick" />
<figcaption>Rainbow near Keswick</figcaption>
</figure>
<figure>
<img src="assets/polaroid03.jpg" width="200" height="200" alt="An old tree" />
<figcaption>Nice old tree</figcaption>
</figure>
</div><!--end polaroid-->
In this i want to store all the image tags in an array. I know, I can access the figure tags like this.
var images= document.getElementById('gall').getElementsByTagName('figure');
But i don't know how to access the image tag.
I tried this.
document.getElementById('gall').getElementsByTagName('figure').getElementsByTagName('img');
But this doesn't work.
In this case it's more convenient to use querySelectorAll:
var images = document.querySelectorAll('#gall figure img');
You mean like this:
var images= document.getElementById('gall').getElementsByTagName('figure');
images.getElementsByTagName("img");
This is possible if you use JQuery. Simply Do This.
Include Jquery Library (any version).
select image : $("#polaroid img").(any action);
Example:
put this above your code:
<script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#polaroid img").css("border", "1px solid #000000");
});
</script>

How to set src of image by a function call?

I want to set the src of an image to the return value of a function call. Here is what I am doing now:
<img src="get_src()" alt="can't display picture" />
and the script is:
function get_picA() {
return "picA.png";
}
But it doesn't work.
You can't set it like that.
You can change the value with javascript:
<img id="image" src="picB.png" alt="can't display picture" />
document.getElementById("image").setAttribute("src","picA.png");
You can't do it that way. The src attribute doesn't interpret javascript.
You may do it like this:
<img id="picA">
<script type="text/javascript">
function get_picAPath(){
return "picA.png";
}
document.onload = function(){
document.getElementById('picA').src= get_picAPath();
};
</script>

Clicking a thumbnail to change a larger image

I've tried to change a main image when clicking on a thumbnail, but I can't seem to have two different instances of the code together; only one will work at a time. Can someone tell me what I'm doing wrong, please?
My Javascript -
function changeImage(img) {
document.getElementById("img").src = img.src.replace("_t", "_b");
}
function changeImage(img) {
document.getElementById("img1").src = img.src.replace("_t", "_b");
}
My HTML -
<img src="images/AGM/events_t.jpg"
onclick='changeImage(this);'
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=0.5">
<img src="images/AGM/events1_t.jpg"
onclick='changeImage(this);'
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=0.5">
<img id="img" src="images/AGM/events_b.jpg" width="650">
<img src="images/BLACSBF/events_t.jpg"
onclick='changeImage(this);'
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=0.5">
<img src="images/BLACSBF/events1_t.jpg"
onclick='changeImage(this);'
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=0.5">
<img id="img1" src="images/BLACSBF/events_b.jpg" width="650">
Create one changeImage function and pass two parameters, the image and the target div.
function changeImage(img,target) {
document.getElementById(target).src = img.src.replace("_t", "_b");
}
Then call it like onclick='changeImage(this,'img1');' or onclick='changeImage(this,'img');'

Categories

Resources