Script and Table Confusion! Help!!

  • the_atom
  • Beginner
  • Beginner
  • User avatar
  • Posts: 64
  • Loc: Scotland

Post 3+ Months Ago

I've already posted about the following but I think I made my post look too complicated so forgive me for trying another, more simple approach!

I'm trying to set up a web page using Dynamic Drive's 'Image Thumbnail Viewer II'. It allows the visitor to simply 'rollover' the thumbnail and view the 'big pic' beside it.

I've managed to get the script to work with my images but I don't know how to achieve the layout I want.

For example, I want 14 thumbs (each 30x30px) in 2 colums on the left and I want the 'big images' to open in a cell/table or whatever, on the right of the thumbs. I've tried but the images jump around on rollover!
If I can just get the layout right for one page, the rest of my site will be a lot easier to build.
I think part of the problem is not knowing where to put the size of the biggest picture.

I'm using tables as I don't really know any other way.
Any advice from you would be most welcome!
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Managedlinks
  • Proficient
  • Proficient
  • Managedlinks
  • Posts: 294

Post 3+ Months Ago

Hi

is the page online ?. If I can see it I may be able to help.

rollover images ussually work like this

putting the mouse over the thumbnail triggers a javascript action.

this action then loads the image into a NAMED image tag

this named image tag can be anywhere on the page, if the images are of varying sizes it is best not to set the size
if they are always the same size then it is best to set the size to prevent the page from trying to resize itself

also often the images are preloaded which will generally cause slow responses and confusion
  • the_atom
  • Beginner
  • Beginner
  • User avatar
  • Posts: 64
  • Loc: Scotland

Post 3+ Months Ago

http://www.mohawks.pwp.blueyonder.co.uk/index.htm

Hiya! I've just put a test page online at the above.
Click on 'Coming Soon'.
You'll see what I mean about the pics jumping around...please help me fix it!
Many thanks for your interest.
  • Managedlinks
  • Proficient
  • Proficient
  • Managedlinks
  • Posts: 294

Post 3+ Months Ago

The test page is terminally broken sorry

the links to the actual images point to your "c" drive not the actual location on your server

for example the line
dynimages[0]=["C:/mysites/portfolio/images/leopcat-b.jpg", ""]

should read
dynimages[0]=["images/leopcat-b.jpg", ""]

that way the users browser can find them at
http://www.mohawks.pwp.blueyonder.co.uk ... pcat-b.jpg etc...

All the images on that page appear to have the same problem

By The Way

Great artwork I am impressed :)
  • the_atom
  • Beginner
  • Beginner
  • User avatar
  • Posts: 64
  • Loc: Scotland

Post 3+ Months Ago

Thanks again ML.
How do I get the links to go to the images on my server instead of C:/ ?
I've tried changing the html but the pics just disappear!

I think I've also conquered the layout prob. See what you think.
  • Managedlinks
  • Proficient
  • Proficient
  • Managedlinks
  • Posts: 294

Post 3+ Months Ago

Hi

All you need to do is find every occurance of "C:/mysites/portfolio/" and delete it

this should then just leave behind "images/leopcat-b.jpg" etc

how it works is this...
The users browser loads your page and looks for the images

if the browser sees - C:/mysites/portfolio/images/leopcat-b.jpg it tries to find those images on the USERS computer not your website

BUT if it sees - images/leopcat-b.jpg
it recognises that as a "relative" address relative to the website that is, so it adds the website address
http://www.mohawks.pwp.blueyonder.co.uk/ + images/leopcat-b.jpg

and looks there for the image which of course it finds
http://www.mohawks.pwp.blueyonder.co.uk ... pcat-b.jpg

does that make sense?

I will pm the actual page to you. its too long to add here

all I did was use a find/replace function to delete all the unwanted text
  • the_atom
  • Beginner
  • Beginner
  • User avatar
  • Posts: 64
  • Loc: Scotland

Post 3+ Months Ago

Thank you thank you thank you!
I think we've done it ML!
I'm working on the other 'mini' galleries as we speak!
Please tell me it's all correct now...
Thank you.
  • Managedlinks
  • Proficient
  • Proficient
  • Managedlinks
  • Posts: 294

