Image linking with URL?

[raindark]

Hello,

I know this has a name but I don't know what it is. I just put some pics on my front page and set up tables. I need to link those pics to the corresponding page. What files would I use to edit this. are there any tutorials on this?

Thanks

[miles]

im not sure if this what you asking for but try take a look at these pic's..

step 1: right click on the pic & click hyperlink
step 2: insert any url you like ex. www.mysite.com
step 3: click ok.

done.

[raindark]

Thank you but I'm looking more along the lines of putting a corresponding link to the image. For instance If someone goes to my site and clicks on the sale items page, I want the page to go to sale items and so on.

Thanks

[dbltoe]

First you say pics, then you say page.

If you meant pics, Miles gave you the answer.

Perhaps you could give a link for the page in question with a little better explanation of what you want to accomplish?

[raindark]

here is the link http://www.veryprrettythings.com

The colored boxes with the silhouettes in them , I would like for those to link to different pages.

Thanks

[dbltoe]

Without going on any rants about leaving tables or some of the many other things one could say in this case, I'll just do my usual and not try to take you away from where you're going but, help you on the path you've chosen.
Here's how the area you're talking about looks now. I've added line numbers and tabbed the listing to help in the visual aide.

1    <div id="indexDefaultMainContent" class="content">
2        <table border="0" width="80%" align="center">
3            <tr>
4                <td bgcolor="#D0ECEE" colspan="2" height="150">
5                    <h2>
6                        <img hspace="30" height="100" align="left" src="/includes/templates/classic/images/siloa.gif" alt="siloa" />
7                        <font size="5">
8                            <span style="font-family: gabrielle,arial,helvetica,sans-serif;">
9                                <span style="font-family: gabrielle,arial,helvetica,sans-serif;">
10                                    Welcome to Very Prretty Things...
11                                </span>
12                            </span>
13                        </font>
14                    </h2>
15                    <h2>
16                        <font size="+1">
17                            <span style="font-family: gabrielle,arial,helvetica,sans-serif;">
18                            </span>
19                        </font>
20                    </h2>
21                    <font size="+1">
22                        <span style="font-family: gabrielle,arial,helvetica,sans-serif;">
23                        <span style="font-family: gabrielle,arial,helvetica,sans-serif;">
24                            At this shop you will find unique, original artwork made into handbags, clutches, sunglass cases and more. So take a peek around and find your very pretty thing...
25                        </span>
26                            <br />
27                        </span>
28                    </font>
29                    <br />
30                </td>
31            </tr>
32            <tr>
33                <td bgcolor="#F7F6CA" width="40%" height="150">
34                    <img hspace="30" height="100" alt="silob" src="/includes/templates/classic/images/silob.gif" />
35                    <span style="font-family: gabrielle,arial,helvetica,sans-serif;">
36                        <br /><br />        
37                        <font size="4">
38                            Whats New?
39                        </font>
40                        <br />
41                    </span>
42                </td>
43                <td bgcolor="#C99BC6" rowspan="2">
44                    <img style="width: 202px; height: 136px;" src="http://www.veryprrettythings.com/includes/languages/english/images/turquoise clutch" alt="" />
45                    <img vspace="0" hspace="0" border="0" align="top" style="width: 202px; height: 150px;" src="http://www.veryprrettythings.com/includes/languages/english/images/red clutch" alt="" />
46                    <img style="width: 202px; height: 142px;" src="http://www.veryprrettythings.com/includes/languages/english/images/blue clutch" alt="" />
47                    <br />
48                </td>
49            </tr>
50            <tr>
51                <td bgcolor="#F3CDE3" height="150">
52                    <img hspace="30" height="100" src="/includes/templates/classic/images/siloc.gif" alt="siloc" />
53                    <br />
54                    <span style="text-decoration: underline;">
55                        <font size="4">
56                            <span style="font-family: gabrielle,arial,helvetica,sans-serif;">
57                                Sale Items!
58                            </span>
59                        </font><br />
60                    <span style="font-family: gabrielle,arial,helvetica,sans-serif;">
61                    </span>
62                    </span>
63                </td>
64            </tr>
65        </table>
66    </div> 

