HTML Question: How to set up this image gallery...

[Cheshire Cat]

Dont know how to describe it in words, but I've seen it at a ton of websites with image galleries. Its for a section of art I want to do with info on the art itself. I made a diagram of it below:

http://cheshirechamber.batcave.net/index.html

Whats the coding to set this up? The spacing in between and around should have a border running through it. (and the "image" refers to a thumbnail, not the full size illo)

 

[qjakal]

Here's a possible set of code for the images.....

<IMG SRC="picname.gif" WIDTH="100" HEIGHT="200" ALT="This is a test" BORDER="2">

IMG SRC="picname.gif" WIDTH="100" HEIGHT="200" ALT="This is a test" BORDER="2

I left the first & last symbol(< >) and " off the code in the text example so you can see it...


Obviously you can vary the attributes, including the border size as needed with this, and adjust your pic size as well. Many spots have pre-programmed edit features in place already though, and don't accept anything but simple html. Have you checked out freewebspace.com and 50megs.com ? Pretty simple to use, imo. Q

 

[Cheshire Cat]

Huh??

I dont see anything....two broken images with the (x) in the corners. Can you maybe post a notepad file to link to/download?

 

[qjakal]

Just a test...

I didn't stick an image in..lol..that's the easy part, mate! Just put your image properties in where it says "picname.gif". Check out those websites though, they're free and easy to configure and edit. Q

 

[Marauder]

This is one way to do it:

<CENTER><TABLE WIDTH="95%" BORDER="0" CELLPADDING="5" CELLSPACING="0" VALIGN="CENTER"><TR HEIGHT="100"><TD BGCOLOR="#000000" WIDTH="120" ALIGN="CENTER"><A HREF="http://www.cerebral-static.de/smilies/smilie_mistgabel01.gif"><IMG SRC="http://www.cerebral-static.de/smilies/smilie_mistgabel01.gif"></A></TD><TD WIDTH="5"></td><TD BGCOLOR="#000000"><FONT SIZE="2" COLOR="#FFFFFF" FACE="ARIAL">A smilie with a pitchfork doing nasty things to another smilie.</FONT></TD></TR><TR HEIGHT="10"><TD COLSPAN="3"></TD></TR><TR HEIGHT="100"><TD BGCOLOR="#000000" WIDTH="120" ALIGN="CENTER"><A HREF="http://www.cerebral-static.de/smilies/smilie_schlumpf.gif"><IMG SRC="http://www.cerebral-static.de/smilies/smilie_schlumpf.gif"></A></TD><TD WIDTH="5"></td><TD BGCOLOR="#000000"><FONT SIZE="2" COLOR="#FFFFFF" FACE="ARIAL">A smilie doing the one right thing.</FONT></TD></TR><TR HEIGHT="10"><TD COLSPAN="3"></TD></TR><TR HEIGHT="100"><TD BGCOLOR="#000000" WIDTH="120" ALIGN="CENTER"><A HREF="http://www.cerebral-static.de/smilies/smilie_staub.gif"><IMG SRC="http://www.cerebral-static.de/smilies/smilie_staub.gif"></A></TD><TD WIDTH="5"></td><TD BGCOLOR="#000000"><FONT SIZE="2" COLOR="#FFFFFF" FACE="ARIAL">A happy smilie bouncing bouncing BOUNCING on a dusty couch.</FONT></TD></TR></TABLE></CENTER>

The code is:

<CENTER>
<TABLE WIDTH="95%" BORDER="0" CELLPADDING="5" CELLSPACING="0" VALIGN="CENTER">
	<TR HEIGHT="100">
		<TD BGCOLOR="#000000" WIDTH="120" ALIGN="CENTER">
			<A HREF="http://www.cerebral-static.de/smilies/smilie_mistgabel01.gif"><IMG SRC="http://www.cerebral-static.de/smilies/smilie_mistgabel01.gif"></A>
		</TD>
		<TD WIDTH="5"></td>
		<TD BGCOLOR="#000000">
			<FONT SIZE="2" COLOR="#FFFFFF" FACE="ARIAL">A smilie with a pitchfork doing nasty things to another smilie.</FONT>
		</TD>
	</TR>
	<TR HEIGHT="10"><TD COLSPAN="3"></TD></TR>
	<TR HEIGHT="100">
		<TD BGCOLOR="#000000" WIDTH="120" ALIGN="CENTER">
			<A HREF="http://www.cerebral-static.de/smilies/smilie_schlumpf.gif"><IMG SRC="http://www.cerebral-static.de/smilies/smilie_schlumpf.gif"></A>
		</TD>
		<TD WIDTH="5"></td>
		<TD BGCOLOR="#000000">
			<FONT SIZE="2" COLOR="#FFFFFF" FACE="ARIAL">A smilie doing the one right thing.</FONT>
		</TD>
	</TR>
	<TR HEIGHT="10"><TD COLSPAN="3"></TD></TR>
	<TR HEIGHT="100">
		<TD BGCOLOR="#000000" WIDTH="120" ALIGN="CENTER">
			<A HREF="http://www.cerebral-static.de/smilies/smilie_staub.gif"><IMG SRC="http://www.cerebral-static.de/smilies/smilie_staub.gif"></A>
		</TD>
		<TD WIDTH="5"></td>
		<TD BGCOLOR="#000000">
			<FONT SIZE="2" COLOR="#FFFFFF" FACE="ARIAL">A happy smilie bouncing bouncing BOUNCING on a dusty couch.</FONT>
		</TD>
	</TR>
