Deprecated: Function set_magic_quotes_runtime() is deprecated in /usr/www/users/phun/forum/include/common.php on line 58

Warning: Cannot modify header information - headers already sent by (output started at /usr/www/users/phun/forum/include/common.php:58) in /usr/www/users/phun/forum/header.php on line 31

Warning: Cannot modify header information - headers already sent by (output started at /usr/www/users/phun/forum/include/common.php:58) in /usr/www/users/phun/forum/header.php on line 32

Warning: Cannot modify header information - headers already sent by (output started at /usr/www/users/phun/forum/include/common.php:58) in /usr/www/users/phun/forum/header.php on line 33

Warning: Cannot modify header information - headers already sent by (output started at /usr/www/users/phun/forum/include/common.php:58) in /usr/www/users/phun/forum/header.php on line 34
Phun - 2D physics sandbox - forum / Html / Javascript {Need help}

Phun - 2D physics sandbox - forum

Official Forum

You are not logged in.

#1 2009-08-03 08:56:42

Jelmerholland
Phun Master lvl. 38 and then some
From: In the middle of fckn nowhere
Registered: 2008-03-09
Posts: 1136

Html / Javascript {Need help}

I'm learning javascript, but for some reason i can't get this working.

I made a button, and when i click it, it has to change the button, to another button, so you get the clicking effect. But for some reason it doesn't work.

I don't know wich code i need.
This is what i have.

Code:

<html>
    <head>
        <script type = "text/javascript">
            function mouseclick()
            {
            document.getelementbyID("b1").src="information.jpg"
            }
            function mouseout()
            {
            document.getelementbyID("b1").src="informationclick.jpg"
            }
        </script>
    </head>
    <body bgcolor = green>
        <font color = white>
            <a href ="http://www.phunland.com/" onclick="mouseclick()" onmouseout="mouseout()">
                <img border ="0" alt="phunland.com" src="information.jpg" id="b1"/>
            </a>
        </font>
    </body>
</html>

Why doesn't it work?

I googled it, but i can't find a good tutorial for the clicking buttons.
please help

Offline

 

#2 2009-08-03 09:07:38

Physicsguy
Newtonator
From: A Life Sustainable Atmosphere
Registered: 2008-10-24
Posts: 914
Website

Re: Html / Javascript {Need help}

You want to make a button like the 'Submit' button below this message?  Or you want to have your own custom buttons?

Here's the code for a regular button like the Submit button.

Code:

<input type="button" name="button1" value="Click Me!" />

And to customize it you go to your CSS and type in this:

Code:

input {
  color:               #fffff;
  background:     #00000;
}

input:hover {
  color:              #fffff;
  background:    #2b2d2d;
}

OR try on your input button:

Code:

<input type="button" value="Click Me" name="button1' onclick="this.style.color='#000000'; this.style.backgroundColor = '#ffffff'" />

IDK, try it.  You're using Dreamweaver, aren't' you...  big_smile

But you want to when you click the button, go to a link, right?

SIMPLE!

Here:

Code:

<input type="button" onclick="window.open('http://www.phunland.com','_self');" value="Phunland!" />

Last edited by Physicsguy (2009-08-03 09:18:16)


http://i43.tinypic.com/zlp8b9.jpg << Magic Sig!    Click below to go to PGCode, my sub-site dedicated to all code!
http://tinyurl.com/ms5k47http://i26.tinypic.com/s6nfv4.jpg
^Click to level up my license!^

Offline

 

#3 2009-08-03 09:12:17

Mystery
#1 suck-up of 2009
From: Southern Australia
Registered: 2009-02-13
Posts: 947

Re: Html / Javascript {Need help}

It's also nice to have a slightly brighter mouse over effect but can you do that in HTML?


http://img5.imageshack.us/img5/5807/phunmysterysig.jpg
If this link misleads you its your own fault   Free Cookies!

Offline

 

#4 2009-08-03 09:15:58

