Welcome Guest ( Log In | Register)



2 Pages V   1 2 >  
 Reply to this topicStart new topic
> How To: Change An Image When A User Clicks On It, using both php and javascript
electriic ink
post Jul 21 2005, 04:44 PM
Post #1


Incest is a game the whole family can play.
Group Icon

Group: [MODERATOR]
Posts: 1,205
Joined: 11-February 05
From: Heaven
Member No.: 3,709
How To: Change An Image When A User Clicks On It
using both php and javascript - a powerful combination

I have seen quite a few how tos offering a method of doing this but none of which resembled my method of making use of both php and javascript. This code is fairly repetitive and most of the functions are easy to pick-up if you haven't heard of them before.

Here it is...
  1. Create your two images. Call them anything you like, you'd just need to change their filenames in $imgano $imgayes. In fact with this script you can easily create more than one pair of two images, as many as you like!
  2. Create a php file. You can call it anything you like.
  3. Now for the coding. Very easy. Most of it is just variables. All FAQ for the code is remmed but feel free to ask if you don't understand smile.gif

    CODE

    <!-- DOCTYPE -->

    <html>
    <head>
     

       <!-- CHARSET ENCODING -->

    <?

    $url = "http://site.trap17.com/";              /* The homepage of your site */
    $i = "images/";                                         /* The directory where you store your images */

    $imgano = "1up.jpg";                /* What image to display when the mouse ISN'T down button a */
    $imgayes = "1down.jpg";         /* What image to display when the mouse IS down button a */

    $imgbno = "subx.jpg";               /* What image to display when the mouse ISN'T down button b */
    $imgbyes = "subj.jpg";               /* What image to display when the mouse IS down button b */

     /* Add more buttons or take them away at will. This will require editing further on */

    $notfound = "The following files could not be found: \n<br>\n<br>\n";   /* What header to display when one of  

                                                                                                                                 the
                                                                                                                                 images can't be found */

    if(!file_exists($i . $imgano)) {

    $filesnull = $filesnull . "<br>" . $url. $i . $imgano;

    }

    if(!file_exists($i . $imgayes)) {

    $filesnull = $filesnull . "<br>" . $url . $i . $imgayes;

    }

    if(!file_exists($i . $imgbno)) {

    $filesnull = $filesnull . "<br>" . $url. $i . $imgbno;

    }

    if(!file_exists($i . $imgbyes)) {

    $filesnull = $filesnull . "<br>" . $url. $i . $imgbyes;

    }

    if ($filesnull) {

    echo $notfound . $filesnull; exit;

    }

     /* Checks for missing images using fileexists(). Creates, displays $filesnull and $notfound and exits if
    images can't be found. This allows us to create our own customized 404 error messages */

         

    echo "

    <script language=\"javascript\" type=\"text/javascript\">

       function changeImage(nameofimg,urlofimg){

                   document.images[nameofimg].src=urlofimg;
    }

    </script> ";  /* BASIC javascript which changes the images */

    ?>

    <!-- BLA -->

    </head>

    <body>

    <!-- BLA -->

    <? /* Reopen php to write the images to change. Remove or add more if neccessary */

    echo "
    <a onMouseDown=\"changeImage('imga','" . $i . $imgayes . "')\" onMouseUp=\"changeImage('imga','" . $i . $imgano . "')\"> \n
    <img src=\"" . $i . $imgano . "\" alt=\"\" name=\"imga\"> \n
    </a> \n\n\n

    <a onMouseDown=\"changeImage('imgb','" . $i . $imgbyes . "')\" onMouseUp=\"changeImage('imgb','" . $i . $imgbno . "')\"> \n
    <img src=\"" . $i . $imgbno . "\" alt=\"\" name=\"imgb\"> \n
    </a> ";

    ?>

    </body>
    </html>

  4. Put that code in your php file and save it and as long as the images are there you will have your changing images smile.gif

If you want to see an example of this code, click here

So that's it. I'll understand if this gets deleted because of the tutorial like this but I'll just thought I'd share my knowledge.

Any questions/comments?




(list)

Go to the top of the page
 
+Quote Post
Kubi
post Jul 21 2005, 05:30 PM
Post #2


To Cool for Cache
Group Icon

Group: [MODERATOR]
Posts: 1,091
Joined: 16-June 05
From: Some Place.
Member No.: 8,317
T17 GFX Crew
Thanks for the tutorial. This is very interesting. But why doesn't it stay changed when you click it? You have to click and hold to keep it changed.

Gj

(list)

Go to the top of the page
 
+Quote Post
electriic ink
post Jul 21 2005, 05:39 PM
Post #3


Incest is a game the whole family can play.
Group Icon

Group: [MODERATOR]
Posts: 1,205
Joined: 11-February 05
From: Heaven
Member No.: 3,709
QUOTE(KuBi)
But why doesn't it stay changed when you click it? You have to click and hold to keep it changed.

