Hi I don't know how to loop the tag img using javascript or php or whatever?
I have around 200 images and the name of image is imaged1.jpg , imaged2.jpg, imaged3.jpg,........,imaged200.jpg something like this....
<DOCTYPE! html>
<html>
<head>
<script>
for(var i=1, i < 200,i++)
{
var images = document.getElementbyId("photo");
//////////////////////////////???
}
</script>
</head>
<body>
<div>
<div>
<img id = "photo" src="imaged i.jpg" />
</div>
</div>
</body>
</html>
Related
I have separated files for the HTML and JS code.. I want to make a function which allows me to change the image when I click on it with another (like an array of images(?)) the HTML-JS link is done like this:
<script src="file.js"></script>
My HTML is here:
`
<!DOCTYPE html>
<html>
<head>
<script src="proiect.js"></script>
</head>
<body>
<img src="images/image7.jpg" alt="path not found" class="dynamic-image" onclick="wrapper(1)">
<img src="images/image10.jpg" alt="path not found" class="dynamic-image" onclick="wrapper(0)">
</body>
</html>
`
My JS code:
var wrapper = function changeImg(param) {
'use strict';
var preloads=[],c;
function preload(){
for(c=0;c<arguments.length;c++) {
preloads[preloads.length]=new Image();
preloads[preloads.length-1].src=arguments[c];
}
c=0;
}
if (param==1){
preload('src1');
alert("param=1");}
if(param==0){
preload('src2');
alert("param=0");
}
document.getElementsByClassName('dynamic-image').addEventListener('click',
function() {
c++;
if(c==preloads.length) {
c=0;
}
this.src=preloads[c].src;
});
}
wrapper(param);
My problem is that when I click on the image it shows the message (param=1 / param=0), but it won't change the image and I don't understand why ...
Always put your scripts at the end of your body because your script need to wait that all your ressources are loaded.
You need to do just this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="images/image7.jpg" alt="path not found" class="dynamic-image" onclick="wrapper(1)">
<img src="images/image10.jpg" alt="path not found" class="dynamic-image" onclick="wrapper(0)">
<script src="proiect.js"></script> <!-- SCRIPT TAG AT THE END OF BODY TAG -->
</body>
</html>
The entire problem is this: when you put your script tag in the head, your function triggers before the DOM is created... so it executes before the images are even created. The best-practice is to put your scripts at the end of the body tag.
Your JavaScript file needs to be on the bottom of the page, after all <img> tags are loaded.
You can format your HTML as so:
<!doctype html>
<html>
<body>
<img src="images/image7.jpg" alt="path not found" class="dynamic-image" onclick="wrapper(1)">
<img src="images/image10.jpg" alt="path not found" class="dynamic-image" onclick="wrapper(0)">
<script type="text/javascript" src="proiect.js"></script>
</body>
</html>
You don't need your "wrapper(param);" in your proiect.js file because the function is called by the attributes "onclick" of your images.
With the addEventListener function, you can't get the object used, you have to use jquery framework with something like:
var wrapper = function changeImg(param) {
'use strict';
var preloads=[],c;
function preload(){
for(c=0; c<arguments.length; c++) {
preloads[preloads.length] = new Image();
preloads[preloads.length-1].src = arguments[c];
}
c=0;
}
if (param == 1){
preload('images/image10.jpg');
// alert("param=1");
}
if(param == 0){
preload('images/image7.jpg');
// alert("param=0");
}
$('.dynamic-image').on('click', function() {
c++;
if(c == preloads.length) {
c=0;
}
console.log(this.src);
this.src = preloads[c].src;
});
}
And your HTML file:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="images/image7.jpg" alt="path not found" class="dynamic-image" onclick="wrapper(1)">
<img src="images/image10.jpg" alt="path not found" class="dynamic-image" onclick="wrapper(0)">
<script src="proiect.js"></script>
<script src="jquery.min.js"></script>
</body>
</html>
And of course add the "jquery.min.js" file in your folder: https://jquery.com/download/
I know that it's not exactly what you want but it can help you ;-)
I'm having an auto-generated iframe (Which also have a class name and on the same domain), inside it, there is also a <script> tag and some styling. Can anyone tell me how to remove the script tag and its contents using pure javascript? [NO jQuery please, Using VueJS ]
<html>
<body>
<iframe src="#" class="myiframe">
#document
<html>
<body>
<!-- REMOVE-->
<style>...</style>
<!-- REMOVE-->
<div class="wrapper">...</div>
</body>
</html>
</iframe>
</body>
</html>
I know how to select the script tag (Might not perfect for the purpose), What I don't know is how to select the style tag which is inside of an iframe:
var element = document.getElementsByTagName("style"), index;
for (index = element.length - 1; index >= 0; index--) {
element[index].parentNode.removeChild(element[index]);
}
You can try to use the following code, this code might be lengthy, lets try and optimize that:
<html>
<head>
<script>
function removeStyleTag() {
var iframe = document.getElementById("myFrame");
var styleTag = iframe.contentWindow.document.getElementsByTagName("style");
for (var index = styleTag.length - 1; index >= 0; index--) {
styleTag[index].parentNode.removeChild(styleTag[index]);
}
}
</script>
</head>
<body>
<iframe id="myFrame" src="#" class="myiframe">
#document
<html>
<body>
<!-- REMOVE-->
<style>...</style>
<!-- REMOVE-->
<div class="wrapper">...</div>
</body>
</html>
</iframe>
<button onclick="removeStyleTag()">Try It</button>
</body>
</html>
I have found a reference from this link.
I have just added the following 2 lines in addition to the code that you have written:
var iframe = document.getElementById("myFrame");
var styleTag = iframe.contentWindow.document.getElementsByTagName("style");
Here is a link to Fiddle where I have tried this code.
I have some images which are hidden, the markup is
<div class="images hide">
<img id="barber" class="barber-image" src="../../Content/images/chosing_business_role/barberShopBackground.jpg" />
<img id="beauty" src="../../Content/images/background_image.png" />
</div>
And i need to change body background with the first one of them when images loaded, but without new request to server for that image. How can i do that? Thanks.
$('#barber').on('load', changeBodyBackground);
// when image loads, call function
....
function changeBodyBackground(e){
$('body').css('background-image', $(this).attr('src'));
// set background-image property for body
}
Try this
<!DOCTYPE html>
<html>
<head>
<script src = "jquery-1.10.2.min.js"></script>
<style>
.hide{display:none;}
</style>
</head>
<body>
<div class="images hide">
<img id="barber" class="barber-image" src="1.jpg" />
<img id="beauty" src="2.jpg" />
</div>
<script type="text/javascript">
$('body').css('background','url('+$('#barber').attr('src')+')');
</script>
</body>
</html>
you can also use background-image
$('body').css('background-image','url('+$('#barber').attr('src')+')');
I want to modify my slide show to include links via the images in the slide. My original code is and it works:
VAR slides=new Array("s1.jpg","s2.jpg")
var slideCntr=slides.length-1
function slideShow() {
slideCntr+=1
if (slideCntr==slides.length) slideCntr=0
document.getElementById("slideHolder").src = slides[slideCntr]
setTimeout("slideShow()",3000)
}
In my code i have 5 image links with a display of none. I am using an array populated with the id's of the image tags and changing the display to block. I think i need something to change the display back to none. Not sure but what i have now does not work please help. My new code which needs help is:
var slides=new Array("slide1","slide2","slide3","slide4","slide5")
var slideCntr=slides.length-1
function slideShow(){
slideCntr+=1
if (slideCntrl==slides.length)
slideCntr=0
document.getElementById(slideCntr).style="display: block;"
setTimeout("slideShow()",3000)}
<body onLoad="slideShow()">
<div>
<img id="slide1" src="s1.jpg">
<img id="slide2" src="s2.jpg">
<img id="slide3" src="s3.jpg">
<img id="slide4" src="s4.jpg">
<img id="slide5" src="s5.jpg">
</div>
</body>
This code works perfectly fine.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
img
{
display:none;
}
</style>
</head>
<body>
<div>
<img id="slide1" src="1.png">
<img id="slide2" src="2.png">
<img id="slide3" src="3.png">
<img id="slide4" src="4.png">
<img id="slide5" src="5.png">
</div>
<script type="text/javascript">
var slides=new Array("slide1","slide2","slide3","slide4","slide5");
var slideCntr = 1;
setInterval(slideShow,3000);
function slideShow()
{
//alert('called');
for(var i = 1 ; i < slides.length+1 ; i++)
{
document.getElementById("slide"+i).style.display = "none";
}
document.getElementById("slide"+slideCntr).style.display = "block";
slideCntr+=1;
if(slideCntr == slides.length+1)
{
slideCntr = 1;
}
}
</script>
</body>
</html>
I have a script that places an image based on a mouse click thanks to Jose Faeti. Now I need help adding a .click() event to the code below so that when a user clicks the image it performs the function shown in the script.
<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />.click()
I put the entire code below, in case you want to see it.
<html>
<head>
<script language="javascript" type="text/javascript">
<!--
document.getElementById('foo').addEventListener('click', function (e) {
var img = document.createElement('img');
img.setAttribute('src', 'http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png');
e.target.appendChild(img);
});
// -->
</script>
</head>
<body>
<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />.click()
</body>
</html>
Help?
First of all, this line
<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />.click()
You're mixing HTML and JavaScript. It doesn't work like that. Get rid of the .click() there.
If you read the JavaScript you've got there, document.getElementById('foo') it's looking for an HTML element with an ID of foo. You don't have one. Give your image that ID:
<img id="foo" src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />
Alternatively, you could throw the JS in a function and put an onclick in your HTML:
<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" onclick="myfunction()" />
I suggest you do some reading up on JavaScript and HTML though.
The others are right about needing to move the <img> above the JS click binding too.
You can't bind an event to the element before it exists, so you should do it in the onload event:
<html>
<head>
<script type="text/javascript">
window.onload = function() {
document.getElementById('foo').addEventListener('click', function (e) {
var img = document.createElement('img');
img.setAttribute('src', 'http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png');
e.target.appendChild(img);
});
};
</script>
</head>
<body>
<img id="foo" src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />
</body>
</html>
Enclose <img> in <a> tag.
<img src="smiley.gif">
it will open link on same tab, and if you want to open link on new tab then use target="_blank"
<img src="smiley.gif">
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script type="text/javascript" >
function openOnImageClick()
{
//alert("Jai Sh Raam");
// document.getElementById("images").src = "fruits.jpg";
var img = document.createElement('img');
img.setAttribute('src', 'tiger.jpg');
img.setAttribute('width', '200');
img.setAttribute('height', '150');
document.getElementById("images").appendChild(img);
}
</script>
</head>
<body>
<h1>Screen Shot View</h1>
<p>Click the Tiger to display the Image</p>
<div id="images" >
</div>
<img src="tiger.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick()" />
<img src="Logo1.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick()" />
</body>
</html>