Jelmerholland
Phun Master lvl. 38 and then some
From: In the middle of fckn nowhere
Registered: 2008-03-09
Posts: 1136

Re: Html / Javascript {Need help}

@physicsguy

I mean a button, that when you press it, it changes.... like all buttons, when you press it you see the clicking effect, the shadow changes, it's a animation, but how do u make this with your own made button?

I know it, you have to make 2 buttons, and then when you click it, it shows the 2nd button, but how do u do that?

I allready know what you ment, but that's not what i ment

Last edited by Jelmerholland (2009-08-03 09:17:20)

Offline

 

#5 2009-08-03 09:21:33

Physicsguy
Newtonator
From: A Life Sustainable Atmosphere
Registered: 2008-10-24
Posts: 914
Website

Re: Html / Javascript {Need help}

Oh okay I see now I'm on it AS I WRITE THIS

Wait, no... As I said before.

K. 

Just put this in the page.

Code:

<style type="text/css">
a.hoverboxbutton {
color: #ffffff:
background: #000000;
border: 1px solid #000000;
padding:  2px;
}
a.hoverboxbutton:hover {
color: #ffffff;
background: grey;
border: 1px solid #000000;
padding:  2px;
}
a.hoverboxbutton:active {
color: #000000;
background: #00FF00;
border: 1px solid #000000;
padding:  2px;
}
</style>

<a class="hoverboxbutton" href="http://www.phunland.com">
This is not a button, but it works in a similar manner.  Click it, and it goes to Phunland.com.
</a>

No JavaScript needed!  CSS is wonderful, if you know how to use it.

you might also want to try out my SETAC Website Generator.  Click the one in my sig!  Feel free to customize it to your heart's content, and what it outputs works!

Last edited by Physicsguy (2009-08-03 09:46:40)


http://i43.tinypic.com/zlp8b9.jpg << Magic Sig!    Click below to go to PGCode, my sub-site dedicated to all code!
http://tinyurl.com/ms5k47http://i26.tinypic.com/s6nfv4.jpg
^Click to level up my license!^

Offline

 

#6 2009-08-03 10:04:33

Jelmerholland
Phun Master lvl. 38 and then some
From: In the middle of fckn nowhere
Registered: 2008-03-09
Posts: 1136

Re: Html / Javascript {Need help}

This is not what i mean, I want javascript, and i want my own buttons, i made my own .jpg file. 2 of them, with both different shadows, so you get the pressed button effect... that's all i need.

Offline

 

#7 2009-08-03 11:51:32

Physicsguy
Newtonator
From: A Life Sustainable Atmosphere
Registered: 2008-10-24
Posts: 914
Website

Re: Html / Javascript {Need help}

OMG

PM me the images, I'll do it for you....  smile

Why do you need JavaScript?

Last edited by Physicsguy (2009-08-03 11:53:00)


http://i43.tinypic.com/zlp8b9.jpg << Magic Sig!    Click below to go to PGCode, my sub-site dedicated to all code!
http://tinyurl.com/ms5k47http://i26.tinypic.com/s6nfv4.jpg
^Click to level up my license!^

Offline

 

#8 2009-08-03 12:05:24

Rhett97
Post Addict
From: At Tako bell eating takoz
Registered: 2008-11-26
Posts: 711
Website

Re: Html / Javascript {Need help}

Do you mean where when you Click it it gives you the purple letters? or when you click it it make an image of like it pushed donw?


http://i484.photobucket.com/albums/rr204/Bronie12345/blueside640x480.jpg

Offline

 

#9 2009-08-03 12:46:56

Jelmerholland
Phun Master lvl. 38 and then some
From: In the middle of fckn nowhere
Registered: 2008-03-09
Posts: 1136

Re: Html / Javascript {Need help}

Physicsguy wrote:

OMG

PM me the images, I'll do it for you....  smile

Why do you need JavaScript?

Because i want to learn javascript, becuz i want to learn how to build sites

Offline

 

#10 2009-08-03 12:48:18

