| View previous topic :: View next topic |
| Author |
Message |
Tomi 500+ Club

Joined: 26 Jun 2006 Posts: 809
|
|
| Back to top |
|
 |
|
|
Ash 1000+ Club

Joined: 03 Aug 2005 Posts: 1017 Location: England
|
|
| Back to top |
|
 |
johneva 500+ Club

Joined: 29 Oct 2005 Posts: 561 Location: Stafford, England
|
Posted: Wed Oct 04, 2006 12:39 pm Post subject: Re: Seen somthing intresting, how do i do it.... |
|
|
This can also be done with CSS and it works much better too.
I carnt find the tutorial I used to have on it for ya cos its not on this new computer but I will try and find it for ya. |
|
| Back to top |
|
 |
Tomi 500+ Club

Joined: 26 Jun 2006 Posts: 809
|
Posted: Wed Oct 04, 2006 5:20 pm Post subject: Re: Seen somthing intresting, how do i do it.... |
|
|
kool thanks guys them ones u found rnt realy what im looking for... espesialy the clone one lol ty anyway
could u look at the page source and find out what it is, i had a look but i had no idea what im looking for lol |
|
| Back to top |
|
 |
Tomi 500+ Club

Joined: 26 Jun 2006 Posts: 809
|
Posted: Sat Oct 07, 2006 12:43 pm Post subject: Re: Seen somthing intresting, how do i do it.... |
|
|
| anyone ? |
|
| Back to top |
|
 |
johneva 500+ Club

Joined: 29 Oct 2005 Posts: 561 Location: Stafford, England
|
Posted: Sat Oct 07, 2006 1:15 pm Post subject: Re: Seen somthing intresting, how do i do it.... |
|
|
In the site you have as an example they use Javascript but my Javascript skills are real sucky, cos I dont like using it really.
I will have another go at finding the way it was do with CSS for ya it is a much better way, problem is I carnt find were I seen it before.
EDIT
Here you go this is an example how it is done with CSS.
http://host.sonspring.com/hoverbox/ |
|
| Back to top |
|
 |
Tomi 500+ Club

Joined: 26 Jun 2006 Posts: 809
|
Posted: Sat Oct 07, 2006 6:42 pm Post subject: Re: Seen somthing intresting, how do i do it.... |
|
|
thank you so much mate, but im a complete css noob lol..
if i have a blank html document and i wanted 3x3 box of images (9 images) at say 50x50 pxls each and i wanted so that when somone hoverd over the image it would enlarge to say 100x100 what code would i use ?
I have downloaded the file on that website but am just stuck with what to do with it lol..
The simplest way i think we can do this is if i give you this and you show me what to do..
| Code: |
<html>
<body>
<table width="150" height="150" border="0">
<tr>
<td><img src="image1" Alt="image1" Width="50" Height="50"></th>
<td><img src="image2" Alt="image2" Width="50" Height="50"></th>
<td><img src="image3" Alt="image3" Width="50" Height="50"></th>
</tr>
<tr>
<td><img src="image4" Alt="image4" Width="50" Height="50"></td>
<td><img src="image5" Alt="image5" Width="50" Height="50"></td>
<td><img src="image6" Alt="image6" Width="50" Height="50"></td>
</tr>
<tr>
<td><img src="image7" Alt="image7" Width="50" Height="50"></td>
<td><img src="image8" Alt="image8" Width="50" Height="50"></td>
<td><img src="image9" Alt="image9" Width="50" Height="50"></td>
</tr>
</table>
</body>
</html>
|
Hope theres nothin wrong with what i jst wrote  |
|
| Back to top |
|
 |
johneva 500+ Club

Joined: 29 Oct 2005 Posts: 561 Location: Stafford, England
|
Posted: Sat Oct 07, 2006 7:01 pm Post subject: Re: Seen somthing intresting, how do i do it.... |
|
|
Aup
Right I am not sure if I have got time to alter it to your needs just yet but if I do get the time I will sort it out for ya.
You really dont know any CSS at all though do you?
That table code you have wrote out is totally useless for me as it does not use tables for layout, if you had looked at the code then you would have seen it is a list not a table. |
|
| Back to top |
|
 |
Ash 1000+ Club

Joined: 03 Aug 2005 Posts: 1017 Location: England
|
Posted: Sat Oct 07, 2006 7:11 pm Post subject: Re: Seen somthing intresting, how do i do it.... |
|
|
I know no CSS but I want the code. It's wrote in a .css file so how do i get to it?
Edit
nevermind i saw the link. |
|
| Back to top |
|
 |
Tomi 500+ Club

Joined: 26 Jun 2006 Posts: 809
|
Posted: Sat Oct 07, 2006 8:03 pm Post subject: Re: Seen somthing intresting, how do i do it.... |
|
|
no i dont know any css at all thats what i meant by saying im a total CSS noob.. lol i thourght that would be a logical way of doing it but obviusly not
I have just dont what i clearly should have done before and looked at the page source for the example you showed me so with the file i downloaded i upload that to my sever and link it to the page with this
| Code: |
<link rel="stylesheet" href='css/hoverbox.css' type="text/css" media="screen, projection" />
|
Then put whats in that page's source with my own images.
| Code: |
<ul class="hoverbox">
<li>
<a href="#"><img src="img/photo01.jpg" alt="description" /><img src="img/photo01.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo02.jpg" alt="description" /><img src="img/photo02.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo03.jpg" alt="description" /><img src="img/photo03.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo04.jpg" alt="description" /><img src="img/photo04.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo05.jpg" alt="description" /><img src="img/photo05.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo06.jpg" alt="description" /><img src="img/photo06.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo07.jpg" alt="description" /><img src="img/photo07.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo08.jpg" alt="description" /><img src="img/photo08.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo09.jpg" alt="description" /><img src="img/photo09.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo10.jpg" alt="description" /><img src="img/photo10.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo11.jpg" alt="description" /><img src="img/photo11.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo12.jpg" alt="description" /><img src="img/photo12.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo13.jpg" alt="description" /><img src="img/photo13.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo14.jpg" alt="description" /><img src="img/photo14.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo15.jpg" alt="description" /><img src="img/photo15.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo16.jpg" alt="description" /><img src="img/photo16.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo17.jpg" alt="description" /><img src="img/photo17.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo18.jpg" alt="description" /><img src="img/photo18.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo19.jpg" alt="description" /><img src="img/photo19.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="img/photo20.jpg" alt="description" /><img src="img/photo20.jpg" alt="description" class="preview" /></a>
</li>
</ul>
|
is this right ?
PS. Thanks for all help  |
|
| Back to top |
|
 |
Ash 1000+ Club

Joined: 03 Aug 2005 Posts: 1017 Location: England
|
Posted: Sat Oct 07, 2006 8:20 pm Post subject: Re: Seen somthing intresting, how do i do it.... |
|
|
Yes but with me I added the <a href bit so when you hover over and click it opens the image in full size.
| Code: |
<li>
<a href="img/[Carthage]Burrhus.jpg"><img src="img/[Carthage]Burrhus.jpg" alt="[Carthage]Burrhus" width="1024" height="768" /><img src="img/[Carthage]Burrhus.jpg" alt="[Carthage]Burrhus" class="preview" /></a></li> |
http://www.strategicwarfare.net/myscreenies/ |
|
| Back to top |
|
 |
|