Flash Games
 FAQ   Search   Memberlist   Usergroups   Register  Profile   Log in to check your private messages   Log in 


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



 

Post new topic   Reply to topic  
   DEVPPL Forum Index -> HTML Forum
View previous topic :: View next topic  
Author Message
Tomi
500+ Club


Joined: 26 Jun 2006
Posts: 810

PostPosted: Tue Oct 03, 2006 11:13 pm    Post subject: Seen somthing intresting, how do i do it.... Reply with quote

http://iwek.x10hosting.com/nightscream/index.php?page=GraphGallery

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 Very Happy
Back to top
View user's profile Send private message Visit poster's website
Ash
1000+ Club


Joined: 03 Aug 2005
Posts: 1017
Location: England

PostPosted: Wed Oct 04, 2006 12:03 am    Post subject: Re: Seen somthing intresting, how do i do it.... Reply with quote

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
Back to top
View user's profile Send private message Send e-mail MSN Messenger
johneva
500+ Club


Joined: 29 Oct 2005
Posts: 561
Location: Stafford, England

PostPosted: Wed Oct 04, 2006 12:39 pm    Post subject: Re: Seen somthing intresting, how do i do it.... Reply with quote

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
View user's profile Send private message Send e-mail Visit poster's website MSN Messenger
Tomi
500+ Club


Joined: 26 Jun 2006
Posts: 810

PostPosted: Wed Oct 04, 2006 5:20 pm    Post subject: Re: Seen somthing intresting, how do i do it.... Reply with quote

kool thanks guys them ones u found rnt realy what im looking for... espesialy the clone one lol Razz ty anyway Smile

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 Rolling Eyes lol
Back to top
View user's profile Send private message Visit poster's website
Tomi
500+ Club


Joined: 26 Jun 2006
Posts: 810

PostPosted: Sat Oct 07, 2006 12:43 pm    Post subject: Re: Seen somthing intresting, how do i do it.... Reply with quote

anyone ?
Back to top
View user's profile Send private message Visit poster's website
johneva
500+ Club


Joined: 29 Oct 2005
Posts: 561
Location: Stafford, England

PostPosted: Sat Oct 07, 2006 1:15 pm    Post subject: Re: Seen somthing intresting, how do i do it.... Reply with quote

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
View user's profile Send private message Send e-mail Visit poster's website MSN Messenger
Tomi
500+ Club


Joined: 26 Jun 2006
Posts: 810

PostPosted: Sat Oct 07, 2006 6:42 pm    Post subject: Re: Seen somthing intresting, how do i do it.... Reply with quote

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 Neutral
Back to top
View user's profile Send private message Visit poster's website
johneva
500+ Club


Joined: 29 Oct 2005
Posts: 561
Location: Stafford, England

PostPosted: Sat Oct 07, 2006 7:01 pm    Post subject: Re: Seen somthing intresting, how do i do it.... Reply with quote

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
View user's profile Send private message Send e-mail Visit poster's website MSN Messenger
Ash
1000+ Club


Joined: 03 Aug 2005
Posts: 1017
Location: England

PostPosted: Sat Oct 07, 2006 7:11 pm    Post subject: Re: Seen somthing intresting, how do i do it.... Reply with quote

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
View user's profile Send private message Send e-mail MSN Messenger
Tomi
500+ Club


Joined: 26 Jun 2006
Posts: 810

PostPosted: Sat Oct 07, 2006 8:03 pm    Post subject: Re: Seen somthing intresting, how do i do it.... Reply with quote

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 Sad

I have just dont what i clearly should have done before and looked at the page source for the example you showed me Smile 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 Smile
Back to top
View user's profile Send private message Visit poster's website
Ash
1000+ Club


Joined: 03 Aug 2005
Posts: 1017
Location: England

PostPosted: Sat Oct 07, 2006 8:20 pm    Post subject: Re: Seen somthing intresting, how do i do it.... Reply with quote

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
View user's profile Send private message Send e-mail MSN Messenger
Display posts from previous:   
Post new topic   Reply to topic    DEVPPL Forum Index -> HTML Forum All times are GMT + 1 Hour
Page 1 of 1

 
 
Welcome to DEVPPL.com
You are not logged in, which means that you can't post in the forums.
Click here to Register

If you are a current member here on DEVPPL, please login below:

User: Pass:
Log me on automatically each visit:

 


Powered by phpBB © 2001, 2005 phpBB Group - Modified by DEVPPL

Flash Games - Sitemap