Jelmerholland
Phun Master lvl. 38 and then some
From: In the middle of fckn nowhere
Registered: 2008-03-09
Posts: 1136

Re: Html / Javascript {Need help}

Rhett97 wrote:

Do you mean where when you Click it it gives you the purple letters? or when you click it it make an image of like it pushed donw?

No, that's with link and vlink

the second one, that's true, i think we understand each other, like the default button function, but with my own images, i made a button, and i made the pressed button image, but i don't know how to use it

Offline

 

#11 2009-08-03 14:40:01

Physicsguy
Newtonator
From: A Life Sustainable Atmosphere
Registered: 2008-10-24
Posts: 914
Website

Re: Html / Javascript {Need help}

Oh I know what you mean.  But I'm saying you don't need JavaScript to accomplish what you want.


http://i43.tinypic.com/zlp8b9.jpg << Magic Sig!    Click below to go to PGCode, my sub-site dedicated to all code!
http://tinyurl.com/ms5k47http://i26.tinypic.com/s6nfv4.jpg
^Click to level up my license!^

Offline

 

#12 2009-08-03 14:55:30

Jelmerholland
Phun Master lvl. 38 and then some
From: In the middle of fckn nowhere
Registered: 2008-03-09
Posts: 1136

Re: Html / Javascript {Need help}

But i don't want css or whatever, i know it's possible with javascript, and that's what i want to learn, i want to focus on javascript, becuz i have a book with the basics of java in 20 steps, but this isn't in the book. and I really want to learn this in java

Offline

 

#13 2009-08-03 16:35:29

Physicsguy
Newtonator
From: A Life Sustainable Atmosphere
Registered: 2008-10-24
Posts: 914
Website

Re: Html / Javascript {Need help}

Well the first thing to learn is that Java and JavaScript are completely different things! It's like comparing golf with basketball.

Here, take a look at this:

http://www.w3schools.com/js/default.asp

All you need to know about the basics of JS.

Take a look at this:

http://dynamicdrive.com/

Lots of useful scripts are there.  That's how I learned anyway.

Do you know why this isn't in the book?  Here are my reasons I'm guessing.

- It can easily be accomplished with CSS
- It's too advanced for the basics of JavaSCRIPT

I'm not trying to be rude or anything, but you asked a question, and I gave an answer.  The answer works.  What you're trying to do it like using a tennis racket to play golf.  It would work, but just not as effectively.

But to point out somet things you should learn to make this thing you're making, take a look into these 3 terms:

OnMouseOver
OnMouseOut
OnClick

And using that, I found this:

http://www.w3schools.com/js/tryit.asp?f … _animation

You could incorporate an OnClick event into it, making your button you want! 

Thanks  smile

Editing that, I came up with this:

Code:

<script type="text/javascript">
function mouseOver()
{
document.getElementById("b1").src ="b_blue.gif";
}
function mouseOut()
{
document.getElementById("b1").src ="b_pink.gif";
}
function mouseClick()
{
document.getElementById("b1").src="http://www.lindysfurniture.com/content/images/exclamation.gif";
}
</script>
</head>

<body>
<a href="http://www.phunland.com" target="_blank">
<img alt="Visit W3Schools!" src="b_pink.gif" id="b1" width="26" height="26" onmouseover="mouseOver()" onmouseout="mouseOut()" onclick="mouseClick()" />
</a>

This is what you're looking for.

Last edited by Physicsguy (2009-08-03 16:50:56)


http://i43.tinypic.com/zlp8b9.jpg << Magic Sig!    Click below to go to PGCode, my sub-site dedicated to all code!
http://tinyurl.com/ms5k47http://i26.tinypic.com/s6nfv4.jpg
^Click to level up my license!^

Offline

 

#14 2009-08-03 17:58:56

Jelmerholland
Phun Master lvl. 38 and then some
From: In the middle of fckn nowhere
Registered: 2008-03-09
Posts: 1136

Re: Html / Javascript {Need help}

Code:

<html>
    <head>
        <script type="text/javascript">
function mouseOver()
{
document.getElementById("b1").src="informationover.jpg";
}
function mouseOut()
{
document.getElementById("b1").src="information.jpg";
}
function mouseclick()
{
document.getelementbyid("b1").src="informationclick.jpg";
}
        </script>
    </head>
    <body>
    <a href="http://www.phunland.com" target="_blank">
        <img border="0" alt="Test" src="information.jpg" id="b1" width="244" height="51" onmouseover ="mouseover()" onmouseout="mouseout()" onclick="mouseclick()"/>
    </a>
    </body>
</html>

this is what i have, but it doesn't work for some reason... don't know why :?

maybe i should just use the onmouseover, but i want the onclick event, but the img doesn't load, it keeps the default img. the information.jpg, but the informationover.jpg doesn't work either.


I have no clue why it doesn't work, i think i'm forgetting something.... but what?

tnx anyway

Offline

 

#15 2009-08-03 20:12:58

thebeech
Very Active Poster
From: stoke on trent, england
Registered: 2008-04-24
Posts: 367

Re: Html / Javascript {Need help}

u may be forgeting to upload the image? If yourtesting it on a site and not local.


http://i484.photobucket.com/albums/rr204/Bronie12345/blueside640x480.jpg

Offline

 

#16 2009-08-04 04:49:43

Jelmerholland
Phun Master lvl. 38 and then some
From: In the middle of fckn nowhere
Registered: 2008-03-09
Posts: 1136

Re: Html / Javascript {Need help}

The img works, i tested it with just a img under a href, but i don't know how to make a animation when you click it

Offline

 

#17 2009-08-04 07:22:41

link0007
Webz0rs Devz0rs
From: up yours
Registered: 2008-03-07
Posts: 3989
Website

Re: Html / Javascript {Need help}

I'd do it like this:

Code:

<html>
    <head>
        <script type="text/javascript">
            function mouseOver(subject)
            {
                // We have given the function a subject parameter. For the information button, the subject is information
                // But image we had multiple buttons, it would be pretty simple to just use these functions all the time
                // And just specify a different subject
                document.getElementById(subject + "Button").src = subject + "over.jpg";
            }
            function mouseOut(subject)
            {
                document.getElementById(subject + "Button").src = subject + ".jpg";
            }            
            function mouseClick(subject)
            {
                document.getElementById(subject + "Button").src = subject + "click.jpg";
            }        
        </script>
    </head>
    <body>
    <a href="http://www.phunland.com" target="_blank">
        <img border="0" alt="Test" src="information.jpg" id="informationButton" width="244" height="51" onmouseover="mouseOver('information')" onmouseout="mouseOut('information')" onclick="mouseClick('information')"/>
    </a>
    </body>
</html>

http://i16.photobucket.com/albums/b44/the_man11/LinkAangSignature.png
~signature by Wildcat
unofficial phun chat room!

Offline

 

#18 2009-08-04 08:27:39

Jelmerholland
Phun Master lvl. 38 and then some
From: In the middle of fckn nowhere
Registered: 2008-03-09
Posts: 1136

Re: Html / Javascript {Need help}

Nice, that works, i have no clue how you did it, but i'll figure it out... tnx

Now i'll try to make the tab bar, with 3 buttons next to each other...

Last edited by Jelmerholland (2009-08-04 08:28:17)

Offline

 

#19 2009-08-04 09:55:57

Jelmerholland
Phun Master lvl. 38 and then some
From: In the middle of fckn nowhere
Registered: 2008-03-09
Posts: 1136

Re: Html / Javascript {Need help}

Now i got this to work, but now i have another problem... for some reason it doesn't work, i know this should work but it doesn't work.

I have my main page called index.html, it devides the page by 2, (<frameset>), it works
I have the page information.html and the file cars.html and a file called main.html
Main.html has the buttons, when you click a button, it opens the file information.html or cars.html. but it opens in a new one. "_blank", when i change it to information, or information.html, it still opens in a blank page, but i want to change the lowest frame. so the navigation menu (main.html) is still there.

