I have an html code as shown below. So far it is able to display the intended image. I also tried to change the src attribute and works completely fine.
<article id="memory-game">
<a class="image"><img src="../../images/memory-game.png" id="memory-game" alt="" /></a>
<h3 class="major">MEMORY GAME</h3>
<p>Tkinter<br><br>A card-matching memory game implemented in Tkinter GUI;</p>
Confidential Source Code
</article>
Now I have this script tag at the bottom of my element. It is supposed to change the image of the above html code from png to gif upon mouse hover on the specified article id. Last time I used this code was about 3 months ago, and it doesn't seem to work now.
<script>
$(function() {
$("#memory-game").hover(
function() {$(this).attr("src", "../../images/memory-game.gif");},
function() {$(this).attr("src", "../../images/memory-game.png");}
);
});
</script>
I'm a javascript noob. Anybody could help me solve the png-to-gif-change-on-mouse-hover issue? Would be greatly appreciated.
You have 2 elements using the same id. The id should be unique per document. jQuery is matching the first id so setting the src attribute on the div doesn't have any impact.
Remove the id from the article as follow
<article>
<a class="image"><img src="../../images/memory-game.png" id="memory-game" alt="" /></a>
<h3 class="major">MEMORY GAME</h3>
<p>Tkinter<br><br>A card-matching memory game implemented in Tkinter GUI;</p>
Confidential Source Code
</article>
Related
I'm working on a feature, in which images are being rendered from the servers. I was working on aligning the images but found that there is a lot of white space. This was the reason, due to loading of images with a broken link.
HTML :
<div class="image-result" *ngIf="Display('images')">
<div class="col-sm-3" *ngFor="let item of items$|async">
<a href="{{item.link}}">
<figure>
<img class="res-img" src="{{item.link}}" onerror="this.style.display='none'">
</figure>
</a>
</div>
</div>
I have used onerror="this.style.display='none'" to solve the problem, but leaves a lot of white space when images are being loaded from the server. Is there any solution for it like to remove img tag whenever a image with a broken link has been detected ? I have gone through stackoverflow before asking question, but I'm not able to solve this problem. It would be great if someone can help me out. Thanks! :)
Instead of onerror="this.style.display='none'" to hide an image, you can use onerror="this.parentNode.removeChild(this)" to remove the image tag altogether.
If you want to remove the entire column, in your specific case you can do the following.
var colEl = this.parentNode.parentNode.parentNode;
colEl.parentNode.removeChild(colEl);
Or, in your HTML:
onerror="this.parentNode.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode.parentNode)"
You should probably move that to some JavaScript function and attach your handler by saying
element.addEventListener('error', function() { /* ... */ });
References: parentNode, removeChild, addEventListener.
If you don't care about supporting Internet Explorer, you can also use remove instead of doing the parentNode.removeChild trickery. That would be particularly useful for reducing the code length in your onerror attribute, would you choose to use it, but I don't recommend that.
A more angular-way of doing this would be:
<img src="{{item.link}}" (error)="item.brokenImage=true">
So you would have:
<div class="col-sm-3" *ngFor="let item of items$|async">
<div *ngIf="!item.brokenImage">
<a href="{{item.link}}">
<figure>
<img class="res-img" [src]="item.link" (error)="item.brokenImage=true">
</figure>
</a>
</div>
</div>
You need to listen for the error event of the image element, and assign a boolean on whether the image loaded successfully or not. Then, depending on that value angular will either show the image with the div, or remove it from the DOM.
I am trying to get the URL of a link in the source code. The challenge is that the URL is hidden behind a image, and thus only letting me fetch the image-url.
I've been trying to figure a way to solve this issue by using the new CSS selector in the trigger system and also made a DOM variable that should get the URL when the image is clicked. There can also be multiple downloads.
Here is an example of what I am trying to achieve:
<div>
<div class="download">
<a href="example.com/The-URL-I-Want-to-get-if-top-image-is-clicked.pdf" target="_blank">
<img src="some-download-image.png"/></a>
<div class="download">
<a href="example.com/Another-URL-I-Want-to-get-if-middle-image-is-clicked.pdf" target="_blank">
<img src="some-download-image.png"/></a>
<div class="download">
<a href="example.com/Last-URL-I-Want-to-get-if-bottom-image-is-clicked.pdf" target="_blank">
<img src="some-download-image.png"/></a>
</div>
</div>
There are much code above and below this snippet, but with the selector it should be fairly easy to get the information I want. Only that I don't.
If anyone have met this wall and solved it, I really would like to know how. :)
This is one possible solution. So as I understand it, you would like to grab the anchor element's href attribute when you click the "download" image.
A Custom Javascript variable would need to be created so that you can manipulate the click element object:
function(){
var ec = {{Click Element}};
var href = $(ec).closest('a').attr('href');
return href;
}
So you will need to do your due diligence and add in your error checking and stuff, but basically this should return to you the href, and then you will need to parse the string to extract the portion that you need.
I am using sketch.js html canvas library to paint on multiple pages in my e-book.In my application e-book pages are loaded dynamically upon loading book. So i injected multiple canvas sheets in some pages where i am supposed to draw like this :
......//page content
$(pageContent).append('<canvas class="simple_sketch" style="background: url(images/white.jpg);" width="400" height="600"></canvas>');
and then calling the sketch function using each loop
$('.simple_sketch').each(function() {
$(this).sketch();
});
So far this works well, i can draw the painting on each page, but when i am trying to add tools (Marker size, colors, reset button), My href anchor tags does not work. My html mark up looks like this :
<div class="paint_tools">
<img src="images/pen-medium.png" width="49" alt="">
<img src="images/pen-medium.png" width="49" alt="">
<img src="images/pen-large.png" width="49" alt="">
<a class="colors" href="#simple_sketch" data-color="#8f395b" style="background: #8f395b;"></a>
<a class="colors" href="#simple_sketch" data-color="#c44f4f" style="background: #c44f4f;"></a>
<a class="colors" href="#simple_sketch" data-color="#ff66a2" style="background: #ff66a2;"></a> style="background: #46a843;"></a>
</div>
and here i am replacing id's '#' with class's '.' as
$('.paint_tools a').attr('href').replace('#','.');
But seems it does not work, Can any one please point where i am missing to pick size and colors, Btw, i like to have only this as the only tool set for all canvases in book.
Any kind of help much appreciated, Many many thanks in advance.
Problem solved: here is how i fixed it :
i found that no need to replace the # tags , So i removed that part and i just used the click handlers to update my marker size and color as like:
$(function() {
$('.paint_tools a').on('click', function() {
var a = $(this).data('size');
$('.simple_sketch').each(function(){
$(this).sketch().set('size',a);
})
});
});
$(function() {
$('.paint_tools a').on('click', function() {
var a = $(this).data('color');
$('.simple_sketch').each(function(){
$(this).sketch().set('color',a);
})
});
});
Hope it helps someone using sketch Library like me.
I am wondering if anyone knows a way to combine the "a href", "img src", and "alt" tags. We deal with a large amount of images and it is pretty tedious copying and pasting the same thing for all three fields for each picture in dreamweaver. Doing it once would be ideal. From what I have seen there is probably not much of a chance in doing this. I am using either HTML or Javascript.
<a href="../../0_Images/CRG_UnitType.jpg" target="_blank">
<img src="../../0_Images/CRG_UnitType.jpg" alt="CRG_UnitType.jpg" width="775" height="617" border="2" class="picture">
</a>
AngularJS can also solve this problem. Source it in your HTML and set up a controller that includes your image data, and then you can use ng-repeat. The result is something like this.
<div ng-repeat="image in images">
<a href ="{{image.href}}" target="_blank">
<img SRC="{{image.src}}" width="{{image.width}}" height="{{image.height}}" border="2" class="picture">
</a>
</div>
First of all, your alt attributes should not contain your image file name, they should be used to describe the content of images in case they don't load, or in case someone visually impaired navigate through your website.
To answer the question, you definitivly need to use some server-side language to save time.
You could for instance display all your images quite easily with PHP by looping through an array of files and titles.
You need some basic understanding of this language (or any other server-side language) before doing so but the time you'll spend doing so won't be lost.
It's possible,
you can use jquery to do what you want, and if the src is the same of the href as in your example the way is:
In HTML use only image, and place an additional class:
<img src="../../0_Images/CRG_UnitType.jpg" alt="CRG_UnitType.jpg" width="775" height="617" border="2" class="picture auto_add_link">
Now add jquery function:
$( ".auto_add_link" ).wrap(function() {
return '';
});
Not so pretty, but it works
Demo on jsfiddle
I'm building a gallery and osm of the items will have multiple views - similar to items found in an etsy gallery - and I'm trying to figure out whats going wrong. I started this a while ago and it worked but as I'm not a coder (exclusively) and just teaching myself, I can't tell what has changed or what I'm missing.
The goal is to have a large image and three thumbnails. When one of the three thumbnails is selected it will replace the large image with the corresponding image.
The code:
Here is what I have as my js function I am linking in:
<script type="text/javascript">
function altViews(next_img) {
document.getElementById("big").src = next_img;
}
</script>
*(Note, it is giving me an error on line 4 : document.getElementById("big").src = next_img;)*
Here is the code I used for the image and the thumbnails:
<div class="artwork">
<img id="big" src="../images/_101111-1.png"/>
<div class="gallery-thumbnails">
<img class="gallery-thumb" src="images/_101111-1.jpg" onclick="altViews('../images/_101111-1.jpg')">
<img class="gallery-thumb" src="images/_101111-3.jpg" onclick="altViews('../images/_101111-3.jpg')">
<img class="gallery-thumb" src="images/_101111-4.jpg" onclick="altViews('../images/_101111-4.png')">
</div>
<div class="rule">
</div>
</div>
If there are any details I've left out, please let me know. Also, I am a novice with js and php and teaching myself in my spare time so this might be a simple solution but I'm not familiar enough with it yet to figure it out.
You forgot to close the <img> tag adding a backslash to the end />
<img class="gallery-thumb" src="images/_101111-1.jpg" onclick="altViews('../images/_101111-1.jpg')"/>