How to add alt attribute - javascript

I am facing a problem, I have the below blogger template which has the following HTML
I am facing an alt attribute error. So, if someone could kindly tell me how to add alt attribute in above html.

<img src="pathofyourimg" alt="No Image Available" />

The alt attribute can be applied to an image to specify an alternate text.
Ex: <img src="smiley.gif" alt="Smiley face">
You can wrap an image inside the <a and specify alt attribute for the image.
<a href="<data:post.url/>">
<image src="your image source" alt="This is my image">
</a>

Related

Is there a way to hide an "Image not found" error icon without "this.style.display = 'none'"

I'm trying to have multiple image boxes in a span, with no pre-determined src. This is for a basic game of blackjack as a task I have set myself to do in JavaScript.
Currently, here is my HTML code for the span of image boxes.
This site is not being hosted, I'm running it via my browser; no JQuery
<span> <!-- Players Cards -->
<img class='imagebox' id='imagebox1' src=''></img>
<img class='imagebox' id='imagebox2' src=''></img>
<img class='imagebox' id='imagebox3' src=''></img>
<img class='imagebox' id='imagebox4' src=''></img>
</span>
In my JavaScript file, after a card has been selected, I use interpolation to get an image. It will be dealt by changing image.src as shown:
function deal(box) {
let card = randomcard()
const image = document.getElementById(`imagebox${box}`)
if (image.src !== card) {
image.src = `cardpng/${card}`
}else {
redeal()
}
}
My issue is that, since no src has been defined for each image box, until it has been assigned a src, it will have an "image not found" icon, which for aesthetic purposes I'd like to remove.
I tried:
<img class='imagebox' id='imagebox1' onerror='this.style.display = "none"' src=''></img>
However, in doing so, this.style.display remains as "none", even after a src is defined and there should be no error.
I understand I could just write a function once a card has been dealt to change it back, however I'm looking for something prettier which will be easier and less communication between HTML and JS.
Thanks in advance for replies.
Use CSS
img[src=""] {
display: none;
}
Like this -
setTimeout(() => document.getElementById('imagebox1').src = "image.jpg", 2000)
img[src=""] {
display: none;
}
<span> <!-- Players Cards -->
<img class='imagebox' id='imagebox1' src=''/>
<img class='imagebox' id='imagebox2' src=''/>
<img class='imagebox' id='imagebox3' src=''/>
<img class='imagebox' id='imagebox4' src=''/>
</span>
However - are you sure you're seeing an image not found icon?? I don't see any here
<span> <!-- Players Cards -->
<img class='imagebox' id='imagebox1' src=''/>
<img class='imagebox' id='imagebox2' src=''/>
<img class='imagebox' id='imagebox3' src=''/>
<img class='imagebox' id='imagebox4' src=''/>
</span>
note: img does not have a closing tag - it's either <img ...../> or <img .....> with no </img>
A solution that would work even for actually broken images, and not just for the ones you haven't set their src yet, is to set the alt attribute to the empty string:
<section>
<p>With <code>alt=""</code></p>
<img alt="">
<img alt="" src="">
<img alt="" src="https://example.com/broken-image.jpg">
<img alt="" src="https://www.fillmurray.com/50/50">
</section>
<section>
<p>Without</p>
<img>
<img src="">
<img src="https://example.com/broken-image.jpg">
<img src="https://www.fillmurray.com/50/50">
</section>
However beware that with this solution your images are converted to empty text nodes for the renderer, which don't take any space, but which make the neighbor white spaces get rendered. So for instance in the above example, the new lines between each <img> tags are visible as a single space text node in the rendered page, just like they are when the images are rendered.
However this is an issue only when the images are presented inline like here.

I’m using a multilanguage script to change from lanquage. Now I’m having troubles in using by the image

I am new for script and jQuery
I’m using a multilanguage script to change from language. Now I'm having troubles to change from a language by using the image,
<img src="/flags/us.png" alt="en_EN" />
<img src="/flags/it.png" alt="it_IT" />
<img src="/flags/fr.png" alt="fr_FR" />
here after i dnot know how to use this image tag
what i want from this image tag , when i am click this image i want the alt value of corresponding image click.
Hoe to get it...
its possible or else give any other idea
thanks
Kumar
Put a class in your anchor and try this
<img src="/flags/us.png" alt="en_EN" />
<img src="/flags/it.png" alt="it_IT" />
<img src="/flags/fr.png" alt="fr_FR" />
$('a.lang img').click(function(){
var alt=$(this).attr('alt');
});
<a class='lang_link' href="#"><img src="/flags/us.png" alt="en_EN" /></a>
Assuming your links have a class of lang_link, you can look inside the link to see what language should be chosen.
$('.lang_link').click(function(){
var lang = $(this).find('img:first').attr('alt');
});