</TABLE>
</CENTER>

That's the easiest way while still moving in the strictly HTML environment. It can cause problems with some browsers, especially older Mozilla versions, since those have trouble displaying table data fields that contain no data. To optimize the look for all browsers, it might be a good idea to branch out into Style sheets. It would also be possible to forego the table and do the entire presentation with Divisions that are assigned absolute positions. It's all a question of how much work you want to put into it.

If you need help, I'd be glad to assist you.

 

[qjakal]

Oh, thats' the way it's gonna be, eh?

It's an HTML Javascript kinda war, eh? Alrighty then, here we go. I like the boxes up there, but they're awfully looooooong. That image stuff is overrated anyway...here's a fun one with text, and if the browsers support it we can do cursors next. Meanwhile, try this little piece of "magic" out...😉 Q

<FORM>
<INPUT TYPE="button" VALUE="blue" ONCLICK="document.fgColor='blue'">
<INPUT TYPE="button" VALUE="red" ONCLICK="document.fgColor='red'">
<INPUT TYPE="button" VALUE="purple" ONCLICK="document.fgColor='purple'">
<INPUT TYPE="button" Value="yellow" ONCLICK="document.fgColor='yellow'">
<INPUT TYPE="button" VALUE="green" ONCLICK="document.fgColor='green'">
</FORM>

 

[twinkletoes78]

WOW! that is awesome!!!! How do you do that? Where can I learn that, please tell me🙂

Twinkletoes

How can I add a picture of myself and a logo photo?

 

[qjakal]

Hi...

To add an image or text to your signature, you would go the the banner at the top of the intro page, hit "Profile", then "edit profile" and then go to the signature box. For text you just need to type into this area. For an image, you'll need the address of your hosted picture framed with

[img] and [/img]

When you're done, hit "Submit Modifications" at the bottom. Hope that helped...

Q

 

[twinkletoes78]

thank you Qjakal. Now I will try that and hope I don't goof it up!
How do you get it in the rised box? 🙁

 

[qjakal]

First things first...

Get that far first...lol, ok? The 3D boxes are a bit of more complicated html. If you're still interested afterwards in getting that effect, PM me and I'll discuss the coding with you, ok? Good luck on getting your signature setup, and if you're looking for a customized image, just post a thread in the general discussion forum asking Venray, our resident artiste for a bit of help or inspiration. He's done most of the crazy pics you see around here along with his wife Venraya... Q

 

[twinkletoes78]

once again Qjakal thank you! You have been most helpful. I feel like a doofus but hey if you don't ask! LOL thanks again

 

[qjakal]

Nicely done...

I see you already have the raised box...very nicely done! As for asking questions, it's still the best way to learn ever invented... Q

 

[twinkletoes78]

Re: Nicely done...

I see you already have the raised box...very nicely done! As for asking questions, it's still the best way to learn ever invented... Q

LOL <blushing> it's been so long since I've used html. It took me a couple of times to get it right! 🙂 but I got it, thanks Q🙂

 

[Marauder]

Alright, q, you win. I'm not going to put an applet on this page - no time. And, please, NO CURSORS!!! Not on a forum-generated page! Do you have any idea what that would do to the load time of this thread? hehehe... well, now that I think about it... *code code*

 

[qjakal]

I noticed...

Yeah...tried a few cursor effects, and even the simple ones are murder. Not sure about "winning"...lol..I've seen your stuff elsewhere, and you're a few levels above my hacked up bits and pieces. Damn young geniuses..*grumble*. I DO have a nice "fade in/out effect that might not be too laggy. Maybe we should have an HTML javascripts section for giggles....>? Q

 

[Marauder]

Fade effects sound like DHTML. Am I correct? Those do some interesting things with non-IE browsers... If you want a few chuckles, open a DHTML page while a benchmark proggy is marking processor load and gasp in awe at the strain simple graphic effects can have on clock time and memory ressources 🙂

 

[qjakal]

Check the code out on this...(Marauder that is)

<HEAD>
<meta http-equiv="Page-Enter" content="revealTrans(Duration=4,Transition=2)">
<meta http-equiv="Page-Exit" content="revealTrans(Duration=4,Transition=2)"> </HEAD>

The first <meta> tag controls the fade in effect, and second <meta> tag controls the fade out effect.

The first duration value is the control for the time lapse, and the Transition refers to the effect produced. There's 15 of them, and if you leave it set to the word transition itself, repeated, instead of a numerical value, you get a random effect selected...pretty cool. Q

 

[Marauder]

Yep, I know those 🙂 Too bad my browser won't display them. But nifty!