• Log InLog In
  • Register
Liquid`
Team Liquid Liquipedia
EDT 21:27
CEST 03:27
KST 10:27
  • Home
  • Forum
  • Calendar
  • Streams
  • Liquipedia
  • Features
  • Store
  • EPT
  • TL+
  • StarCraft 2
  • Brood War
  • Smash
  • Heroes
  • Counter-Strike
  • Overwatch
  • Liquibet
  • Fantasy StarCraft
  • TLPD
  • StarCraft 2
  • Brood War
  • Blogs
Forum Sidebar
Events/Features
News
Featured News
[ASL22] Ro4 Preview: Mirror Mirror6[ASL22] Ro8 Preview: Within Reach5[ASL22] Ro8 Preview: In A Tizzy11[ASL22] Ro16 Preview: Holy Diver5[ASL22] Ro16 Preview: Rough Waters10
Community News
Rollback Netcode in Brood War845.0.17 Patch Notes - October 7, 202622Weekly Cups Results (Sep 28-Oct 4)0SC4ALL: II SC2 Complete Invited Player Lineup10StarCraft II 5.0.17 PTR Patch Notes (Sept 30, 2026)78
StarCraft 2
General
5.0.17 Patch Notes - October 7, 2026 ESL Pro Tour for SC2 discontinued [Old] StarCraft 3 Reportedly in Development StarCraft II 5.0.17 PTR Patch Notes (Sept 30, 2026) How do you feel about the mass reverts in the 5.0.17 PTR?
Tourneys
Stellar Fest TWO the Moon (Dec 16-20) ISSL (IntoTheTV x SOOP SC2 League): Premier RSL 2026 Offline Finals LCQ Sign-Ups $3,500 WardiTV Not-Summer Championship ScienceCraft (October 24-25) - Live Event
Strategy
[H] ZvP Mid-Late Game: Stalkers Collossi HT
Custom Maps
[M] (2) Sweltering Sands [M] (2) Frigid Storage
External Content
The PondCast: SC2 News & Results Mutation # 547 Temple Of Terror Mutation # 546 Catch the Train Mutation # 545 And Drops and Rifts
Brood War
General
BW General Discussion Visiting korea this week BGH Auto Balance -> http://bghmmr.eu/ New 3v3 BGH Ladder (and more) on ShieldBattery! ASL FINALS HYPE VIDEO 2X
Tourneys
[Megathread] Daily Proleagues ASL 22 Finals [ASL22] Semifinal A [ASL22] Semifinal B
Strategy
Simple Questions, Simple Answers Cliff Jump Revisited (1 in a 1000 strategy) Replay Review Process - What do you do?
Other Games
General Games
Stormgate/Frost Giant Megathread Nintendo Switch Thread General RTS Discussion Thread Warcraft III: The Frozen Throne Total Annihilation Zero
Dota 2
Dota 2 Champions League Season 3 Begins April 25!
League of Legends
[TL LoL EUW IHs] Teemo shall perish
Heroes of the Storm
Heroes of the Storm 2.0
Hearthstone
Deck construction bug
TL Mafia
TL Mafia Community Thread
Community
General
Russo-Ukrainian War Thread US Politics Mega-thread Things Aren’t Peaceful in Palestine Canadian Politics Mega-thread Artificial Intelligence Thread
Fan Clubs
Serral Fan Club
Media & Entertainment
[Manga] One Piece Movie Discussion! Diablo Animated Series on Netflix
Sports
Football (Soccer) Thread TeamLiquid Health and Fitness Initiative For 2023 MLB/Baseball 2023
World Cup 2022
Tech Support
Computer Build, Upgrade & Buying Resource Thread
TL Community
Recent Gifted Posts
Blogs
The Link Between Gaming and …
TrAiDoS
[ASL22] Ro4 Day1 Ticket Giv…
bITt.mAN
38 yo Retired SWE loo…
PurE)Rabbit-SF
Can Bots Beat Pros?? Starcr…
namkraft
[meme] I finally understa…
LUCKY_NOOB
Customize Sidebar...

Website Feedback

Closed Threads



Active: 14619 users

html help and general webcomic questions

Blogs > FreelanceSatan
Post a Reply
FreelanceSatan
Profile Blog Joined January 2011
36 Posts
Last Edited: 2012-06-12 19:47:50
June 12 2012 19:45 GMT
#1
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 +
[image loading]



+ Show Spoiler +
[image loading]


*****
KharadBanar
Profile Joined February 2011
Austria463 Posts
Last Edited: 2012-06-12 19:49:43
June 12 2012 19:49 GMT
#2
I have no idea how to HTML, but your pics sure look bloody amazing :O
5/5 for the art style alone
FreelanceSatan
Profile Blog Joined January 2011
36 Posts
June 12 2012 19:56 GMT
#3
thanks man
Integra
Profile Blog Joined January 2008
Sweden5626 Posts
Last Edited: 2012-06-12 20:01:12
June 12 2012 20:00 GMT
#4
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
"Dark Pleasure" | | I survived the Locust war of May 3, 2014
Weson
Profile Blog Joined December 2010
Iceland1032 Posts
June 12 2012 20:04 GMT
#5
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.
"!@€#" - as some guy said
Tobberoth
Profile Joined August 2010
Sweden6375 Posts
June 12 2012 20:04 GMT
#6
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).
Integra
Profile Blog Joined January 2008
Sweden5626 Posts
June 12 2012 20:06 GMT
#7
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.
"Dark Pleasure" | | I survived the Locust war of May 3, 2014
Weson
Profile Blog Joined December 2010
Iceland1032 Posts
Last Edited: 2012-06-12 20:23:42
June 12 2012 20:18 GMT
#8
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.
"!@€#" - as some guy said
rastaban
Profile Blog Joined May 2010
United States2294 Posts
June 12 2012 20:23 GMT
#9
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.
Tyler: "...damn it, that's StarCraft. Opening doors is what we do. Being the first to find food is the greatest pleasure a player can have!"
FreelanceSatan
Profile Blog Joined January 2011
36 Posts
Last Edited: 2012-06-12 20:25:27
June 12 2012 20:23 GMT
#10
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?
Integra
Profile Blog Joined January 2008
Sweden5626 Posts
Last Edited: 2012-06-12 20:29:09
June 12 2012 20:24 GMT
#11
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.
"Dark Pleasure" | | I survived the Locust war of May 3, 2014
rastaban
Profile Blog Joined May 2010
United States2294 Posts
June 12 2012 20:30 GMT
#12
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.
Tyler: "...damn it, that's StarCraft. Opening doors is what we do. Being the first to find food is the greatest pleasure a player can have!"
fabiano
Profile Blog Joined August 2009
Brazil4644 Posts
Last Edited: 2012-06-12 20:37:19
June 12 2012 20:33 GMT
#13
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.
"When the geyser died, a probe came out" - SirJolt
Xyik
Profile Blog Joined November 2009
Canada728 Posts
June 12 2012 21:14 GMT
#14
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.
Weson
Profile Blog Joined December 2010
Iceland1032 Posts
June 12 2012 22:57 GMT
#15
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
"!@€#" - as some guy said
FreelanceSatan
Profile Blog Joined January 2011
36 Posts
Last Edited: 2012-06-12 23:47:18
June 12 2012 23:44 GMT
#16
thanks man. tl.net has been with me every step of the way on pretty much every art project i have ever done.
Please log in or register to reply.
Live Events Refresh
Next event in 9h 33m
[ Submit Event ]
Live Streams
Refresh
StarCraft 2
PiGStarcraft418
ProTech160
RuFF_SC2 121
StarCraft: Brood War
Rain 2795
GuemChi 2035
Artosis 658
Aegong 58
Dota 2
monkeys_forever513
NeuroSwarm241
Counter-Strike
taco 308
minikerr11
Other Games
summit1g6149
JimRising 518
C9.Mang0399
Day[9].tv242
WinterStarcraft119
Mew2King28
Organizations
StarCraft 2
BasetradeTV170
[ Show 12 non-featured ]
StarCraft 2
• davetesta33
• Letter146
• AfreecaTV YouTube
• intothetv
• Kozan
• IndyKCrew
• Migwel
StarCraft: Brood War
• BSLYoutube
• STPLYoutube
• ZZZeroYoutube
League of Legends
• Scarra2288
Other Games
• Day9tv242
Upcoming Events
WardiTV Weekly
9h 33m
PiGosaur Cup
22h 33m
Kung Fu Cup
1d 9h
The PondCast
2 days
Online Event
3 days
Korean StarCraft League
4 days
Afreeca Starleague
4 days
Rush vs Soulkey
CranKy Ducklings
4 days
BSL Open Qualifier
4 days
Sparkling Tuna Cup
5 days
[ Show More ]
IPSL
5 days
BSL Open Qualifier
5 days
WardiTV Weekly
6 days
Liquipedia Results

Completed

Proleague 2026-10-12
Blizzard Classic Cup 2026
Copium Cup

Ongoing

ASL Season 22
Super Anchor Qualifying S3
Acropolis #5
HCC Season 3
ESL Pro League Season 24
Stake Ranked Episode 4
1win Private Club #1
Logitech G Play Connect 2026
SL StarSeries Fall 2026
FISSURE Playground #3
BLAST Open Fall 2026
Esports World Cup 2026
BLAST Bounty Summer 2026

Upcoming

Acropolis #5 - GSC
BSL Season 23
SC4ALL II: Brood War
BSL 23: Non-Korean Championship
HSC XXX
Stellar Fest 2: Lunar Cup
SC4ALL II: StarCraft II
Kung Fu Cup 2026 Grand Finals
RSL Offline Finals
eXTREMESLAND 2026
PGL Major Singapore 2026
Stake Ranked Episode 6
BLAST Rivals Fall 2026
IEM Beijing 2026
Stake Ranked Episode 5
PGL Masters Bucharest 2026
1win Private Club #2
Thunderpick World Champ. '26
TLPD

1. ByuN
2. TY
3. Dark
4. Solar
5. Stats
6. Nerchio
7. sOs
8. soO
9. INnoVation
10. Elazer
1. Rain
2. Flash
3. EffOrt
4. Last
5. Bisu
6. Soulkey
7. Mini
8. Sharp
Sidebar Settings...

Advertising | Privacy Policy | Terms Of Use | Contact Us

Original banner artwork: Jim Warren
The contents of this webpage are copyright © 2026 TLnet. All Rights Reserved.