Replace Image SRC On CLick

I have a WooCommerce setup where I have a gallery. One is big image and others are thumbnails.
What I want to do is when someone clicks on the thumbnail, it replaces the big image and the big image comes there at the thumbnail. How do I do that? Any JavaScript guru here to help?
Here is the full HTML output.
<div class="images product-gallery ">
<div class="big_image">
<a title="" href="http://www.domain.com/image001.jpg" itemprop="image" class="woocommerce-main-image zoom"><img width="300" height="300" alt="" class="attachment-shop_single wp-post-image" src="http://www.domain.com/image001-300x300.jpg"></a>
</div>
<div class="thumbnails">
<a title="" class="zoom first" href="http://www.domain.com/image002.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image002-90x90.jpg"><div class="numbers">1</div></a>
<a title="" class="zoom" href="http://www.domain.com/image003.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image003-90x90.jpg"><div class="numbers">2</div></a>
<a title="" class="zoom last" href="http://www.domain.com/image004.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image004-90x90.jpg"><div class="numbers">3</div></a>
<a title="" class="zoom first" href="http://www.domain.com/image005.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image005-90x90.jpg"><div class="numbers">4</div></a>
</div>
<div class="clear"></div>
</div>
I don't need that <a href=" part on image. So, you can ignore them.
I have very little knowledge in JavaScript, so please help me out. All I want is when someone click on any of the thumbnail image, the thumbnail image replaces the big image and the big image replace the clicked thumbnail. So basically the alter positions.
Please pardon me for my poor English.
Jquery
You can use src attr() in onclick event
$("#target").attr("src","newUrlOfTheImg");
or with plain java script
document.getElementById("target").src="newUrlOfTheImg";
And have look once
document.getElementById("target").src="myNewImage.extension";
Pure javascript alternative that you can use on the onclick event.
$(document).ready(function() {
$('.zoom').on('click', function() {
$('.big_image').find('img').attr('src', $(this).find('img').attr('src'));
});
});
You should try this out, however it would be better to have separate thumbnail and big-images files for loading purposes.

Multiple Roll Over Images

Is it possible to put an image onto a webpage that changes depending where the cursor is?
Current Code:
<body onload="MM_preloadImages('Images/Home.png')">
<div class="HeaderWrapper">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','Images/Home.png',1)">
<img src="Images/NavigationBanner.png" name="Image2" width="1300" height="150" border="0" id="Image2" />
</a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','Images/Home.png',1)">
<img src="Images/NavigationBanner.png" name="Home" width="1300" height="150" border="0" id="Home" />
</a>
</div>
I was thinking it could be modified some how to use this?
<area shape="rect" coords="434,54,495,83" href="index.php" target="index.php" alt="index" />
Search how to respond to the hover event.
Search how to toggle a CSS class on an HTML element.
When the image is hovered, toggle the class of the HTML element such that a different CSS class is used. This different CSS class will have a different image.
It might be easier to use jQuery for this.

Highslide gallery with two different thumbnails

I'm trying to make a gallery with highslide.
I have two thumbnails, a larger but cropped one listed on the page opening the large image if clicked on, and a smaller one with varying aspect ratio for the thumbstrip.
How do I configure highslide to actually use different images for the thumbstrip?
For example this is a part of the markup:
<a href="highslide/sample-images/picture12.jpg" class="highslide"
title="Caption from the anchor's title attribute"
onclick="return hs.expand(this, config1 )">
<img src="highslide/sample-images/picture12.thumb.jpg" alt=""/>
</a>
The link is pointing to the large picture, the img is showing the cropped thumbnail.
Can I override a function for example to use two thumbnails like:
<a href="highslide/sample-images/picture12.jpg" class="highslide"
title="Caption from the anchor's title attribute"
onclick="return hs.expand(this, config1 )">
<img class="thumb" src="highslide/sample-images/picture12.thumb.jpg" alt=""/>
<img class="strip" src="highslide/sample-images/picture12.strip.jpg" style="display: none" alt="" />
</a>
Actually I found a solution to this some time ago:
On the highslide api reference http://highslide.com/ref/ there is a function stripItemFormatter. The parameter of the function is the element you expand (the element).
the string returned by this function will be parsed as html, and used as an item of the thumbstrip.
If you check this example: http://highslide.com/ref/hs.stripItemFormatter you can see how it's done.

Categories