HTML » Thumbnails
Horseland has blocked the pop up code so it's no longer possible to use this tutorial on horseland. I'm keeping it up though, as you might want to make pop ups on real life web sites. E-mail hl and ask them why they have bloked pup ups... :)
To make my hl site tidier, I've made a list with small pictures, and when you click on the link under it, a small window pops up.
Horse 1 Donkey Click for info |
Horse 2 Donkey Click for info |
Horse 3 Donkey Click for info |
The list is made by putting several code types together. It's put together sideways by a table, the small pictures are called thumbnails, and are regular images, and the pop up windows are created by inserting a special type of link. You have to upload the pop up windows to a site like freewebs, and it's regular web-pages. It's the link on the hl site that makes them small. Kind of like the imap layouts if you remember those. There are no short cuts, go thru ALL the steps!
The table
I have one cell for each horse. If you have too many horses to fit in one row, you can make one more. The code that goes on your hl page:
<table border="0 cellpadding="0" style="border-collapse:collapse" width="100% id="charttbl">
<tr>
<td> Horse 1 </td>
<td> Horse 2 </td>
<td> Horse 3 </td>
<td> Horse 4 </td>
</tr>
<tr>
<td> Horse 5 </td>
<td> Horse 6 </td>
<td> Horse 7 </td>
<td> Horse 8 </td>
</tr>
</table>
This will look like this:
| Horse 1 | Horse 2 | Horse 3 | Horse 4 |
| Horse 5 | Horse 6 | Horse 7 | Horse 8 |
The images
Now, I'll insert the small images I've made, inside the table. To make all the thumbnails have the same size, I've made an empty, small picture in PSP:
Then I copy the horse image into this small picture, and save it as a new picture (so the empty picture is kept blank, and can be used to make the next thumbnail too):
Horse1<br>
<img src="http://i3.photobucket.com/albums/y63/username/picturename.jpg"><br>
Click for info
Links
Ok, now, we want to make the text "click for info" into a link. The link type is rather long, and it's because you want the pop up window to be small, without any of the regular browser buttons. So replace the text you made (click for info) with this one:
<a href="http://www.address/horse.htm" onClick="crush=window.open('http://www.address/horse.htm','popup', 'toolbar=no, location=no, directories=no, statusbar=no,menubar=no, scrollbars=no, resizable=no, width=450, height=150, left=30, top=30'); return false;" alt="Info and bookings">Click for info</a>
Replace the address with your address. Remember, you have to make the web pages and upload them to freewebs for example.
Web-pages
The last thing to do is making the web page for each horse. You have to make one page for each horse. The web page code can look like this, and goes on your freewebs page:
<html>
<head>
<title>Horse name</title>
<link type="text/css" rel="stylesheet" href="Style.css">
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" width="100%" style="border-collapse:collapse">
<tr>
<td><img src="horse.jpg"> </td>
<td>
Name: <br>
Breed: <br>
Lines: <br>
Goal: <br>
Foals: <br>
Fee: <br>
Bookings:<br>
Open bookings:
</td>
<td>
Horse's name<br>
Horse's breed<br>
Horse's lines<br>
Horse's goal<br>
Amount of foals<br>
Stud fee<br>
Bookings that's made<br>
Open bookings
</td>
</tr>
</table>
</body>
</html>
Create a blank page in your freewebs account. If you don't have a freewebs (geocities or other free web sites), create your own account at freewebs (www.freewebs.com). It's completely safe and free.
When you sign up, it's wise to choose the HTML mode, and not the easy site builder mode. You will have to choose after you have chosen user name and password.
The code <img src="horse.jpg"> is the code that shows the small picture inside the pop up page. I've made these the same way as the thumbnails that I insert in the table.
The code: <link type="text/css" rel="stylesheet" href="Style.css"> is for an external style sheet. You can check the tutorial "css-external style sheets" if you want to know what it is. You might see that this link type differs from the link you would have to insert on your hl site, and that is because hl don't allow the type of code above, but freewebs does of course so you can use this one here. You make the sheet it self the same way though.
If you want to insert links to the persons who have made bookings, you can insert this type of link (replace "open bookings" with the name and link code)
<a href="http://www.horseland.com/vownersd.hl?id=ID_NUMBER_HERE" target="gamewindow">Person</a>That's all there is to it :)