|
Hey guys I have a graphic novel (heavily inspired by the starcraft universe!!) that I have been working on for many years now. One of the ideas I would like to try to incorporate into a web published version is to have a system setup for it where the page loads just the images of the page without any text or speech bubbles first and then text will only load into the picture after you click the image (or a button perhaps) and then the words are layered on top of it. I have been trying to figure out a method to create this kind of process but I have yet to yield any results. My html knowledge is very limited but I have a strong desire to learn. Does anyone have any idea how I can go about achieving this result?
In general I would love to hear feedback on this idea from people (good or bad doesnt matter)
I am also kinda conflicted on what the general consensus is around here on web comics and resolutions. Should I publish the pages in extremely high detail and large resolution and sacrifice load times and mobility + accessibility
Or should I reduce the file sizes dramatically to fit on a small screen with no scrolling and low load times but sacrifice extremely large amounts of detail.
heres an example of the size I would like to publish it in
+ Show Spoiler +
+ Show Spoiler +
|
I have no idea how to HTML, but your pics sure look bloody amazing :O
5/5 for the art style alone
|
|
|
Sounds like you might wanna learn CSS and html with javascript. With CSS you can create elements on the page, such as text or images, that is hidden, and with javascript you then can trigger the CSS script to show the hidden elements. For more info you can go here:
http://www.w3schools.com/css/default.asp
|
I cant think of any way to achieve this with only HTML. I think you have to look into javascript or PHP to find a solution.
|
On June 13 2012 05:00 Integra wrote:Sounds like you might wanna learn CSS and html with javascript. With CSS you can create elements on the page, such as text or images, that is hidden, and with javascript you then can trigger the CSS script to show the hidden elements. For more info you can go here: http://www.w3schools.com/css/default.asp
This is definitely the way to go. Have the images in the background, and use invisible divs for the text bubbles absolutely positioned over it. Making a javascript to show the hidden divs on a click or similar is extremely simple (and if you want to learn something slightly more advanced but sweeter to work with, you can use jQuery, a javascript library which makes javascript together with css incredibly easy to work with).
|
On June 13 2012 05:04 Weson wrote:
I cant think of any way to achieve this with only HTML. I think you have to look into javascript or PHP to find a solution.
CSS and javascript will be fine, he won't need PHP since...It doesn't have damn thing to do with doing an webpage dynamic or interactive.
|
On June 13 2012 05:06 Integra wrote:Show nested quote +On June 13 2012 05:04 Weson wrote:
I cant think of any way to achieve this with only HTML. I think you have to look into javascript or PHP to find a solution. CSS and javascript will be fine, he won't need PHP since...It doesn't have damn thing to do with doing an webpage dynamic or interactive.
With some ugly code the same result could be achieved with PHP. However, you will have to do postbacks and it probably wont look as good as with a CSS&Javascript solution. He might want to load the text from a database, then PHP and mysql would be perfect.
|
At its simplest you can have 2 versions of the picture one with, and one without, the text then link the no text version to the one with text.
Not optimal by any means but should be the easiest to do for someone with no experience in setting up something like this in js or CSS.
|
this sounds like its all way out of my league. Im just a humble amateur comic book creator. from what I see so far perhaps it would be best to try and find someone more knowledgeable on the subject of web creation to join my crusade.
edit*
On June 13 2012 05:23 rastaban wrote:
At its simplest you can have 2 versions of the picture one with, and one without, the text then link the no text version to the one with text.
Not optimal by any means but should be the easiest to do for someone with no experience in setting up something like this in js or CSS.
I think this is the direction I would be most likely be able to work with. Would there be any kind of drawbacks to this?
|
On June 13 2012 05:18 Weson wrote:Show nested quote +On June 13 2012 05:06 Integra wrote:On June 13 2012 05:04 Weson wrote:
I cant think of any way to achieve this with only HTML. I think you have to look into javascript or PHP to find a solution. CSS and javascript will be fine, he won't need PHP since...It doesn't have damn thing to do with doing an webpage dynamic or interactive. With some ugly code the same result could be achieved with PHP. However, you will have to do postbacks and it probably wont look as good as with a CSS&Javascript solution.. He might want to load the text from a database, then PHP and mysql would be perfect. PHP code cant make a site dynamic?
no, Javascript has dynamic event handlers, PHP does not. Even if it was possible the amount of code and programming skills would be much greater, essentially you would use a rocket trying to kill a bug when all you need is a swatter. Even if he wanted to load the text from a database, which I can't possible understand why since databases are meant for complex data, he would need to learn how to use SQL and AJAX as well in order to load the data... SO no, PHP is bad in every possible way in this situation.
|
On June 13 2012 05:23 FreelanceSatan wrote:this sounds like its all way out of my league. Im just a humble amateur comic book creator. from what I see so far perhaps it would be best to try and find someone more knowledgeable on the subject of web creation to join my crusade. edit* Show nested quote +On June 13 2012 05:23 rastaban wrote:
At its simplest you can have 2 versions of the picture one with, and one without, the text then link the no text version to the one with text.
Not optimal by any means but should be the easiest to do for someone with no experience in setting up something like this in js or CSS.
I think this is the direction I would be most likely be able to work with. Would there be any kind of drawbacks to this?
The image would have to load twice exacerbating the large image problem, but if you are already using large images it probably isn't an issue for people who load them without problems. Also you wouldn't have any transition affects like fading ins.
|
Man, with my limited experience it is not trivial to do such thing with HTML/CSS/JS because a single image can have multiple panels. You might have to learn Flash.
However, if an image represents a single panel, then there are different ways to achieve what you want.
One of them is to use JS to switch the image without the bubbles to the one equivalent with the bubbles. No idea if this is efficient.
On June 13 2012 05:30 rastaban wrote:Show nested quote +On June 13 2012 05:23 FreelanceSatan wrote:this sounds like its all way out of my league. Im just a humble amateur comic book creator. from what I see so far perhaps it would be best to try and find someone more knowledgeable on the subject of web creation to join my crusade. edit* On June 13 2012 05:23 rastaban wrote:
At its simplest you can have 2 versions of the picture one with, and one without, the text then link the no text version to the one with text.
Not optimal by any means but should be the easiest to do for someone with no experience in setting up something like this in js or CSS.
I think this is the direction I would be most likely be able to work with. Would there be any kind of drawbacks to this? The image would have to load twice exacerbating the large image problem, but if you are already using large images it probably isn't an issue for people who load them without problems. Also you wouldn't have any transition affects like fading ins.
I believe its possible to add special effects using JQuery though;
oh, you could just overlap two images, one with the drawings, the other with the bubbles. Will have to learn CSS.
|
This should be very doable with javascript and css, and it won't be too complex, the javascript you'll need to write is actually minimal, mainly positioning and responding to a mouse click event.
|
On June 13 2012 05:24 Integra wrote:Show nested quote +On June 13 2012 05:18 Weson wrote:On June 13 2012 05:06 Integra wrote:On June 13 2012 05:04 Weson wrote:
I cant think of any way to achieve this with only HTML. I think you have to look into javascript or PHP to find a solution. CSS and javascript will be fine, he won't need PHP since...It doesn't have damn thing to do with doing an webpage dynamic or interactive. With some ugly code the same result could be achieved with PHP. However, you will have to do postbacks and it probably wont look as good as with a CSS&Javascript solution.. He might want to load the text from a database, then PHP and mysql would be perfect. PHP code cant make a site dynamic? no, Javascript has dynamic event handlers, PHP does not. Even if it was possible the amount of code and programming skills would be much greater, essentially you would use a rocket trying to kill a bug when all you need is a swatter. Even if he wanted to load the text from a database, which I can't possible understand why since databases are meant for complex data, he would need to learn how to use SQL and AJAX as well in order to load the data... SO no, PHP is bad in every possible way in this situation.
Yeah you are absolutly right. Was dumb of me mentioning someting that requires a lot more work and will not function as well as something that can be done with a much more simpler method.
Just got to say your pictures looks amazing 
|
thanks man. tl.net has been with me every step of the way on pretty much every art project i have ever done.
|
|
|
|
|
|
EPT![[image loading]](http://i.imgur.com/ZZ0O1.jpg)
![[image loading]](http://i.imgur.com/z70LK.jpg)
