Changed "name" attribute to "id" but images don't show - html

Error: The name attribute on the img element is obsolete. Use the id attribute instead.
<img src name="slide" width="1714" height="500" alt="slideshow" />
Above you can see I have this error that's asking me to change the 'name' to 'id', however when I try this it end's up making my images not appear. So essentially the 'id' doesn't work but the 'name' does. Any ideas?
https://gyazo.com/ff5c6b39d5a1b649027d2fca57a1ffa1
As you can see in the first image the code is working when it is
<img src name=""/>
<script>
var i = 0; // Start Point
var images = []; // Images Array
var time = 3000; // Time Between Switch`
// Image List
// This holds an array of all my images
images[0] = "images/img_house.png";
images[1] = "images/img_staff.jpg";
images[2] = "images/img_desk.jpg";
images[3] = "images/img_coinstack.jpg";
// Change Image
function changeImg() {
document.slide.src = images[i];
// Check If Index Is Under Max
if (i < images.length - 1) {
// Add 1 to Index
i++;
} else {
// Reset Back To O
i = 0;
}
// Run function every x seconds
setTimeout("changeImg()", time);
}
// Run function when page loads
window.onload = changeImg;
</script>
<section>
<img src name="slide" width="1714" height="500" alt="slideshow" />
</section>`
Below I have changed the code to <img src id=""/> and it no longer works, it shows the alt text.
https://gyazo.com/634a5fa6db7e1acf22a55815f19d6da2

In your function you insert it using the name attribute "slide". But an id is not a name and must be fetched from the document. So
document.getElementById("slide").src = images[i];
Also, the <img> tag does not use or need a closing slash.

Related

how to change image link in "a" tag to <img>

One of the WordPress plugins renders the uploaded image as a link:
news-paper.png
I want to convert it to an tag with JavaScript so that the link is displayed as an image
Not super familiar w/ Wordpress so there may be an easier way, but you could convert that link into an image by...
Changing the <a ... tag to an <image ... tag :
<image src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" target="_blank" aria-label="new"/>
adding an image via JS based off that value
function add_google_logo() { show_image("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png", 276,110, "Google Logo");
}
function show_image(src, width, height, alt) {
var img = document.createElement("img");
img.src = src;
img.width = width;
img.height = height;
img.alt = alt;
document.body.appendChild(img);
}
<button onclick="add_google_logo();">Add Google Logo</button>
^ completely ripped from this post: How to display image with JavaScript?

How to pass <img> value on click?

I'm working on a project where there are tiles of different pictures and I want to pass the value to another page when an image is clicked on. Since <img> doesn't have a value attribute, I tried to wrap an <a> tag around the image as follows, although it does the job, the format of the image is messed up. Is there a better way to do this that doesn't mess with the format of the image? Thank you for your help.
<a href="results.inc.php?value=gpu" onclick="post">
<img src="https://via.placeholder.com/200.jpg" alt="" class="cardImg">
</a>
Based on your comment, the most "harmless" way to do it would be JavaScript, adding a custom attribute to the image for the value you want it to pass in the onClick method.
document.addEventListener("DOMContentLoaded", function() {
var allCards = document.querySelectorAll(".cardImg");
for(i = 0; i < allCards.length; i++) {
var value = allCards[i].getAttribute("data-card-value");
allCards[i].addEventListener("click", function() {
document.location.href = "results.inc.php?value=" + value;
});
}
});
.cardImg {
cursor:pointer;
}
<img src="https://via.placeholder.com/200.jpg" data-card-value="gpu" alt="" class="cardImg">

Hide image sequence on click; show again when finished

I have a layout with a sequence of images overlapping.
I want to hide them one by them when clicking and after you hided all the pictures, show them in a reversed way until having them all – like a loop.
I have this simple piece of code where I manage to hide the images when clicking them, but can't figure how to show them again.
$('.overlap-img').on("click", function() {
$(this).hide();
})
Is there any way to accomplish that?
It's not mandatory to hide the image you click, it can work that you click anywhere and the images are closing, maybe that way you have more control of the sequence.
Thanks in advance!
1st: It will be good to add fake hide class to the hidden images
2nd: Need to get the number of the images and the number of hidden images
3rd: Loop through images using .each then you can use setTimeout to make a delay in show
$(document).ready(function(){
var interval,
time_to_hide = 500, // duration to fade/hide the image
time_to_show = 1000 // duration to fade/show the image
$(document).on("click",'.overlap-img:not(.showing)' , function() {
// add class hide to the clicked image and use hide([duration] , [callback])
$(this).addClass('hide').slideUp( time_to_hide , function(){
var All_images_Count = $('.overlap-img').length, // get the all images length
Hidden_images_Count = $('.overlap-img.hide').length; // get the hidden images length
if(Hidden_images_Count == All_images_Count){ // if the all images == the hidden images then
$('.overlap-img.hide').each(function(index){ // loop through the hidden images .. (index) is the index of the image
var This_image = $(this); // $(this) cannot work in setTimeout so you need to define it outside
interval = setTimeout(function(){
This_image.removeClass('hide').addClass('showing').slideDown(); // remove the class from the image and show it
if($('.overlap-img.showing').length == All_images_Count){ // if all images finish showing
$('.overlap-img.showing').removeClass('showing'); // remove the showing class from all
}
} , time_to_show * index); // time_to_show * index to make a delay between images on show
});
}
});
})
});
img{
position : absolute;
width : 100%;
height : 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="overlap-img" src="https://via.placeholder.com/100"/>
<img class="overlap-img" src="https://via.placeholder.com/150"/>
<img class="overlap-img" src="https://via.placeholder.com/200"/>
<img class="overlap-img" src="https://via.placeholder.com/250"/>
<img class="overlap-img" src="https://via.placeholder.com/300"/>
<img class="overlap-img" src="https://via.placeholder.com/350"/>
Also the .showing class I used it to prevent user to click till all images is shown
The OP Commented: I was simply wondering if it's possible, instead of making the images
appear automatically, to force the user to click in order to make them
appear. So the same process as to make them hide but making them
appear
$(document).ready(function(){
var interval,
time_to_hide = 500, // duration to fade/hide the image
time_to_show = 1000, // duration to fade/show the image
All_images_Count = $('.overlap-img').length; // get the all images length
$(document).on("click",'.overlap-img:not(.showing):not(:eq(0))' , function() {
// add class hide to the clicked image and use hide([duration] , [callback])
$(this).addClass('hide').slideUp( time_to_hide , function(){
var Hidden_images_Count = $('.overlap-img.hide').length; // get the hidden images length
if(Hidden_images_Count == All_images_Count - 1){ // if the all images == the hidden images then
$('.overlap-img:eq(0)').addClass('showing'); // Add the class showing to the first image
}
});
});
$(document).on("click",'.overlap-img.showing' , function() {
var ThisImage = $(this), // this image
NextImage = ThisImage.next('.overlap-img.hide'); // the next image
NextImage.removeClass('hide').addClass('showing').slideDown();
var showing_images_Count = $('.overlap-img.showing').length; // get the showing images length
if(showing_images_Count == All_images_Count){ // if the all images == the showing images then
$('.overlap-img.showing').removeClass('showing'); // remove the `showing` class from all the images
}
});
});
img{
position : absolute;
width : 100%;
height : 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="overlap-img" src="https://via.placeholder.com/100"/>
<img class="overlap-img" src="https://via.placeholder.com/150"/>
<img class="overlap-img" src="https://via.placeholder.com/200"/>
<img class="overlap-img" src="https://via.placeholder.com/250"/>
<img class="overlap-img" src="https://via.placeholder.com/300"/>
<img class="overlap-img" src="https://via.placeholder.com/350"/>

How to have the same image for different img elements widths without losing quality?

I have the same image at multiple widths, e.g. balloon-35.webp, balloon-40.webp, balloon-90.webp.
I also have multiple img elements with different widths, e.g. <img width="35"/>, <img width="40"/>, <img width="90"/>.
Can I specify the srcset attribute for each img with the 3 files mentionned above and have the img element chose the right file according to the width attribute? For example, if the width of the img is 35, then the 35 file is chosen.
Or is my only option to change the src attribute with the right file depending on the width? Or is there another way to achieve what I want?
Cheers!
Here is the snippet code, i have design for you just enter the images URL in the array of images as mention imagesUrls = ['balloon-35.webp', 'balloon-40.webp', 'balloon-90.webp'];. Value of url should be anything just the last 7 character 40.webp etc should be same as you mention in your upper description.
var a = document.getElementsByTagName("a");
function stups(){
var tagWidth = a[0].getAttribute("width");
document.getElementById("demo").innerHTML = tagWidth;
console.log(tagWidth);
var src = "";
var imagesUrls = ['balloon-35.webp', 'balloon-40.webp', 'balloon-90.webp'];
for (var img of imagesUrls)
{
var width = img.substr(img.length - 7);
var widthValue = width.substring(0, 2);
if (tagWidth.substring(0, 2) === widthValue){
src = img;
}
}
console.log(src);
document.getElementById("imageClass").src = src;
}
<BUTTON ONCLICK="stups()">VALUE FINDER </BUTTON>
<a value="this is a value" width="35px" href="value"><img id="imageClass" src=""> values rule!!</a>
<p id="demo"></p>
Do Ping me up, If you think that i did something good for you. Cheers!

Target to a page inside an iframe

I will try to explain again:
I have 3 images in my index.html that when clicked i'd like to point respectively to ourmission.html, ourvalues.html and ourvision.html.
But this 3 pages are inside an iframe located in the page ourcompany.html as you can see below:
<aside class="sidebar">
<h4>Our Company</h4>
<ul class="nav nav-list primary pull-bottom">
<li>Contact Us</li>
<li>Our Mission</li>
<li>Our Values</li>
<li>Our Vision</li>
</ul>
</aside>
<iframe src="contactus.html" frameborder='0' name="conteudo" width="700" height="700">
</iframe>
How do i to point them directly, so the page ourcompany.html will load with the specific iframe opened.
This might be a possible solution for you, if I have understood you correctly.
I am assuming you dont have a server set up with the website.
In your index.html, your image links need to be modified to this:
<img src="" />
<img src="" />
<img src="" />
Notice the ?link=someValue after the ourcompany.html link. This is a GET request but you will use it to pass data between pages.
Now in your ourcompany.html page you need to get the value you sent after the ?link=. So you need to add some Javascript. This is the function you need to add to ourcompany.html:
function getValue()
{
// First, we load the URL into a variable
var url = window.location.href;
// Next, split the url by the ?
var qparts = url.split("?");
// Check that there is a querystring, return "" if not
if (qparts.length == 0)
{
return "";
}
// Then find the querystring, everything after the ?
var query = qparts[1];
// Initialize the value with "" as default
var value = "";
var parts = query.split("=");
// Load value into variable
value = parts[1];
// Convert escape code
value = unescape(value);
// Return the value
return value;
}
Now you can change the iframe src attribute accordingly like this:
var link = getValue();
if (link.length){//check if you got a value
document.getElementByName('conteudo').src = link + ".html";//set the src
}
I got the solution adding the following code to the page where the iframe is located:
<script>
window.onload = function loadIframe(){
if (location.search.length > 0){
url = unescape(location.search.substring(1))
window.frames["iframe-name"].location=url
}
}
</script>
and using the href as:
<a href="iframe-page.html?specific-iframe.html">
Thanks a lot for everyone that tried to help me.