Post 3+ Months Ago

Yep its great.

Is that your artwork? looks fantastic you obviously like big cats (and some of the littler ones)

I am glad I could help
  • the_atom
  • Beginner
  • Beginner
  • User avatar
  • Posts: 64
  • Loc: Scotland

Post 3+ Months Ago

Yes - it's all mine...there's still a lot to be published!
I'm trying to put the art in groups of 'mini galleries' - that's why I had to get the first one right!
It's basically my online portfolio and hopefully, will attract some work!
I'm unemployed and have been for a while and that's no fun in UK! (no fun anywhere I s'pose - hitting 40 don't help either! :cry: ). I feel like life is passing me by...I desperately need some positive change in my life!

Anyhoo, that's why my site is so important to me.
You're help means so much to me.
  • Managedlinks
  • Proficient
  • Proficient
  • Managedlinks
  • Posts: 294

Post 3+ Months Ago

They say life starts at 40. I am still waiting.....

but the artwork is great, So you should find plenty of takers

I am in the process of starting a new website myself unfortunately I have zero graphical ability. it looks pretty sad.

But if you are interested it may help in promoting your own website. just click the WWW sign below.

Sorry if this sounds like spam I don't want it to. its just that getting new sites recognised is something my system should do very well.
  • the_atom
  • Beginner
  • Beginner
  • User avatar
  • Posts: 64
  • Loc: Scotland

Post 3+ Months Ago

Hiya ML!
Before I begin I want you to know that it's 2.50am right now and I'm now thinking more than I'm typing!
I just had a wee look at your site and and thought simetimes it's refreshing to see the simplicity of things.
Your site does the job it's meant to...but being the 'arty type', I must confess that I prefer a bit more colour - maybe a couple of graphics but not too much. Hope you dont mind me saying!

I'm no web designer, I've done 3 so far including my own which I just deleted and am in the process of replacing (with your help off course!).

However if I can help you in any way, I will, That's what life should be about eh!
On that note.....bed beckons.
I'm off.
Byeee
  • the_atom
  • Beginner
  • Beginner
  • User avatar
  • Posts: 64
  • Loc: Scotland

Post 3+ Months Ago

I've posted another few pages...
How do I use the space either side (and possibly a bit at the top or bottom?)

So far I've managed to insert image titles by extending the table, but I want to place a nav bar on one side and maybe a logo+ on the other.

Sounds simple eh?
As always, I'd value some input.
  • Managedlinks
  • Proficient
  • Proficient
  • Managedlinks
  • Posts: 294

Post 3+ Months Ago

Hey Happy Easter.

I checked out some of your new work, excellent and some was very sensual.

I take it the pages are automatically generated by the thumbnail program.

going the next step means learning all about html. I recommend getting a good WSIWYG editor
(what you see is what you get)
Hand coding html is a chore.
Personally I use dreamweaver 4 but it is expensive and outdated now so perhaps you could get opinions from others who are more up to date on the subject than this rusty old machine.

The website design forum may help and there is another forum I visit sometimes called htmlforums.com they have very helpful people there.

Having said that I would feel remiss if I didnt at least give you some basic help.

if you look at the code of your pages you will see the "back" "next" links

to pretty them up a little, change them slightly from...
Code: [ Select ]
<a href="index.htm">&lt;back</a>&nbsp;

      </center>
  
   </center>
     <p align="right"><a href="page_wildlife.htm">next&gt;</a></p>
  1. <a href="index.htm">&lt;back</a>&nbsp;
  2.       </center>
  3.   
  4.    </center>
  5.      <p align="right"><a href="page_wildlife.htm">next&gt;</a></p>


To...

Code: [ Select ]
<p>
<a href="index.htm">&lt;back</a> |
< a href="page_wildlife.htm">next&gt;</a></p>
  1. <p>
  2. <a href="index.htm">&lt;back</a> |
  3. < a href="page_wildlife.htm">next&gt;</a></p>


