Jump to content
xisto Community
Sign in to follow this  
Followers 0
electriic ink

How To: Change An Image When A User Clicks On It using both php and javascript

By electriic ink, in General Discussion

Recommended Posts

electriic ink    1

electriic ink
Posted

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...

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!

 

Create a php file. You can call it anything you like.

 

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

 

<!-- 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>

Put that code in your php file and save it and as long as the images are there you will have your changing images :(

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?

 

 


Share this post

Link to post
Share on other sites

Kubi    0

Kubi
Posted

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

Share this post

Link to post
Share on other sites

electriic ink    1

electriic ink
Posted

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.

Share this post

Link to post
Share on other sites

BuffaloHelp    24

BuffaloHelp
Posted

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?

Share this post

Link to post
Share on other sites

electriic ink    1

electriic ink
Posted

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.

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 ;) 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.

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

Right and it does.

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.

Share this post

Link to post
Share on other sites

BuffaloHelp    24

BuffaloHelp
Posted

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.

163886[/snapback]

I have DSL with Xisto 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 Xisto.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.

Share this post

Link to post
Share on other sites

badinfluence    0

badinfluence
Posted

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 ;)

Share this post

Link to post
Share on other sites

electriic ink    1

electriic ink
Posted

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 ;)

163976[/snapback]


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...

 

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

... To ....

 

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

Share this post

Link to post
Share on other sites

sachavdk    0

sachavdk
Posted

Why making it this difficult?

Simply:

<img src="img.jpg" onMouseOver="this.src='img2.jpg'" onMouseOut="this.src='img.jpg'">
I think thats way easier

Share this post

Link to post
Share on other sites

electriic ink    1

electriic ink
Posted

Why making it this difficult?

 

Simply:

<img src="img.jpg" onMouseOver="this.src='img2.jpg'" onMouseOut="this.src='img.jpg'">
I think thats way easier

165634[/snapback]


OK, so what happens when your images aren't found? Does a nice, red cross come up in ie or does the script abort itselft altogether? This script gives you an error message displaying exactly which files cannot be found so you can easily fix the problem, which becomes more and more useful as you add more and more images for the script to change.

 

You don't even have to understand the coding in this script in order to adjust it for your site, just change the first 6 variables at the beginning and copy and paste it and it works.

Share this post

Link to post
Share on other sites

mizako    0

mizako
Posted

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


Preloading the images with javascript will solve this issue. Just point your html page to a javascript page where the images are preloaded. once the user clicks the image will change inmediately. http://forums.xisto.com/no_longer_exists/
Check the navigation bar of the previous site. It is done with preloading.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
Followers 0
Go To Topic Listing
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept