IPB

Welcome Guest ( Log In | Register )



Tags
This content has not been tagged yet
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
no avatar
Incest is a game the whole family can play.
Group Icon
Group: [MODERATOR]
Posts: 1,237
Joined: 11-February 05
From: Heaven
Member No.: 3,709
myCENT:76.61
Post #1 post Jul 21 2005, 04:44 PM
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?



Go to the top of the page
+Quote Post
Kubi
no avatar
To Cool for Cache
Group Icon
Group: [MODERATOR]
Posts: 1,135
Joined: 16-June 05
From: Some Place.
Member No.: 8,317
T17 GFX Crew
myCENT:13.80
Post #2 post Jul 21 2005, 05:30 PM
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
Go to the top of the page
+Quote Post
electriic ink
no avatar
Incest is a game the whole family can play.
Group Icon
Group: [MODERATOR]
Posts: 1,237
Joined: 11-February 05
From: Heaven
Member No.: 3,709
myCENT:76.61
Post #3 post Jul 21 2005, 05:39 PM
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.

[note=BuffaloHELP]Merged instead of deleting.[/note]
Go to the top of the page
+Quote Post
BuffaloHELP
no avatar
More than meets the eye
Group Icon
Group: Admin
Posts: 3,646
Joined: 23-April 05
From: Trap17 storage box
Member No.: 6,042
myCENT:90.30
Post #4 post Jul 21 2005, 06:52 PM
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?
Go to the top of the page
+Quote Post
electriic ink
no avatar
Incest is a game the whole family can play.
Group Icon
Group: [MODERATOR]
Posts: 1,237
Joined: 11-February 05
From: Heaven
Member No.: 3,709
myCENT:76.61
Post #5 post Jul 21 2005, 07:07 PM
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.
Go to the top of the page
+Quote Post
BuffaloHELP
no avatar
More than meets the eye
Group Icon
Group: Admin
Posts: 3,646
Joined: 23-April 05
From: Trap17 storage box
Member No.: 6,042
myCENT:90.30
Post #6 post Jul 21 2005, 07:12 PM
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.
[right][snapback]163886[/snapback][/right]

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.
Go to the top of the page
+Quote Post
badinfluence
no avatar
Super Member
*********
Group: Members
Posts: 283
Joined: 10-October 04
Member No.: 1,637
Post #7 post Jul 22 2005, 12: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
Go to the top of the page
+Quote Post
electriic ink
no avatar
Incest is a game the whole family can play.
Group Icon
Group: [MODERATOR]
Posts: 1,237
Joined: 11-February 05
From: Heaven
Member No.: 3,709
myCENT:76.61
Post #8 post Jul 22 2005, 06:27 AM
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
[right][snapback]163976[/snapback][/right]


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
Go to the top of the page
+Quote Post
sachavdk
no avatar
Member [Level 1]
****
Group: Members
Posts: 62
Joined: 11-July 05
Member No.: 9,266
Post #9 post Jul 25 2005, 06:10 PM
Why making it this difficult?

Simply:
CODE
<img src="img.jpg" onMouseOver="this.src='img2.jpg'" onMouseOut="this.src='img.jpg'">

I think thats way easier
Go to the top of the page
+Quote Post
Damann
no avatar
Advanced Member
*******
Group: Members
Posts: 121
Joined: 27-April 05
Member No.: 6,270
Post #10 post Jul 28 2005, 04:55 AM
wow i thought noone was going to post that, the way sachavdk posted works MUCH better
Go to the top of the page
+Quote Post
« Next Oldest · Tutorials · Next Newest »
 

2 Pages V   1 2 >
Reply to this topicStart new topic

Collapse

> Similar Topics

    Topic Title Replies Topic Starter Views Last Action
No New Posts   4 Echo_of_thunder 108 11th November 2008 - 04:05 PM
Last post by: Echo_of_thunder
No new   17 harad 1,126 3rd August 2004 - 11:40 PM
Last post by: MSTR
No New Posts   13 galexcd 848 14th August 2007 - 01:25 PM
Last post by: Galahad
No New Posts 9 psp-playstation 691 26th August 2004 - 02:06 PM
Last post by: redsky
No New Posts   3 frazmi 1,374 6th August 2006 - 02:20 AM
Last post by: FallenSage
No New Posts   3 Alpha 697 18th August 2004 - 11:40 AM
Last post by: odomike
No New Posts   10 ill 908 19th August 2004 - 01:29 PM
Last post by: odomike
No New Posts   2 Raptrex 280 21st August 2004 - 04:09 PM
Last post by: OpaQue
No New Posts   2 truman69 393 29th May 2006 - 10:14 AM
Last post by: Avalon
No New Posts   12 cragllo 929 25th August 2004 - 08:09 AM
Last post by: cragllo
No New Posts