PDA

View Full Version : revealing images



tyson642
Feb 21st, 2015, 03:23 PM
I have created a little comic for online use. the idea is the whole item will be hidden and a users click will reveal a series of images

currently i have created this:


heres what i have so far:

<!DOCTYPE html>
<html>
<head>
<style>
body {
color: red;
background-color: #1F2A22;
}

h1 {
color: #00ff00;
}

</style>
</head>
<body>

<img id="fans6" IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="fans6.png">
<img id="impact6" IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="impact6.png">
<img id="text6" IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="text6.png">
<img id="panel7"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="panel7.png">
<img id="atom7"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="atom7.png">
<img id="fantext7"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="text fan7.png">
<img id="text7"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="text7.png">
<img id="fans7"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="fans7.png">
<img id="panel8"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="panel8.png">
<img id="bang8"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="bang8.png">
<img id="panel9"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="panel9.png">
<img id="reporter9"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="reporter9.png">
<img id="text9"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="text9.png">
<img id="panel10"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="panel10.png">
<img id="full10"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="panel full10.png">
<img id="text10"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="text10.png">
<img id="end10"IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:800px; HEIGHT:600px" SRC="the end10.png">

<script>

var curImage = 0;
var images = ["fans6","impact6","text6"];

function windowClick() {
document.getElementById(images[curImage]).style.opacity = "0";
if(curImage < images.length - 1)
{
document.getElementById(images[curImage + 1]).style.opacity = "1";
curImage++;
}
else
{
document.getElementById(images[0]).style.opacity = "1";
curImage = 0;
}
}

window.onclick = windowClick;

</script>
</body>
</html>


The issue is that once an image is shown the next click reveals the next image but hides the previously shown image

how do i set it so the images remain and a click will show the next part?

Philip M
Feb 21st, 2015, 03:49 PM
Delete the line

document.getElementById(images[curImage]).style.opacity = "0";


All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

tyson642
Feb 21st, 2015, 04:24 PM
the image does nothing now. it is already revealed. i am trying to have the opacity of each image to 0 and when the user clicks the opacity is up to 100. and as mentioned it will show one image per user click. the image is what i have atm. the video shows what i am attempting

14013
https://www.youtube.com/watch?v=whza8AbiT9U%22

Old Pedant
Feb 22nd, 2015, 06:36 AM
Why mess with opacity when all you want is 0 or 100? Just use display, instead. Also, how about using CSS instead of repeating a style over and over. Also, the "IMG" inside the <img id="xxx" IMG ...> is totally bogus.

How about something as simple as this:

<html>
<head>
<style>
body {
color: red;
background-color: #1F2A22;
}

h1 {
color: #00ff00;
}

#comic img {
positio: absolute;
top: 35px; left: 170px;
width: 800px; height: 600px;
display : none;
}
</style>
</head>
<body>
<div id="comic">
<img src="fans6.png">
<img src="impact6.png">
<img src="text6.png">
<img src="panel7.png">
<img src="atom7.png">
<img src="text fan7.png">
<img src="text7.png">
<img src="fans7.png">
<img src="panel8.png">
<img src="bang8.png">
<img src="panel9.png">
<img src="reporter9.png">
<img src="text9.png">
<img src="panel10.png">
<img src="panel full10.png">
<img src="text10.png">
<img src="the end10.png">
</div>
<script type="txt/javascrip">

var curImage = -1;
var images = document.getElementById("comic").getElementsByTagName("img");
window.onclick = function()
{
if ( curimage >= 0 && curimage < images.length-1 )
{
images[curimage].style.display = "none";
}
if ( curimage < images.length-1 )
{
++curimage;
images[curimage].style.display = "block";
}
}

</script>
</body>
</html>

Old Pedant
Feb 22nd, 2015, 06:40 AM
Ahhh....I just played your video. Okay, so my simple-minded approach doesn't work.

If you want the fadein as you showed it, you can't just change the opacity BANG. You need to use a timed fade.

I'd suggest trying jQuery, though I can show you how to do it in ordinary JS. Just takes more code.

Also, you need to designate the GROUPS of images that make up each comic. If the digit on the end of each image file name (e.g., "atom7") is good enough, we could use that to make the groups.

tyson642
Feb 22nd, 2015, 02:18 PM
Yeah. each number is assigned as the panel it is. i have another document for panels 1-5, this is panels 6-10. the number indicates what panel those images come from.

i have used javascript but jquery is something ive never tried so i wouldnt mind taking a look at ure ideas.

yeah the idea is a slow fade. in the video ive timed it to every second. from the video it seems fast enough to work

thats what i was unsure of using. i wasnt sure how i could combine the opacity with a timed fade



thanks for this help

Arbitrator
Feb 23rd, 2015, 02:35 AM
i have used javascript but jquery is something ive never tried so i wouldnt mind taking a look at ure ideas.

yeah the idea is a slow fade. in the video ive timed it to every second. from the video it seems fast enough to work

thats what i was unsure of using. i wasnt sure how i could combine the opacity with a timed fadejQuery might be a good way to animate this for older browsers. You can do it more simply using CSS Transitions though. For example:


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Demo</title>
<style>
* {
margin: 0; /* fallback style */
margin: initial;
}
html {
background-color: black;
color: white;
}
#comic {
margin: 1rem auto;
position: relative;
}
#comic img {
display: block;
background-color: silver;
position: absolute;
transition: opacity 2.5s;
}
#comic #fans6 {
left: 0;
top: 0;
}
#comic #impact6 {
/* Specify the top and left properties. */
}
#comic #text6 {
/* Specify the top and left properties. */
}
#comic #panel7 {
/* Specify the top and left properties. */
}
/* ... */
#comic #end10 {
/* Specify the top and left properties. */
}
</style>
</head>
<body>
<figure id="comic">
<!-- alt, height, and width attributes should be specified for each img element. -->
<img id="fans6" src="fans6.png">
<img id="impact6" src="impact6.png">
<img id="text6" src="text6.png">
<img id="panel7" src="panel7.png">
<img id="atom7" src="atom7.png">
<img id="fantext7" src="text%20fan7.png">
<img id="text7" src="text7.png">
<img id="fans7" src="fans7.png">
<img id="panel8" src="panel8.png">
<img id="bang8" src="bang8.png">
<img id="panel9" src="panel9.png">
<img id="reporter9" src="reporter9.png">
<img id="text9" src="text9.png">
<img id="panel10" src="panel10.png">
<img id="full10" src="panel%20full10.png">
<img id="text10" src="text10.png">
<img id="end10" src="the%20end10.png">
</figure>
<script>
(function () {
"use strict";
(function initializeComicAnimationSeries() {
var comic = document.getElementById("comic");
var comicImages = comic.getElementsByTagName("img");
var comicImage = null;
var comicImageIndex = 1;
while (comicImageIndex < comicImages.length) {
comicImage = comicImages.item(comicImageIndex);
comicImage.style.setProperty("opacity", "0");
++comicImageIndex;
}
comic.addEventListener("click", showNextComicImage);
})();
function showNextComicImage() {
var comic = this;
var comicImages = comic.getElementsByTagName("img");
var comicImage = null;
var comicImageIndex = 1;
var comicImageOpacity = null;
while (comicImageIndex < comicImages.length) {
comicImage = comicImages.item(comicImageIndex);
comicImageOpacity = getComputedStyle(comicImage).getPropertyValue("opacity");
if (comicImageOpacity === "0") {
/* The following line removes style="opacity: 0;" which effectively sets opacity: 1. */
comicImage.removeAttribute("style");
if (comicImage.isEqualNode(comicImages.item(comicImages.length - 1))) {
comic.removeEventListener("click", showNextComicImage);
}
break;
}
++comicImageIndex;
}
}
})();
</script>
</body>
</html>

The code above is tested and should work. You'll need to plug in the image information though, including image positions in the CSS style sheet, image widths, image heights, and alt attribute text.

It might be more appropriate to join the comic image via SVG though...

Old Pedant
Feb 23rd, 2015, 03:04 AM
Arbitrator: If you look at his original post, all the images have the same positions and sizes (as in the CSS I used), so he doesn't need the separate CSS for each image. He apparently just uses transparency in his PNG images to allow the "prior" images in sequence to show through.

Arbitrator
Feb 23rd, 2015, 04:17 AM
Arbitrator: If you look at his original post, all the images have the same positions and sizes (as in the CSS I used), so he doesn't need the separate CSS for each image. He apparently just uses transparency in his PNG images to allow the "prior" images in sequence to show through.I didn't pay much attention to the original code because it's so badly written. I just assumed that the duplicate positions were some kind of error.

Such a technique seems bad for maintainability since a single change to the comic image could necessitate changing a multitude of mask images. But, on the other hand, it makes things easier on the CSS and JavaScript fronts and solves the problem of needing to semantically unify the images using something like SVG.

