I need Standard Comics html

A place to discuss the implementation and style of computer programs.

Moderators: phlip, Moderators General, Prelates

User avatar
gaurwraith
Posts: 285
Joined: Fri Jul 27, 2007 3:56 pm UTC

I need Standard Comics html

Postby gaurwraith » Fri Jul 27, 2007 4:05 pm UTC

Hi!
What I´m looking for is um, some light in how to do a basic comic page, you know like a window for the drawings and then the buttons for first, last, one forward, one back.

I dont understand a thing when I take a look at the source code provided by the web browser in web pages like this one or boasas or questionable content, well almost every webcomic has this setup...so, um, well take a look at what I did:

<script language="JAvaScript">

var actual=0;
var imagenes= new Array ("imagenes/01.jpg","imagenes/02.jpg","imagenes/03.jpg","imagenes/04.jpg","imagenes/05.jpg");


function siguiente(){
actual++;
if (actual<=(imagenes.length)-1){
document.formulario.visor.src= imagenes[actual];
}

}

function anterior(){
actual--;
if (actual>=0){
document.formulario.visor.src=imagenes[actual];
}

}
function irInicio(){
actual=0;
document.formulario.visor.src=imagenes[actual];


}

function irFin(){
actual=imagenes.length -1;
document.formulario.visor.src=imagenes[actual];


}

function pintaVisor(){

with (document)
{
write('<form name="formulario">')
write('<table cellspacing="1" cellpadding="4" bgcolor="#c0c0c0">')
write('<tr>')
write('<td align="center" bgcolor="white" width="350px" height="280px">')
write('<img src="'+ imagenes[0] +'" name="visor" width="350px" height="280px" ></td></tr>')
write('<tr><td align="center">')
write('<input type="button" onclick="irInicio();" value="|<<" title="Inicio">')
write('<input type="button" onclick="anterior();" value="<<" title="Anterior">')
write('<input type="button" onclick="siguiente();" value=">>" title="siguiente">')
write('<input type="button" onclick="irFin();" value="|>>" title="ultimo">')
write('</td></tr></table><form>')
}
}

</script>
</head>
<body>
<div align="center">
<script language="JAvaScript">

pintaVisor();
</script>


This is not taking me very far, o if you can improve it, totally write something new, some advise, etc, whatever is welcome...

Also I cannot make this script work in a blog...you know why?

ok, thank you!
I am a lvl 89 sword barb

User avatar
Gunfingers
Posts: 2401
Joined: Wed May 30, 2007 7:15 pm UTC

Postby Gunfingers » Fri Jul 27, 2007 5:25 pm UTC

Something that i threw together. I believe the specific problem you were having is that you can't declare arrays like that.

Code: Select all

<html>
   <head>
      <title>
         Picya!
      </title>
   </head>
   <body onLoad="javascript:last()">
      <form name="formula">
         <table cellspacing="1" cellpadding="4" bgcolor="#c0c0c0">
            <tr>
               <td align="center" bgcolor="white" width="350px" height="280px">
                  <img src="" id="pic" width="350px" height="280px" >
               </td>
            </tr>
            <tr>
               <td align="center">
                  <input type="button" onclick="javascript:first()" value="|<<" title="left">
                  <input type="button" onclick="javascript:back()" value="<<" title="back">
                  <input type="button" onclick="javascript:next()" value=">>" title="next">
                  <input type="button" onclick="javascript:last()" value="|>>" title="last">
               </td>
            </tr>
         </table>
      <form>
   </body>
</html>
<script language="javascript">
var current = 0;
var pictures = new Array();
pictures[0] = "one.bmp";
pictures[1] = "two.bmp";
pictures[2] = "three.bmp";
pictures[3] = "four.bmp";

function first()
{
   alert (current);
   current = 0;
   document.getElementById("pic").src = pictures[0];
}
function back()
{
   if (current > 0)
   {
      current--;
      document.getElementById("pic").src = pictures[current];
   }
}
function next()
{
   if (current < pictures.length - 1)
   {
      current++;
      document.getElementById("pic").src = pictures[current];
   }
}
function last()
{
   current = pictures.length - 1;
   document.getElementById("pic").src = pictures[current];
}
</script>

Mask of Destiny
Posts: 11
Joined: Thu Jul 26, 2007 9:43 pm UTC
Location: CT, USA
Contact:

Postby Mask of Destiny » Fri Jul 27, 2007 6:49 pm UTC

Gunfingers wrote:Something that i threw together. I believe the specific problem you were having is that you can't declare arrays like that.

Sure you can.

From what I gather, the script "works" but needs improvement and doesn't work in a blog context. The latter problem probably has to do with the use of document.write. Instead of appending it's output to the existing document, it completely trashes what was already there. Using DOM methods to insert the comic and it's controls inside existing page elements would probably work better for that.

