I need to create a list of links in a static (.html) page automatically, is there a way of doing this using JavaScript. I tired a few scripts but couldn't work it out.
this is my html...
<img src="images/1.jpg" width="119" height="121" alt="" />
and this is what i want the script to generate 55 times...
<img src="images/1.jpg" width="119" height="121" alt="" />
<img src="images/2.jpg" width="119" height="121" alt="" />
<img src="images/3.jpg" width="119" height="121" alt="" />
... and so on, call me lazy but any help would be most appreciated :)
This should do the trick:
<div id="links">
</div>
<script>
var strLinks = '';
for (var i = 1; i <= 55; i++) {
strLinks += '<img src="images/'+ i +'.jpg" width="119" height="121" alt="" />';
}
document.getElementById("links").innerHTML = strLinks;
</script>
JS Fiddle example: http://jsfiddle.net/RWUdG/2/
EDIT: Oops, missed a quote. Fixed.
This could also work.
<div id="imgs">
</div>
<script>
var i = 55; while (i--) {document.getElementById("imgs").innerHTML += '<img src="images/'+ i +'.jpg" width="119" height="121" alt="" />';}
</script>
http://jsfiddle.net/T2c3G/
If your anchor tags are contained inside a div, you can do this:
$(document).ready(function(){
var linksHtml = "";
for(var i = 1; i <= 55; i++){
linksHtml += '<img src="images/'+(i)+'.jpg" width="119" height="121" alt="" />';
}
$("#linksDiv").html(linksHtml);
});
Related
I try that when the mouse hovers over the image, this image changes to another one.
Why dont work?
var img1 = document.getElementById("img1");
function cambiaImagen() {
img1.style.backgroundImage = "url('demo1.jpg')";
}
img1.addEventListener("onmouseenter", cambiaImagen, true);
<div class="imagenes">
<img id="img1" class="img-fluid" src="demo1p.jpg" alt="">
<img id="img2" class="img-fluid" src="demo2p.jpg" alt="">
<img id="img3" class="img-fluid" src="demo3p.jpg" alt="">
</div>
There are actually two core issues in your code:
in order to replace the current image with another one its enough to replace the path to it, the one, that is stored within src attribute
"mouseenter" event should be called instead of "onmouseenter"
here is the working example:
var img1 = document.getElementById("img1");
function cambiaImagen() {
img1.src = "https://via.placeholder.com/150/000000/FFFFFF/?text=REPLACEMENT";
}
img1.addEventListener("mouseenter", cambiaImagen);
<div class="imagenes">
<img id="img1" class="img-fluid" width="150" height="150" src="https://via.placeholder.com/150/0000FF/808080/?text=ONE" alt="">
<img id="img2" class="img-fluid" width="150" height="150" src="https://via.placeholder.com/150/FF0000/FFFFFF/?text=TWO" alt="">
<img id="img3" class="img-fluid" width="150" height="150" src="https://via.placeholder.com/150/FFFF00/000000/?text=THREE" alt="">
</div>
When using addEventListener you should use the event mouseenter instead of onmouseenter.
why don't you just change the src?
var img1 = document.getElementById("img1");
var origSrc=img1.src;
function cambiaImagen(){
img1.src = "demo1.jpg";
}
img1.addEventListener("mouseenter", cambiaImagen, true);
img1.addEventListener("mouseleave",()=>{img1.src=origSrc},true);
I have the code
let dirtyHtml = `<img class="emojione" src="">
<img class="a" src="edw">
<img class="emojione" src="" />
<img class="emojione" src=""/>
<img src="">`;
let clearHtml = dirtyHtml.replace(/<img[^<>]+(?!emojione)[^<>]+>/gi, '');
console.log(clearHtml);
I expect to see this
<img class="emojione" src="">
<img class="emojione" src="" />
<img class="emojione" src=""/>
But I'll see empty string...
What wrong with my regular expression?
/<img(?:(?!emojione).)*>/gi will match anything between <img and > that doesn't contain the string emojione. Like this:
let dirtyHtml = `<img class="emojione" src="">
<img class="a" src="edw">
<img class="emojione" src="" />
<img class="emojione" src=""/>
<img src="">`;
let clearHtml = dirtyHtml.replace(/<img(?:(?!emojione).)*>/gi, '');
console.log(clearHtml);
You can try this (doesn't matter img whether [a-z]{3} because src's supported elements have more than 3 chars http://www.w3resource.com/html/attributes/html-src-attribute.php but it's easier to write img)
let dirtyHtml = `<img class="emojione" src="">
<img class="a" src="edw">
<img class="emojione" src="" />
<img class="emojione" src=""/>
<img src="">`;
let clearHtml = dirtyHtml.replace(/(<img class="[a-z]?" src="[a-z]+">)|(<img src="">)/gi, '');
console.log(clearHtml);
I won't repeat many reasons why RegExp usage to modify HTML is a bad idea (and by many considered as a hack), but I would like to show how natural it could be to use jQuery for this task
let dirtyHtml = `<img class="emojione" src="">
<img class="a" src="edw">
<img class="emojione" src="" />
<img class="emojione" src=""/>
<img src="">`;
// Put your html string within some HTML element to make a starting point
var $wrap = $('<div/>').append(dirtyHtml);
// Remove image tags without specific class
$wrap.find('img:not(.emojione)').remove();
console.log($wrap.html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
How could I make it that if someone clicks the image of the selected product to change the url of the button under the images
<div id="product">
<img value="1" src="http://placehold.it/300x100?text=Mary+Jane" alt="" />
<img value="2" src="http://placehold.it/300x100?text=LSD" alt="" />
<img value="3" src="http://placehold.it/300x100?text=Crack" alt="" />
</div>
<br>
<a id="buy" href="#"><button>Go to the the specific link</button></a>
text/image for amusement only, they are not really the products
What I have tried
window.onload = function() {
var sel = document.getElementById('product');
sel.onchange = function() {
document.getElementById("buy").href = "https://amazon.com/" + this.value;
}
}
Here's a codepen http://codepen.io/anon/pen/bdyWGa
Jquery solution:
$(function(){
$("img").click(function(){
$("#buy").attr("href","https://amazon.com/"+$(this).attr("value"));
});
});
Javascript Version:
var images = document.getElementsByTagName("img");
for (var i=0, len=images.length, img; i<len; i++) {
img = images[i];
img.addEventListener("click", function() {
document.getElementById("buy").setAttribute("href", "https://amazon.com/"+ this.getAttribute("value"));
alert("New href value: " + "https://amazon.com/"+ this.getAttribute("value"));
});
}
Working fiddle: http://codepen.io/anon/pen/NqVjGY
<img id="img1" src="http://placehold.it/300x100?text=Mary+Jane" alt="" />
<img id="img2" src="http://placehold.it/300x100?text=LSD" alt="" />
<img id="img3" src="http://placehold.it/300x100?text=Crack" alt="" />
<br>
<a id="buy" href="#"><button>Go to the the specific link</button></a>
and:
$("#img1").on("click", function(){
$("#buy").attr("href","https://mynewurl.net");
});
here you describe clicking on which img will change url to what
In javascript. Use e.target for take the current click element and get the value using attrubutes and apply to the href attribute.
window.onload = function() {
var sel = document.getElementById('product');
sel.onclick = function(e) {
console.log( e.target.attributes[0].value)
document.getElementById("buy").setAttribute('href', "https://amazon.com/" + e.target.attributes[0].value) ;
}
}
CodeOpen
Use jQuery to add a click event to all images to fetch the property value and add as an addition to href property of the intended element
$(function(){
$('img').on('click', function(){
$('#buy').attr('href',"https://amazon.com/" + $(this).attr('value'));
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="product">
<img value="1" src="http://placehold.it/300x100?text=Mary+Jane" alt="" />
<img value="2" src="http://placehold.it/300x100?text=LSD" alt="" />
<img value="3" src="http://placehold.it/300x100?text=Crack" alt="" />
</div>
<a id="buy" href="#"><button>Go to the the specific link</button></a>
How to clone an existing link with class="link" and wrap it around each img in the div "wrap"? Suppose we don't know the link so we can't just use this method:
$('#wrap img').wrap('');
HTML:
<a href="http://foo.com" class="link">
<img/>
</a>
<div id="wrap">
<img class="img" />
<img class="img" />
<img class="img" />
</div>
Result:
<a href="http://foo.com" class="link">
<img/>
</a>
<div id="wrap">
<img class="img" />
<img class="img" />
<img class="img" />
</div>
You could use the outerHTML property:
var link = $('.link').clone().empty().prop('outerHTML');
$('#wrap img').wrap(link);
Do this:
var anchor = $(".link");
anchor.html('');
$("#wrap img").wrap(anchor);
You can simply try this single line:
$('#wrap img').wrap('<a href="' + $('a.link').prop('href') + '">');
To clone the element without children:
$('#wrap img').wrap($('a.link').clone().empty());
Image dimensions in then created this is called into the picture if the picture is not loaded error image is shown.
<div id="hekimResimMini"><img src="" id="imgHekimResim" alt="" width="40" height="55" ></div>
$('#imgHekimResim').load(function(){})
.attr("src", "./personelResimi.jpeg?kurSicNo="+lcd.list[x].DOKTORID)
.error(function() {
var thisImg = this;
if ( $.browser.msie ) {
setTimeout(function() {
if ( ! thisImg.complete ) {
$(thisImg).attr('src', '../../images/error.png');
$(thisImg).css('width','40').css('height','27').css('margin-top','14px').css('margin-bottom','14px');
}
},250);
} else {
$(this).attr('src', '../../images/error.png');
$(thisImg).css('width','40').css('height','27').css('margin-top','14px').css('margin-bottom','14px');
}
});
I have series of images that I want to play them as a series of animation in html
<img src='image1.png' />
<img src='image2.png' />
<img src='image3.png' />
<img src='image4.png' />
<img src='image5.png' />
<img src='image6.png' />
<img src='image7.png' />
<img src='image8.png' />
<img src='image9.png' />
<img src='image10.png' />
<img src='image11.png' />
<img src='image12.png' />
They all need to on the same position but just swap very fast from image 1 to image 12 to make it looks like an animation.
Is there a way to do this properly? I have searched google but had no luck. Thanks for the help!
The best way is only to have one Image and only change the image src attribute. Like
<img src="image1.png" id="animationImage" />
Afterwards you can simply change for example with an setInterval:
var imageId = 1;
window.setInterval("changeImage()", 100);
function changeImage(){
imageId++;
if (imageId > 12)
imageId = 1;
$("#animationImage").attr("src", "image" + imageId + ".png");
// if you are NOT using jQuery, use this line instead:
document.getElementById("animationImage").src = "image" + imageId + ".png"
}
of course you can also simply hide/add the images:
HTML
<img src="image1.png" class="animationImage" />
<img src="image2.png" class="animationImage" />
<img src="image3.png" class="animationImage" />
<img src="image4.png" class="animationImage" />
<img src="image5.png" class="animationImage" />
<img src="image6.png" class="animationImage" />
<img src="image7.png" class="animationImage" />
<img src="image8.png" class="animationImage" />
<img src="image9.png" class="animationImage" />
<img src="image10.png" class="animationImage" />
<img src="image11.png" class="animationImage" />
<img src="image12.png" class="animationImage" />
Javascript:
$(".animationImage:not(:first)").hide();
var imageId = 0;
window.setInterval("changeImage()", 100);
function changeImage(){
$($(".animationImage")[imageId]).hide();
imageId++;
if (imageId > 11)
imageId = 0;
$($(".animationImage")[imageId]).show();
}
In both examples, the number 100 represents the amount of milliseconds the application will wait before showing the next image.
Edit The last solution assumes to use the jQuery library.
Note: jQuery is required for this solution
I will do this using jQuery:
function swap()
{
var images = $("img");
var on = false;
for(var i = 0; i < images.length; i++)
{
if($(images[i]).css("display") != "none")
{
on = true;
$(images[i]).css("display", "none");
}
else if(on)
{
on = false;
$(images[i]).css("display", "block");
}
}
if(on)
{
$(images[i]).css("display", "block");
}
}
This will swap each image to the next in order when called:
$(document).ready(function(){
setInterval(function(){swap();}, 1000/30);
});
JSFiddle