All this does is put them both on one line and seperate them with a '|'

for more positional control you need to use Tables or CSS. a friend of mine from html forums has a good site for some basic tutorial information at...
http://www.joe2kiss.btinternet.co.uk/v2/index.html

I find tables the most convenient form of controlling layout. the thumbnails on your page are positioned using tables (think squares or spreadsheet)

a basic table is this
Code: [ Select ]
<table border="1">
<tr>
<td>Hi</td>
<td>There</td>
<tr>
</table>
  1. <table border="1">
  2. <tr>
  3. <td>Hi</td>
  4. <td>There</td>
  5. <tr>
  6. </table>


Add that code to a page and you will see a table with two columns

to get greater control you can put tables inside table cells

Nuff Said

:)
  • Managedlinks
  • Proficient
  • Proficient
  • Managedlinks
  • Posts: 294

Post 3+ Months Ago

I am a fiddler and can't leave well enough alone :(

To take the above example one step further and create a mini menu which just has the back next links in it use the following code in your pages
Code: [ Select ]
<table border="1">
<tr>
<td><a href="index.htm">&lt;back</a></td>
<td><a href="page_wildlife.htm">next&gt;</a></td>
<tr>
</table>
  1. <table border="1">
  2. <tr>
  3. <td><a href="index.htm">&lt;back</a></td>
  4. <td><a href="page_wildlife.htm">next&gt;</a></td>
  5. <tr>
  6. </table>
<table border="1">
<tr>
<td><a href="index.htm">back</a></td>
<td><a href="page_wildlife.htm">next</a></td>
<tr>
</table>OR
Code: [ Select ]
<table border="1">
<tr>
<td><a href="index.htm">&lt;back</a></td>
</tr>
<tr>
<td><a href="page_wildlife.htm">next&gt;</a></td>
<tr>
</table>
  1. <table border="1">
  2. <tr>
  3. <td><a href="index.htm">&lt;back</a></td>
  4. </tr>
  5. <tr>
  6. <td><a href="page_wildlife.htm">next&gt;</a></td>
  7. <tr>
  8. </table>
<table border="1">
<tr>
<td><a href="index.htm">back</a></td>
</tr>
<tr>
<td><a href="page_wildlife.htm">next</a></td>
<tr>
</table>
  • the_atom
  • Beginner
  • Beginner
  • User avatar
  • Posts: 64
  • Loc: Scotland

Post 3+ Months Ago

Hi ML,
Thanks for replying again - and for the suggestions. The 'back' and 'next' text links were only temp so that you could at least navigate what I'd published so far. I will change them so that they fit in with the rest.

Just to let you know I've been messing with the table idea - trial and error as usual. I've been working away all day and more and may have come up with a solution you'll be glad to know!
I hope to publish this possible solution in my 'test page' tommorrow coz it's too late again tonight. Although I can be a bit nocturnal, I tend to leave more technical stuff to a fresh start with a clear head, if you know what I mean!

Until then...yet again, thanks for your interest and time!
  • the_atom
  • Beginner
  • Beginner
  • User avatar
  • Posts: 64
  • Loc: Scotland

Post 3+ Months Ago

OK...here goes.
I've just published the test page I spoke of along with a few notes.
For those folks who have helped me so far, the notes are for you. The site is only available to you (and other forum members who may wish to help) and are purely to help explain my intentions and hopes for the site's development.

The CATS page is the one we discussed yesterday: how to include nav buttons etc. I know HTML-wise that it's probably a bit rough and there are certain bits I'm not sure about eg. the head of the page but...

Anyhoo. I'd really like you to have a wee look. I'm not quite 'there' yet but I'm getting nearer to what I want - with a bit tuck here and bit tweak there! (Sounds like me getting ready for a Saturday night out!)
If the CATS test page is generally ok, the rest of the pages will follow. As I explain on the home page, that's just one category: there's a lot more to come...eeek! What have I let myself in for?!

http://www.mohawks.pwp.blueyonder.co.uk/

Post Information

  • Total Posts in this topic: 16 posts
  • Users browsing this forum: No registered users and 126 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.