User avatar
Xanthir
My HERO!!!
Posts: 5426
Joined: Tue Feb 20, 2007 12:49 am UTC
Location: The Googleplex
Contact:

Postby Xanthir » Fri Jul 27, 2007 8:09 pm UTC

Nod. Don't use document.write. It's nearly never necessary. Instead, simply replace the appropriate dom elements directly. Something as simple as

Code: Select all

document.getElementByID('id').innerHTML = "<blah>stuff</blah>"
would work.

As well, don't use the code Gunfingers provided. ^_^ Using tables for layout purposes is a no-no. Instead, the html of the page should only contain data, wrapped in <span> and <div> tags. Your CSS file controls the layout of the page, then.

The reason why you had a hard time with a lot of code is because you're looking at sites built commercially, so they've got a lot of other business going on. Just as a random example of a simple but well-built site I ran into the other day, check the source for http://www.dinoleg.com. Notice how everything in the html is clean and spare, with divs and spans used to organize it. The actual layout of the page (what goes where and such) is in the CSS, which you can find here (it's in the very beginning of the source code). Notice how, say, the menubar up at the top is represented by a simple list in the code. That's good, because it means that later if they redesign the site to put the menubar vertically on the side, say, they won't have to change much. Just a few quick alterations to the CSS and you're done.

On the other hand, if they'd done it all with tables, they'd have to pretty much rewrite the entire thing to change the layout. This link is of a guy who builds the same site using tables first and then CSS. The result is that the table-based layout is still a bit more stable (every browser renders tables correctly, pretty much), while the CSS one required some twerking and still may not always render correctly (simply put, IE doesn't render stuff right). However, he notes that he would simply refuse to work on the table-based one if he had to change things around, while the CSS one is a simple matter to update and twerk.

User avatar
gaurwraith
Posts: 285
Joined: Fri Jul 27, 2007 3:56 pm UTC

Postby gaurwraith » Mon Jul 30, 2007 9:04 am UTC

Hey, thank you !
Going to play around with this, se what I end up with :)
I am a lvl 89 sword barb

User avatar
markfiend
Posts: 507
Joined: Fri Jul 06, 2007 9:59 am UTC
Location: UK (Leeds)

Postby markfiend » Fri Aug 03, 2007 3:44 pm UTC

Xanthir wrote:This link is of a guy who builds the same site using tables first and then CSS.
Hey, thanks for the link. 8)

*off to convert all my <table>s to css* :oops:

davej
Posts: 63
Joined: Tue Aug 14, 2007 7:08 pm UTC
Location: Arizona
Contact:

Use php/mysql

Postby davej » Thu Aug 16, 2007 5:04 pm UTC

You could easily use php and mysql to make this progam, I wouldn't even need to know much to do it. Go download wampserver and install it on your computer (sets up apache/mysql server automatically for you).

