All CG Manga Doujin Original Doujin

 

Links are made to URLs starting with "http://".
Valid tags are:

• [url]http://ionh.sytes.net/static/cg/4.shtml#Toriko no Hime[/url] with spaces or [url]custom text||http://ionh.sytes.net/[/url]
  (link) with spaces or custom text
• [b]What's[/b] [u]up[/u] [i]Doc?[/i]
  What's up Doc?
• [img]http://ionh.sytes.net/img/name.png[/img]
  

Today's Feature

Seven Warriors Online Gamers ~Offline~ by Good Job?

The recent popularity of MMORPGs has spawned things like the anime series .hack//SIGN which tells the story of adventurers in a fictional online RPG. This led to the release of several games on the PS2 based on the series. The games were purely offline but simulated the experience of an online RPG including interactions with other players. Like these games, Seven Warriors is also a simulation of an MMORPG. The artwork is by Toshihide Sano, who has worked on a few other games by Good Job? like "Ane & Boin."

The Making Of

This was my first foray into learning Javascript and using conditional comments for IE. Originally all the effects were accomplished using only CSS. However, I changed it to use Javascript because the handling of the :active pseudo-class in Firefox prevented the links from working. In non-IE browsers, I left the CSS implementation for the large images of the girls since they are not links. It took me about a day to get the features basically working and a week to get all the bugs ironed out.

Creating the effects in Javascript was much easier than in CSS because the basic structure was no different than an image in a link. I only needed to use standard mouse event handlers. With CSS, I used nested divs/spans which disappeared and reappeared on the :hover and :active pseudo-classes. Making them do that was difficult without affecting the layout of anything else in the page. At first, I tried "display: none" and "display: block". This worked but there were some layout issues. The thumbnails with effects were not flowing properly with the regular thumbnails. This was solved by using "display: inline" instead of "display: block". Later, I found out that Opera does not preload images with "display: none" so I had to rework everything. The "visibility: hidden" property makes things invisible but does not remove their effect from the layout. To essentially reproduce "display: none", I needed to add "position: absolute" so that the images would break out of the page flow. Instead of using visibility, I could have also moved them left off the screen but since there is flowing text, I couldn't really predict how far they should be moved. The CSS method is nice because it is much easier to add new images with effects. One only needs to create the nested divs/spans and everything is set. With Javascript, one has to set up a preloading script and account for all the mouse events.

I used conditional comments to set up special instructions for IE. For example, I used them to hide the CSS implementation from IE and told it to use Javascript instead.