So, here's some revised code that should do the trick. It makes the assumption that the first image is the comic image, which may not necessarily be correct. The code will work with minor HTML changes if that isn't the comic image and the correct img element is dropped in.


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Demo</title>
<style>
* {
margin: 0; /* fallback style */
margin: initial;
}
html {
background-color: black;
color: white;
}
#comic {
display: table;
margin: 1rem auto;
position: relative;
}
#comic .mask {
display: block;
left: 0;
position: absolute;
top: 0;
transition: opacity 2.5s;
}
</style>
</head>
<body>
<figure id="comic">
<!-- An alt attribute should be specified for the comic’s img element. -->
<img width="800" height="600" src="fans6.png">
<img class="mask" alt="" width="800" height="600" src="impact6.png" hidden="hidden">
<img class="mask" alt="" width="800" height="600" src="text6.png" hidden="hidden">
<img class="mask" alt="" width="800" height="600" src="panel7.png" hidden="hidden">
<img class="mask" alt="" width="800" height="600" src="atom7.png" hidden="hidden">
<img class="mask" alt="" width="800" height="600" src="text%20fan7.png" hidden="hidden">
<img class="mask" alt="" width="800" height="600" src="text7.png" hidden="hidden">
<img class="mask" alt="" width="800" height="600" src="fans7.png" hidden="hidden">
<img class="mask" alt="" width="800" height="600" src="panel8.png" hidden="hidden">
<img class="mask" alt="" width="800" height="600" src="bang8.png" hidden="hidden">
<img class="mask" alt="" width="800" height="600" src="panel9.png" hidden="hidden">
<img class="mask" alt="" width="800" height="600" src="reporter9.png" hidden="hidden">
<img class="mask" alt="" width="800" height="600" src="text9.png" hidden="hidden">
<img class="mask" alt="" width="800" height="600" src="panel10.png" hidden="hidden">
<img class="mask" alt="" width="800" height="600" src="panel%20full10.png" hidden="hidden">
<img class="mask" alt="" width="800" height="600" src="text10.png" hidden="hidden">
<img class="mask" alt="" width="800" height="600" src="the%20end10.png" hidden="hidden">
</figure>
<script>
(function () {
"use strict";
(function initializeComicAnimationSeries() {
var masks = document.querySelectorAll("#comic .mask");
var arbitraryMask = masks.item(0)
var mask = null;
var maskIndex = 0;
var transitionDurationInSeconds = parseInt(getComputedStyle(arbitraryMask).getPropertyValue("transition-duration"), 10);
var transitionDurationInMilliseconds = transitionDurationInSeconds * 1000;
while (maskIndex < masks.length) {
mask = masks.item(maskIndex);
mask.removeAttribute("hidden");
mask.addEventListener("click", fadeMask.bind(null, transitionDurationInMilliseconds));
++maskIndex;
}
})();
function fadeMask(transitionDuration) {
var firstMask = document.querySelector("#comic .mask");
firstMask.style.setProperty("opacity", "0");
setTimeout(destroyFirstMask.bind(firstMask), transitionDuration);
}
function destroyFirstMask() {
var firstMask = this;
if (firstMask.remove instanceof Function) {
/* Google Chrome 40 and Mozilla Firefox 35 */
firstMask.remove();
}
else {
/* Internet Explorer 11 */
firstMask.parentNode.removeChild(firstMask);
}
}
})();
</script>
</body>
</html>

tyson642
Feb 24th, 2015, 03:43 PM
The image itself is one large jpeg that i have cut into the relevant png files. i didnt change the size of the background per image i just left that as it is. im guessing the images may be part of this issue. should i go back and edit them again?

Arbitrator
Feb 25th, 2015, 12:00 AM
The image itself is one large jpeg that i have cut into the relevant png files. i didnt change the size of the background per image i just left that as it is. im guessing the images may be part of this issue. should i go back and edit them again?I would. Remove all the empty areas and reconstruct the image using CSS positioning properties or SVG coordinate attributes.

tyson642
Feb 25th, 2015, 03:50 PM
what ive started using is the co-ordinates from the original image. as i split all the layers i can use the x and y co-ordinate. im using it along with the css positioning. you were right also, removing all the empty areas has worked a charm

tyson642
Feb 27th, 2015, 11:57 AM
ive just decided to go simple. ive looked at the ideas you have shown and im using this which seems to do the job now thanks to fixing the images


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My toon</title>
<style>
body {
color: red;
background-color: #1F2A22;
}
h1 {
color: #00ff00;
}
.toon {
position:absolute;
opacity:0;
margin-right:-5px;
transition:opacity 2s;
}

#img1 {top:34px; left:1px;}
#img2 {top:541px; left:11px;}
#img3 {top:1x; left:150px;}
#img4 {top:377px; left:150px;}
#img5 {top:30px; left:323px;}
#img6 {top:440px; left:315px;}
#img7 {top:35px; left:481px;}
#img8 {top:467px; left:483px;}
#img9 {top:30px; left:635px;}
#img10 {top:182px; left:646px;}
#img11 {top:30px; left:662px;}
#img12 {top:42px; left:653px;}
</style>
</head>
<body>

<img class="toon" id="img1" src="01.png" alt="panel1">
<img class="toon" id="img2" src="02.png" alt="panel2">
<img class="toon" id="img3" src="03.png" alt="panel3">
<img class="toon" id="img4" src="04.png" alt="panel4">
<img class="toon" id="img5" src="05.png" alt="panel5">
<img class="toon" id="img6" src="06.png" alt="panel6">
<img class="toon" id="img7" src="07.png" alt="panel7">
<img class="toon" id="img8" src="08.png" alt="panel8">
<img class="toon" id="img9" src="09.png" alt="panel9">
<img class="toon" id="img10" src="10.png" alt="panel10">
<img class="toon" id="img11" src="11.png" alt="panel11">
<img class="toon" id="img12" src="12.png" alt="panel12">

<script>

var curImage = 0;

function windowClick() {
if(curImage < 12) {
document.getElementById("img" + (curImage + 1)).style.opacity = "1";
curImage++;
}
}

window.onclick = windowClick;

</script>
</body>
</html>

Now the question i ask is about movement of an image. the attached video is the other part of the comic. you will see two points that move when the user clicks. any suggestions (not looking for the code just an idea of how i do it, i want to try it myself)

https://www.youtube.com/watch?v=4ggjV735eq8

thanks for helping me. didnt think the images were the issue but glad it is sorted now