how do i solve this?

the files | Filefront

If you need more information, please tell me

Last edited by Jelmerholland (2009-08-04 10:02:33)

Offline

 

#20 2009-08-04 10:09:51

Versieon
Respected Member
From: FÜAM (Its a disease!)
Registered: 2009-03-17
Posts: 151

Re: Html / Javascript {Need help}

So basicly what you are saying is you want to open the information in a page other than the navagation page?

Why don't you just tell it to open in a new window?


Ah...so many pedestrians, so little time...

Offline

 

#21 2009-08-04 11:00:22

link0007
Webz0rs Devz0rs
From: up yours
Registered: 2008-03-07
Posts: 3989
Website

Re: Html / Javascript {Need help}

Then why did you assign target="_blank"?

But jelmer.. Ditch framesets/javascript buttons and get your ass out of the 90s. You say you want to learn html/javascript, probably knowing a lot of techniques are very outdated, but when we offer css alternatives, you ignore them :s

And honestly.. Framesets and javascript buttons are horrible and so outdated it isn't even funny anymore.


http://i16.photobucket.com/albums/b44/the_man11/LinkAangSignature.png
~signature by Wildcat
unofficial phun chat room!

Offline

 

#22 2009-08-04 11:08:58

Jelmerholland
Phun Master lvl. 38 and then some
From: In the middle of fckn nowhere
Registered: 2008-03-09
Posts: 1136

Re: Html / Javascript {Need help}

hmm... i thought sites where build with this technique... but css... is it harder? or easier? and do u have more functions?


And i didn't ignore css, i was just saying i wanted to learn javascript, but if it's outdated, why all sites are build with this??

Offline

 

#23 2009-08-04 11:36:48

Physicsguy
Newtonator
From: A Life Sustainable Atmosphere
Registered: 2008-10-24
Posts: 914
Website

Re: Html / Javascript {Need help}

link0007 wrote:

Then why did you assign target="_blank"?

But jelmer.. Ditch framesets/javascript buttons and get your ass out of the 90s. You say you want to learn html/javascript, probably knowing a lot of techniques are very outdated, but when we offer css alternatives, you ignore them :s

And honestly.. Framesets and javascript buttons are horrible and so outdated it isn't even funny anymore.

THANK YOU!!!!!!!!!

CSS is also very easy to learn, try it smile


http://i43.tinypic.com/zlp8b9.jpg << Magic Sig!    Click below to go to PGCode, my sub-site dedicated to all code!
http://tinyurl.com/ms5k47http://i26.tinypic.com/s6nfv4.jpg
^Click to level up my license!^

Offline

 

#24 2009-08-04 11:45:02

Jelmerholland
Phun Master lvl. 38 and then some
From: In the middle of fckn nowhere
Registered: 2008-03-09
Posts: 1136

Re: Html / Javascript {Need help}

Do u have a nice tutorial for me? with all the basics? I've got no clue what is basic, what's not

Offline

 

#25 2009-08-04 12:03:03

link0007
Webz0rs Devz0rs
From: up yours
Registered: 2008-03-07
Posts: 3989
Website

Re: Html / Javascript {Need help}

Jelmerholland wrote:

hmm... i thought sites where build with this technique... but css... is it harder? or easier? and do u have more functions?


And i didn't ignore css, i was just saying i wanted to learn javascript, but if it's outdated, why all sites are build with this??

Javascript is used for functionality like those pop-up images on phunbox, and other useful applications. But not for pushbuttons.

And for anything you desire: www.w3schools.com wink the best site ever, which explains everything there is to know about webdesign


http://i16.photobucket.com/albums/b44/the_man11/LinkAangSignature.png
~signature by Wildcat
unofficial phun chat room!

Offline

 

Board footer

Powered by PunBB
© Copyright 2002–2005 Rickard Andersson

Phun and Phunland.com is copyright of Algoryx