For the mysql make a database for your site, then make a table called comics. Then within the table, make fields called comicID, comicSRC, altText, and whatever else you want (altText wouldn't be needed but may help if you want). ComicSRC is the name of the image

With php, connect to the mysql server. Then plop the following in there to show the latest comic:

$id = $_GET['id'];
if(!isset($id)) {
$query = "SELECT comicID FROM comic ORDER BY comicID DESC LIMIT 1";
$query1 = mysql_fetch_row(mysql_query($query)) or die("Query Failed: ". mysql_error());
$id = $query1['comicID'];
}

showcomic($id);

function showcomic($id) {
$last = $id - 1;
$next = $id + 1;
$query = "SELECT * FROM comic WHERE comicID = ".$id;
$query1 = mysql_fetch_row(mysql_query($query)) or die("Query Failed: ". mysql_error());
echo '<img src="'.$query1['comicSRC'].'" alt="'.$query1['comicALT'].'">';
echo '<br>';
echo '<a href="'.$_SERVER['PHP_SELF'].'?id='.$last.'">Previous</a> | Current |';
echo '<a href="'.$_SERVER['PHP_SELF'].'?id='.$next.'">Next</a>';
}



This code assumes that your comicID autoincrements (should be the key in the database), as to get the next and previous comic link I only added one or subtracted one. If that is not the case, then you'd have to do it a little differently. You could also do this without using a database if you want. I could write something up for that if you are interested. At work right now so I can't do too much.

Hope that helped.

Pearsquisher
Posts: 28
Joined: Tue Jul 08, 2008 2:54 pm UTC

Re: I need Standard Comics html

Postby Pearsquisher » Fri Jul 18, 2008 2:37 am UTC

I am also thinking of experimenting with a webcomic, and I was wondering how to set up a webpage for it. This thread seems to be perfect, especially the second post (the one by gunfingers). However, I have no experience with coding (or very little at least), so I require a little more help. Would I put the comic images in the same folder as the html document, with the names 1.jpg, 2.jpg, 3.jpg ... ?

Vielen Dank to anyone who helps. This is my first time bumping an old thread, so I offer my apologies if I did wrong.

User avatar
Gunfingers
Posts: 2401
Joined: Wed May 30, 2007 7:15 pm UTC

Re: I need Standard Comics html

Postby Gunfingers » Fri Jul 18, 2008 5:48 pm UTC

Where you put the images relative to the HTML document isn't important, you just have to use the relative path.

For example, if they are in the same folder, then the relative path is just the file name (1.jpg, 2.jpg, etc)

If they are in a subfolder called "images" (or whatever), then the relative path is the subfolder plus the filename (images/1.jpg, images/2.jpg, etc). If there are subfolders of subfolders, add them in (images/comics/1.jpg, images/comics/2.jpg, etc) would work if they are in the comics folder, which is a subfolder of the images folder, which is a subfolder of the folder with the HTML document.

To go up use "..". For example, say you have two folders in the root. One folder contains the html document. The other contains the pictures. For this you use (../images/1.jpg, ../images/2.jpg, etc).

Pearsquisher
Posts: 28
Joined: Tue Jul 08, 2008 2:54 pm UTC

Re: I need Standard Comics html

Postby Pearsquisher » Sat Jul 19, 2008 1:45 pm UTC

Okay, perhaps I need to explain myself a little more.

I am looking to make a website, which can cycle through a number of pictures without me having to change the code each time. So if I have 1, 2 and 3 uploaded, it will display 3 as current, and beable to cycle through them with the first, previous, next, and last buttons. A random button would also be nice. Pretty much I want a website that can do just what xkcd does. How do I do that?

If the code you posted can do that, then what is the relative path of the comics? (I cannot tell from looking at the code)

Thanks again for helping. I'm a new member here, so hopefully this isn't too much to ask (also I'm sure it is the right place to ask).

User avatar
Gunfingers
Posts: 2401
Joined: Wed May 30, 2007 7:15 pm UTC

Re: I need Standard Comics html

Postby Gunfingers » Sat Jul 19, 2008 5:51 pm UTC

Yes, that is what the code does. Except for randomization. I don't think javascript has randomization, but here's some code that will take care of that.

Code: Select all

function random()
{
   current = 4;
   document.getElementById("pic").src = pictures[current];
}


As for your relative path i'm not sure. Describe to me your website's folder structure. That's how i would know the relative path.

User avatar
xulaus
Posts: 136
Joined: Thu Jul 03, 2008 11:09 am UTC

Re: I need Standard Comics html

Postby xulaus » Sat Jul 19, 2008 9:05 pm UTC

Gunfingers wrote:

Code: Select all

function random()
{
   current = 4;
   document.getElementById("pic").src = pictures[current];
}

Heres better random function:

Code: Select all

function random(){
  current=Math.floor(Math.random()*pictures.length);
  document.getElementById("pic").src = pictures[current];
 }

Gunfingers wrote:I don't think javascript has randomization

Tsk, you'll be saying it can't handle form data next. Then it will be out with the >4kb librarys and "But JavaScript isn't a real language".
Meaux_Pas wrote:I don't even know who the fuck this guy is

Pearsquisher
Posts: 28
Joined: Tue Jul 08, 2008 2:54 pm UTC

Re: I need Standard Comics html

Postby Pearsquisher » Sun Jul 20, 2008 12:38 am UTC

Gunfingers wrote:As for your relative path i'm not sure. Describe to me your website's folder structure. That's how i would know the relative path.


I haven't started making it yet, and I don't really know where to start. I think the best folder structure would be having all the comics in a folder called "comics".

I don't actually know anything about javascript, so I don't know how to apply that code to the text "random" as it is on the xkcd page.

User avatar
Gunfingers
Posts: 2401
Joined: Wed May 30, 2007 7:15 pm UTC

Re: I need Standard Comics html

Postby Gunfingers » Sun Jul 20, 2008 1:02 am UTC

To be honest, you may want to do some research in general. This is some pretty basic stuff that you'll want to get a grasp on before you try to start a website.

W3Schools has a lot of good information on HTML and javascript. Check them out, and hit us up if you have any questions. They don't specifically cover filepaths, but you should be able to pick it up reading their stuff.

Pearsquisher
Posts: 28
Joined: Tue Jul 08, 2008 2:54 pm UTC

Re: I need Standard Comics html

Postby Pearsquisher » Sun Jul 20, 2008 3:07 pm UTC

Thanks. I try first before asking any more questions :P.


Return to “Coding”

Who is online

Users browsing this forum: No registered users and 6 guests