This helps me in the fact that I can quickly look down the list and see if the TDs and TRs "line up." If not, I know that I need to do something right away. (You might want to copy the above to something like Notepad to see it better.)
There are MANY things that can be done differently depending on one's preferences and styles. I'm sure there are others who would set this up differently but, here we go.

1. For table layout ease, take the colspan2 out of the first TD (line 4)
2. Move the H2 to line 7
3. Close the first TD and open a second at line 7
4. decide on using H2 or font to control text.
5. remove the span on line 8/12 or 7/11
6. remove lines 15 through 20 as they contain no data.
7. remove the span at lines 22/27 or 23/27
8. reconsider the breaks on lines 26 and 27
9. reconsider use of span and font as both are counterproductive to CSS control and will require actual coding to later change the "look."

Here's my suggestion for the first TR of the table with addition of CSS help. It turns the first 31 lines into 13.

1    <div id="indexDefaultMainContent" class="content">
2        <table class="ourMainTable">
3            <tr class="ourMainTr">
4                <td class="ourMainTdOne">
5                    <img src="/includes/templates/classic/images/siloa.gif" alt="siloa" />
6                </td>
7                <td class="ourMainTdTwo" rowspan="2">
8                    <h2 class="ourMainH2">
9                        Welcome to Very Prretty Things...
10                    </h2>
11                    <p class="ourMainParagraph">At this shop you will find unique, original artwork made into handbags, clutches, sunglass cases and more. So take a peek around and find your very pretty thing...</p>
12                </td>
13            </tr> 

"But," you say, "I still don't have a link." Here's how you add the link(s).

1    <div id="indexDefaultMainContent" class="content">
2        <table class="ourMainTable">
3            <tr class="ourMainTrOne">
4                <td class="ourMainTdOne">
5                    <a href="http://www.wherever.com"><img src="/includes/templates/classic/images/siloa.gif" alt="siloa" /></a>
6                </td>
7                <td class="ourMainTdTwo" rowspan="2">
8                    <a href="http://www.wherever.com"><h2 class="ourMainH2">
9                        Welcome to Very Prretty Things...
10                    </h2>
11                    <p class="ourMainParagraph">At this shop you will find unique, original artwork made into handbags, clutches, sunglass cases and more. So take a peek around and find your very pretty thing...</p></a>
12                </td>
13            </tr> 

Now we can go to the CSS and create the classes listed above. This will allow the control of the "look" from the stylesheet.
Continuing with the thought, the rest would look something like this.

14            <tr class="ourMainTrTwo">
15                <td class="ourMainTdOne">
16                    <a href="http://www.wherever.com"><img hspace="30" height="100" alt="silob" src="/includes/templates/classic/images/silob.gif" />                   
17                        <p class="ourMainParagraph">Whats New?</p></a>
18                </td>
19                <td class="ourMainTdTwo" rowspan="2">
20                    <a href="http://www.wherever.com"><img style="width: 202px; height: 136px;" src="http://www.veryprrettythings.com/includes/languages/english/images/turquoise clutch" alt="" />
21                    <img vspace="0" hspace="0" border="0" align="top" style="width: 202px; height: 150px;" src="http://www.veryprrettythings.com/includes/languages/english/images/red clutch" alt="" />
22                    <img style="width: 202px; height: 142px;" src="http://www.veryprrettythings.com/includes/languages/english/images/blue clutch" alt="" /></a>
23                </td>
24            </tr>
25            <tr class="ourMainTrThree">
26                <td class="ourMainTdThree">
27                    <<a href="http://www.wherever.com">img height="100" src="/includes/templates/classic/images/siloc.gif" alt="siloc" />
28                      <p class="ourMainParagraph">Sale Items!</p></a>
29                </td>
30            </tr>
31        </table>
32    </div> 

So we now have 32 lines versus 66 and can control all aspects through the stylesheet.

There may be a few typos but this should get you there with the exception of replacing the www.wherever.com with the proper link(s).