Jump to content
aberdeen-music

question for webdesigners


framheim

Recommended Posts

how do i do this:

http://www.michaelwilliams.co.uk/portfolio/mrwportfolio/portfoliooasis01.htm

in dreamweaver. and you'll have to explain it in very simple terms as i'm a bit crap at this. i'm trying to make a website for my location project at college and i want the thumbnails down the left hand side and when you click them the main image will change. i think CSS is the key but i don't really know what to do with it.

Link to comment
Share on other sites

it's using javascript to preload the images and then an onclick event to do the image swap I believe. you should be able to find a simple example on the web or if not I can lend you a book with the exact same thing in it

Link to comment
Share on other sites

how do i do this:

http://www.michaelwilliams.co.uk/portfolio/mrwportfolio/portfoliooasis01.htm

in dreamweaver. and you'll have to explain it in very simple terms as i'm a bit crap at this. i'm trying to make a website for my location project at college and i want the thumbnails down the left hand side and when you click them the main image will change. i think CSS is the key but i don't really know what to do with it.

The layout should be simple enough' date=' a table, 3 rows. Split the middle row into 2 columns, one side 60% width, 40% the other. Insert another table in the smaller column for your thumbnails. With regards to swapping the images, theres nothing very smart going on there (quite the opposite) He's just saved that page a load of times with each different image and linked to all those different htm files. What a waste, and a pain to update.

Check this...rip off the code if you like

[url']http://www.keilan.freeserve.co.uk/definitechoice/gallery.htm

I used javascript to handle the swapping of the images. The javascript is here. http://www.keilan.freeserve.co.uk/definitechoice/gallery.js All it basically does is preload all the images and change the image in the middle as it has been defined with a name, as have all the preloaded images. So you just need to add the simple link "javascript:viewImage('pic6')" ... far less time consuming. You should be able to hack it together if you view the source of the gallery page and paste in the javascript! Good luck.

Try this for your layout

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.style1 {font-family: Georgia, "Times New Roman", Times, serif}
-->
</style>
</head>

<body>
<table width="600" border="0" cellspacing="2" cellpadding="2">
<tr>
<td colspan="2"><span class="style1">My Photography | Portfolio </span></td>
</tr>
<tr>
<td width="400" align="center" valign="top"><img src="NULL.gif" width="350" /></td>
<td width="200" valign="top"><table width="160" border="0" align="center" cellpadding="2" cellspacing="2">
<tr>
<td width="40"><img src="NULL.gif" width="40" height="40" /></td>
<td width="40"><img src="NULL.gif" alt="s" width="40" height="40" /></td>
<td width="40"><img src="NULL.gif" alt="s" width="40" height="40" /></td>
<td width="40"><img src="NULL.gif" alt="s" width="40" height="40" /></td>
</tr>
<tr>
<td width="40"><img src="NULL.gif" alt="s" width="40" height="40" /></td>
<td width="40"><img src="NULL.gif" alt="s" width="40" height="40" /></td>
<td width="40"><img src="NULL.gif" alt="s" width="40" height="40" /></td>
<td width="40"><img src="NULL.gif" alt="s" width="40" height="40" /></td>
</tr>
<tr>
<td width="40"><img src="NULL.gif" alt="s" width="40" height="40" /></td>
<td width="40"><img src="NULL.gif" alt="s" width="40" height="40" /></td>
<td width="40"><img src="NULL.gif" alt="s" width="40" height="40" /></td>
<td width="40"><img src="NULL.gif" alt="s" width="40" height="40" /></td>
</tr>
<tr>
<td width="40"><img src="NULL.gif" alt="s" width="40" height="40" /></td>
<td width="40"><img src="NULL.gif" alt="s" width="40" height="40" /></td>
<td width="40"><img src="NULL.gif" alt="s" width="40" height="40" /></td>
<td width="40"><img src="NULL.gif" alt="s" width="40" height="40" /></td>
</tr>
<tr>
<td width="40"><img src="NULL.gif" alt="s" width="40" height="40" /></td>
<td width="40"><img src="NULL.gif" alt="s" width="40" height="40" /></td>
<td width="40"><img src="NULL.gif" alt="s" width="40" height="40" /></td>
<td width="40"><img src="NULL.gif" alt="s" width="40" height="40" /></td>
</tr>

</table></td>
</tr>
<tr>
<td colspan="2"><div align="center" class="style1">Home | Contact | Biography | Archive </div></td>
</tr>
</table>
</body>
</html>

Link to comment
Share on other sites

He's just saved that page a load of times with each different image and linked to all those different htm files. What a waste' date=' and a pain to update.

[/quote']

oh yeah, so he has. Should have noticed that but I just glanced at the source and saw some javascript functions to do the swap. So he's using javascript to swap the html files, I agree that's shit. What I said (and you said in your post) is a better way to do it.

Link to comment
Share on other sites

cool, thanks folks. i'll give those a bash this weekend and if it's not working out i'm sure a certain brother of mine who lives but a few doors down could come and fix it for me, right chris?:p

that simpleviewer application looks nifty, but it may be cheating slightly. i'll probably download it for me own use though. ta for that.

Link to comment
Share on other sites

cool' date=' thanks folks. i'll give those a bash this weekend and if it's not working out i'm sure a certain brother of mine who lives but a few doors down could come and fix it for me, right chris?:p

[/quote']

aside from playing sensi all weekend, I have no plans so it's possible.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...