How can I get html to notice size of an image [Archive]

dance621

07-04-2006, 02:17 PM

Hi, I am trying to make a webpage that users can view an art image with a border (mount) and frame of their choice. So they will select a mount and then a type of frame. When they click enter it will look like a framed print on a wall. I thought the best place to start would be with tables. A major problem is that all prints are different sizes so some will be 400x200 and some will be 300x400. It would really help if the code can take note of the size so that it can be used for establishing width of tables. Is it possible? any other smart ideas about how to achieve this would be much appreciated. I have only picked HTML cos that is just about all I understand (and not much). Other people who have done this seem to have been a bit more hard core with javascript and flash. Thanks, James

felgall

07-04-2006, 03:06 PM

Nothing in what you are trying to do that requires a table. You should be able to create picture frames directly around images using CSS that will work completely independently of the size of the picture. If that doesn't allow you to get fancy enough then you could put the image inside a div and style the div as well.

dance621

07-04-2006, 04:17 PM

Thanks for the reply. Would css around the picture be able to handle multiple layers? In fact there are three layers to a frame, 1) an inner border, 2) an outer border and 3) the frame itself. Would css or the div be able to handle that?

dance621

07-05-2006, 11:29 AM

I again, OK stuck with the tables because really didnt know where to start with the div styling. Made some progress but now in a bit of a muddle. I am trying to develop a picture framing webpage where you can select different frames and inner mounts with clicks (there will be a thumbnail gallery). The problem is that because all paintings are different sizes I have to use image backgrounds to cells so that they tile. Then they can expand or shrink to fit long thin pictures or square pictures etc.
How would I code so that the background will change when a onclick event elsewhere on the screen occurs.

The inserved image is swapping OK but as a background it is not. I thought it might be this but it does not seem to work.

<TD width=30 background=http://www.hardyart.co.uk/frame/tl.jpgname="image1"></TD>

Here is what I have so far.... Thanks, James

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Trellian WebPAGE">
<TITLE>Enter Page Title Here</TITLE>
<SCRIPT LANGUAGE="JavaScript">


</script>

</HEAD>
<BODY><A onclick="image0.src='http://www.hardyart.co.uk/frame/frame2.jpg'; image1.src='http://www.hardyart.co.uk/frame/2-tl.jpg';image2.src='http://www.hardyart.co.uk/frame/2-long-hor1.jpg';" onmouseout="image0.src='http://www.hardyart.co.uk/frame/frame1.jpg'; image1.src='http://www.hardyart.co.uk/frame/tl.jpg';image2.src='http://www.hardyart.co.uk/frame/long-hor1.jpg';" href="#"><IMG
src="http://www.hardyart.co.uk/frame/frame1.jpg" name=image0></A>
<TABLE cellSpacing=0 cellPadding=0 width=* border=0>
<TBODY>
<TR>
<TD width=30 background=http://www.hardyart.co.uk/frame/tl.jpg
name="image1"></TD>
<TD width=50 colSpan=7><IMG
src="http://www.hardyart.co.uk/frame/long-hor1.jpg" border=1
name=image2></TD>
<TD width=30 background=http://www.hardyart.co.uk/frame/tr.jpg></TD></TR>
<TR height=50>
<TD width=30 background=http://www.hardyart.co.uk/frame/long-vert.jpg
rowSpan=7></TD>
<TD bgColor=#f5f7ec colSpan=7></TD>
<TD width=30 background=http://www.hardyart.co.uk/frame/long-vert.jpg
rowSpan=7></TD></TR>
<TR height=5>
<TD width=50 bgColor=#f5f7ec rowSpan=5></TD>
<TD background=http://www.hardyart.co.uk/frame/slip-hor1.jpg colSpan=5></TD>
<TD width=50 bgColor=#f5f7ec rowSpan=5></TD></TR>
<TR height=15></TD>
<TD width=5 background=http://www.hardyart.co.uk/frame/slip-vert.jpg
rowSpan=3></TD>
<TD width=15 bgColor=white></TD>
<TD bgColor=white></TD>
<TD width=15 bgColor=white></TD>
<TD width=5 background=http://www.hardyart.co.uk/frame/slip-vert.jpg
rowSpan=3></TD></TD></TR>
<TR></TD></TD>
<TD bgColor=white></TD>
<TD bgColor=#ffcc66><IMG src="C:\Documents and Settings\James\My Documents\316.JPG"></TD>
<TD bgColor=white></TD></TD></TD></TR><TRHEIGHT="20">
<TR height=35></TD></TD>
<TD bgColor=white></TD>
<TD bgColor=white>
<P align=center><FONT face=Rockwell color=gray size=1>brownBELL COAST BY
DAVID DIPNALL</FONT></P></TD>
<TD bgColor=white></TD></TD></TD></TR>
<TR height=5></TD>
<TD background=http://www.hardyart.co.uk/frame/slip-hor1.jpg
colSpan=5></TD></TD></TD></TR>
<TR height=50>
<TD bgColor=#f5f7ec colSpan=7></TD></TD></TR>
<TR>
<TD background=http://www.hardyart.co.uk/frame/bl.jpg height=30></TD>
<TD background=http://www.hardyart.co.uk/frame/long-hor.jpg colSpan=7></TD>
<TD
background=http://www.hardyart.co.uk/frame/br.jpg></TD></TR></TBODY></TABLE>

</BODY>
</HTML>