Seen somthing intresting, how do i do it....

by **Tomi** on Tue Oct 03, 2006 10:13 pm

http://iwek.x10hosting.com/nightscream/ ... aphGallery

hover over one of the square image on that page and you will see what i mean... any ideas on how its done? i realy like it

by **Ash** on Tue Oct 03, 2006 11:03 pm

Thats javascript. So I went hunting on how it's done and found these:

Not quite what you looking for but it's a start
http://javascriptsource.com/image-effects/enlarge-image-2.html

http://javascript.internet.com/image-effects/image-clone.html

by **johneva** on Wed Oct 04, 2006 11:39 am

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.

by **Tomi** on Wed Oct 04, 2006 4:20 pm

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 :roll:

lol

by **Tomi** on Sat Oct 07, 2006 11:43 am

anyone ?

by **johneva** on Sat Oct 07, 2006 12:15 pm

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/

by **Tomi** on Sat Oct 07, 2006 5:42 pm

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: Select all: <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

by **johneva** on Sat Oct 07, 2006 6:01 pm

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.

by **Ash** on Sat Oct 07, 2006 6:11 pm

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.

by **Tomi** on Sat Oct 07, 2006 7:03 pm

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: Select all: <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: Select all: <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

Seen somthing intresting, how do i do it....

Seen somthing intresting, how do i do it....

Who is online