Whoops! Misread your question. That's to create the effect that you're actually clicking the button, not just moving your mouse down.

Could a mod please delete my previous post, although it may answer a question for someone.

Notice from BuffaloHELP:
Merged instead of deleting.

(list)

Go to the top of the page
 
+Quote Post
BuffaloHELP
post Jul 21 2005, 06:52 PM
Post #4


Desperately seeking "any key" to continue...
Group Icon

Group: Admin
Posts: 3,434
Joined: 23-April 05
From: Trap17 storage box
Member No.: 6,042
I think tutorial that does not work yet should not be approved until it works as it should be.

I am looking at the site and nothing happens when I click on either images. And the link you provided at the end "Break the url to one of the images" says the following files cannot be found.

The image should be changed to something else when I click on it, is that right? Wait...it took about 4 minutes for the other picture to be downloaded. Should that take this long to download the second image?

(list)

Go to the top of the page
 
+Quote Post
electriic ink
post Jul 21 2005, 07:07 PM
Post #5


Incest is a game the whole family can play.
Group Icon

Group: [MODERATOR]
Posts: 1,205
Joined: 11-February 05
From: Heaven
Member No.: 3,709
QUOTE(BuffaloHELP @ Jul 21 2005, 07:52 PM)
I am looking at the site and nothing happens when I click on either images.


Wait for a few seconds give your browser time to load the image. The change onMouseDown is immediate, the loading isn't.

QUOTE
And the link you provided at the end "Break the url to one of the images" says the following files cannot be found.


That was the point of the link smile.gif so that the user could break the url to one of the images and test out the error that the script gives if one of the files cannot be found. I added that in so users could test the script.

QUOTE
The image should be changed to something else when I click on it, is that right?


Right and it does.

QUOTE
Wait...it took about 4 minutes for the other picture to be downloaded. Should that take this long to download the second image?


If you connection is slow and the image is big (one of them is only 1.5kb) then it will take time because it's has to load the image. I'm running on 56k with 8 other internet windows open and it only took about 0.5 seconds the first time.

(list)

Go to the top of the page
 
+Quote Post
BuffaloHELP
post Jul 21 2005, 07:12 PM
Post #6


Desperately seeking "any key" to continue...
Group Icon

Group: Admin
Posts: 3,434
Joined: 23-April 05
From: Trap17 storage box
Member No.: 6,042
QUOTE(cmatcmextra @ Jul 21 2005, 03:07 PM)
If you connection is slow and the image is big (one of them is only 1.5kb) then it will take time because it's has to load the image. I'm running on 56k with 8 other internet windows open and it only took about 0.5 seconds the first time.
*


I have DSL with TRAP17 server ping timed at 56ms. I don't think it's my connection issue. When I click on an image, the status bar displays "waiting for cmatcme.trap17.com...

And why does the address bar show trap17.cmat?fileid=1&accessid=0hunm7fcvng5dfglokmnbdsa17hgfvbmnjklopiurewqazx along side? Is it possible that you provided your secure link? Is that why it's taking some time to load? The link was provided by your sample link.

(list)

Go to the top of the page
 
+Quote Post
badinfluence
post Jul 22 2005, 12:55 AM
Post #7


Super Member
*********

Group: Members
Posts: 283
Joined: 10-October 04
Member No.: 1,637
umm yes it's working but where to use this.. it can be easily done in css with a few line if you only wanted to switch the two images or more. but at least it's working so nice work. 5/10 rating smile.gif

(list)

Go to the top of the page
 
+Quote Post
electriic ink
post Jul 22 2005, 06:27 AM
Post #8


Incest is a game the whole family can play.
Group Icon

Group: [MODERATOR]
Posts: 1,205
Joined: 11-February 05
From: Heaven
Member No.: 3,709
QUOTE(badinfluence @ Jul 22 2005, 01:55 AM)
umm yes it's working but where to use this.. it can be easily done in css with a few line if you only wanted to switch the two images or more. but at least it's working so nice work. 5/10 rating smile.gif
*



True and I could start about doing this, but with both javascript and php there are many ways you could set about customizing and alerting the script:

Change...

CODE
<a onMouseDown=\"changeImage('imga','" . $i . $imgayes . "')\" onMouseUp=\"changeImage('imga','" . $i . $imgano . "')\"> \n
<img src=\"" . $i . $imgano . "\" alt=\"\" name=\"imga\"> \n
</a>


... To ....

CODE
Click <a onMouseDown=\"changeImage('imga','" . $i . $imgayes . "')\" onMouseUp=\"changeImage('imga','" . $i . $imgano . "')\"> here </a> to change the image below <br> <br> \n

<img src=\"" . $i . $imgano . "\" alt=\"\" name=\"imga\"> \n


And you will be able to click on "here" to change the image to change the image rather than clicking on the actual image itself.

This script could be used on a navigation system on a website but you can adapt it and use it in many other places smile.gif