Beginner learning Javascript so please be patient. Javascript only. No JQuery.
I have created a Javascript slideshow of images which fades in and out by changing the class (opacity values) of the img tags (which are added individually via a for loop in the JS script-not the html).
I seem to be unable to get the link for the current image to open a new page with only that image. I have tried adding tags around each image with href links. This looks fine in the debugger --> elements, but when I hover on the image, the slideshow stops (as requested) but it always links through to the last images link as opposed to the current.
I first tried using getAttribute ("href") and then the img tag's parentNode attribute. Neither worked (only returned the href of the last image??!!). I'm wondering how I access this and ensure all tags except the ones around the current image are hidden or not active? Another option I have tried is creating new Div elements for the image (and elements) but this did not work either.
JS Fiddle https://jsfiddle.net/f5yt7rna/
The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
Source : http://www.w3schools.com/cssref/pr_pos_z-index.asp
Now make to make current element on top of stack. Use script below
#container img.show, a.show {
opacity:1;
z-index:1000
}