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
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
/* 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 */
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?
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 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.
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.
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
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
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:
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://users.kaski-net.net/~erasmus/ Check the navigation bar of the previous site. It is done with preloading.
JavaScript is very handy at making forms, allowing for much more customization and easier ways to
send data. So making Login forms using JavaScript may seem to many to be a very feasable idea.
However, JavaScript is very bad at protecting Passwords, as since the passwords are not encypted and
the whole JavaScript code is in the page, a person could just view the Page Source and find out
everything. Even if you use an external JavaScript, it would still be poor as the file name for the
external JavaScript would still be revealed. But I have an answer! There is a relative....
The quickest way to get a password protection system up and running is to use a Prompt box in
JavaScript that has a title like "Enter your Email Address". Only you and the relevant users know
what the password should be, could even be one each, that can be sorted out at the next page then
pass the "input" directly through the url by changing the .href, like
http://www.iSource.net.nz/users/?leTmeIn= The page that then processes this should also check for
the referring page, and three fails from an IP if you like the php (the next page): CODE //
processdownloads.p....
There have been several recent request for methods to restrict access to various pages on a web-site
based on User Permissions in sites that have a Login System in place. Here is some code showing one
method to restrict access by providing a sub-set of your site's links based on the User's
permissions. In this demonstration, I have defined a string for each 'level of user'
determining which set(s) of links they can view on your site. Normal MySql procedure would be to
read the User's permission level from a record in the database. For the purpose of ....
Ok, I will teach you how to create a simple HTML editor that runs online with buttons that add HTML
tags. Before we start: You should have basic knowledge of these languages. HTML/XHTML
Javascript PHP You will need Ability to use filesystem functions. Chmodding abilities
Features of Editor Online PHP safe Full HTML support A Few Bad Features Can only create new
documents or overwrite Fairly unsafe Now we are ready to begin. The PHP Script This will be
our PHP script that we will use to make the file. Make a file called save.php Here is the....
Background Image Changer Script To swap the background image from your CSS file according to the
Server Clock Time. 1.) In your CSS file, add the following rule: CODE body { background:
url(time.png); } 2.) Create a "folder" named time.png. 3.) Into the folder, place three images
named morning.png, day.png, night.png. 4.) Also, in the same folder, create an index.php file and
copy/paste the following script. CODE $hour = date('H'); if ($hour $image =
"morning.png"; } elseif ($hour $image = "day.png"; } else { $image = "night.pn....
In case you haven't noticed, I have a different Avatar display on the Forum each time the page
is refreshed. /biggrin.gif" style="vertical-align:middle" emoid=":D" border="0" alt="biggrin.gif"
/> For those of you who might want the script to do that, here is the one I am using: HTML
$filesp = glob('*.png'); if(empty($filesp)){ echo 'no images found...die br >';
die(); } else{ foreach ($filesp as $file) { $img_array = trim($file); } } shuffle($img_array);
//select image at random header("C o n t e n t{dash}t y p e: image/png"); // replace th....
It kind of amazes me that there's not even a mention of the Mootools javascript library
throughout this whole forum. So here I'll do a brief introduction and a tutorial on how to
produce the famous accordion effect. MooTools is a compact, modular, Object-Oriented javascript
framework designed to make writing extensible and compatible code easier and faster. MooTools lets
you get the job done efficiently and effectively. It is slightly based on the powerful Prototype
javascript framework , of which Scriptaculous runs on. (But frankly, I dislike Scriptaculou....
In this tutorial I will show you how to create two buttons in the bottom left of the screen that,
when hovered over, will scroll the page. Now to start with, we must create a our buttons, the first
line will create a div element, or block. Using blocks you can position items anywhere on a page.
We use the ID property just to let us know what the block is used for, as for the first block, its
obvious that it contains the vertical buttons and the second two blocks contains the horizontal
buttons. The style property of the div tag tells the browser how to draw it, in the....
Hey! Maybe you've seen my other tutorials...or my signature.. Anyways I'm going to show you
how to make a system so users of your site could register accounts and you could have protected -
user only - pages on your site /smile.gif" style="vertical-align:middle" emoid=":)" border="0"
alt="smile.gif" /> Ok, so we start by creating a config.php file. CODE $dbhost =
'database host'; $dbname = 'database name'; $dbusername = 'database
username'; $dbuserpass = 'database password'; mysql_connec....
This tutorial will show you how to make a basic math CAPTCHA validtion form. This requires that you
have the GD library for PHP installed to work. This tutorial requires 2 files, login.php and
action.php. The first step is to create a sub-folder to store the temporary images, for the
purposes of this tutorial,this folder should be called images. Now upload a image in there called
verify.php and chmod just that image(not the folder) to 777 so that image can change as our
functions generate new images. Ok, after you've done that, we can get to the code: in login.p....
OK, I recently had the need to create a PHP CAPTCHA system for a friend, and I am sharing this as a
tutorial with the good people here at Trap17. I am sure you have all seen a CAPTCHA before (although
you may not have known what it was called). They are the little codes you often have to enter when
you register with a site, to make sure you are a person and not an automated script. Some common
examples look something like this: My system doesn't really do anything as fancy, but I
think that it is slightly more readable that some of those that get generated. Every....
like in the topic, here is a description how to change the Backgroundcolor "On The Fly", by klicking
on a button or radio-box first, we ned the html-and body-tags, create a new html-file on your
desktop and write the following: QUOTE browser interpretation: html - tag
means "hey, browser, here comes HTML" in the body-tag you define the looking of your site. you can
add things like "bgcolor" for the background, "text" for the textcolor and link / alink / hlink /
vlink to define the linkcolor ( ) the scripttag is the tag, we'll need now (sorr....
As reported in another posting , there is an Image Gallery named Hoverbox from the Sonspring site
which is a pretty cool display method using CSS to have Thumbnail pictures double their size by
hovering over them. I liked the css included in the original Tutorial as found on the Sonspring
site , but I knew there was more than one use for the Hoverbox and took it upon myself to explore
the use of the Hoverbox on a site I webmaster. One thing that wasn't right was having to
hardcode the image tags, so the first version I wrote used php to fill the Hoverbox by rea....
Place this code between and tags. CODE function makevisible(cur,which){
strength=(which==0)? 1 : 0.2 if (cur.style.MozOpacity) cur.style.MozOpacity=strength else if
(cur.filters) cur.filters.alpha.opacity=strength*100 } // --> Place the following code within
all of the image tags you'd like the effect to be applied. CODE
style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)"
onMouseout="makevisible(this,1)" And your image tag might look like that. CODE
"yourimage.gif" in last code change to your ....
hi, today im going to give you small tutorial how to use `Prototype JavaScript Framework` 1st you
have to download `Prototype JavaScript Framework`library from http://prototype.conio.net/
prototype makes easy to using Javascript, ex : when you want to point (get) the element from HTML
usually we use : CODE document.getElementById('elementId') with prototype we use
CODE $('elementId') , yeah...world getting small..with prototype. example we`re going
to get value from an element of CODE with prototype we use CODE alert(....
Image Shack Mod For Invision Power Board ''These instructions will help you to install
'ImageShack on your Site' into the reply, quick-reply, and post-new-thread sections of your
Invision Power Board, thus giving your visitors the ability to upload images directly. After upload,
they may paste the images directly into their post box.'' CODE These instructions will
help you to install 'ImageShack on your Site' into the reply, quick-reply, and
post-new-thread sections of your Invision Power Board, thus giving your visitors the ability ....
I downloaded Microsoft's Visual Studio Express suite a few months ago, but only recently got
around to installing it. I have been practising with Visual Basic and making some rather basic
programs and utilities, but they contain most of the basic concepts. This tutorial will explain how
to create a basic image viewer, and I will try to explain each step from beginning to end as clear
as I can. To start you will need: Microsoft Visual Studio About 10-20 minutes free time OK,
first open up the Visual Basic part of the Studio. I am using the 2005 Express version, so....
Tool Tip Tutorial Example Found Here . Please review before continuing. Nice. And no
javascript at all to be found. The colours I have used are for demonstration purposes only to show
you that they are adjustable to suit the background or to contrast against them. Your choice. That
is a styling issue. It is your site, you decide. The original author's idea was to add
position:relative to the link, in order to allow the span element inside to position absolutely
in respect to the parent link. This code has been tested in Ie5.5, IE6, Opera7.11 and M....
/tongue.gif' border='0' style='vertical-align:middle' alt='tongue.gif' /> Some common things to
implement in our webpage very frequently are as follows. How to implement all these I am going to
tell you in this tutorial. Add To Favorite Set As Homepage Go To Top Of Page No Right Click
Print Page Adding Current Date Adding Current Time Pop-Up Page Creation Closing Window
Copyright Notice Updation 01. Add To Favorite Someone may be interested in the content of your
page. Offer him/her to add the page in his/her favorite menu. To do this you have ....
Here's a quick summary of how one can configure OS X for use in public labs running Panther
(10.3). It should also work with Tiger (10.4) but I dunno. There may be better ways, but this is
quick and cheap: 1. Install OS X fresh, or boot up your new Mac, and set the username to
MacAdmin or the like. This is now the administrator account which users should never touch.
Share this password only with trusted admins authorized to muck with critical systems. 2.
Install all the software you expect anyone to need in the default folders (usually Applicat....
Those of you that don't know what is meant by 'hotlinking', it is when someone directly
links to an image on your site so it will display on their site. This is what is called
'bandwidth theft' and being as accounts here have a limit on bandwidth, your bandwidth limit
could be exceeded by someone else hotlinking to your images. As most users of cPanel will know,
there is an option to disable hotlinking of images in the "Site Management Tools" section.
However, this disables hotlinking to all directories, what if you only want to disable hotlinki....
Hopefully someone will find this useful. Ive done this on my machine as well. To a hide an account
to display on the welcome screen of xp here is a nifty way: 1. Open regedit 2. Browse to
Hkey_local_machine> software>microsoft>windows nt>winlogon>special Accounts>Userlist Here you will
see a list of all accounts on XP which are hidden and dont display on welcome screen. Yes XP does
create useless accounts as you see there. 3. Go on the right pane, right click, create a new dword
value with its name as the exact username you want to hide and its value as "0" without t....
Tutorial: Image Rollovers w/ Javascript, by Rob J. Secord, B.Sc. (SystemWisdom) See a
working Sample of this Script! Download a ZIP containing all working files in this tutorial!
Note: If you are not interested in reading this entire tutorial and/or have a basic understanding of
the underlying concepts, you may safely skip to the Implementation section to get the code!
Description : A Dynamic Image Rollover Script tested to work in 4 major internet browsers: MSIE,
FireFox, Netscape and Opera. Using only Javascript combined with regular HTML Images ( ....
This tutorial is meant for people that are dealing with problems while coding their site at 100% of
width. Important notice: Some people has JavaScript disabled, so they will not be able to load CSS
file (take this in account when creating your website). How this script works. In the HEAD of your
HTML document will apply this command, so variable.js file will be load at start: CODE
In browser JavaScript file variable.js is loaded. This Javascript file consist of this parameters,
copy this code and name it variable.js CODE // JavaScript Document if (sc....
First of all, I am NOT a programmer, this is something my friend taught me. It describes basic
interaction with the user, while showing basic functionality of this simple programm. So, without
further ado, we're off to the tutorial: First of all, start your visual basic, when prompted
for new project, select Standard Exe . Next, we need to open code window, so we can start typing
the program. This can be done in two ways, one is double clicking on the form, or selecting Code
from View menu. If you double clicked on the form, you will see following text: CODE ....
Javascript in action can render some very neat visual effects, which can make your website more
appealing, and sometimes even easier to navigate. Among the most common effects are the
'button' effect, and the mouseover effect. The buttons are very common, of course; if
nowhere else, most of us have seen them at the end of forms (Click the 'submit' button to
proceed...). The basic idea is to have a 'depressible' object, which can give you the
illusion that you're 'pressing' it when you click it. The rollover effect causes
something to h....
Tutorial: Image Preloader with Progress Bar, by Rob J. Secord, B.Sc. (SystemWisdom)
Description : A Tutorial for a Client-Side Image Preloader with Dynamic Real-Time Progress Bar
Indicator written in JavaScript! Tested to work with 4 Major Internet Browsers: Firefox, MSIE,
Netscape, Opera (Complete sample solution provided at end of tutorial, just put it on your
web-server, add your images and go!) Intended Audience : Beginner to Intermediate Web
Developers. Although this tutorial will cover some advanced aspects of JavaScript, I will try to
explain it all ....
This tutorial will teach you the basics of making abstract images in 3D studio max. In this example,
I used a simple sphere, and applied the “Noise” modifier. Then, I applied a transparent, blue,
plastic-like material to spice up the whole thing. Let’s start. First, make a sphere by selecting
the “Sphere” button in the “Standard Primitives” section, and draw somewhere in the center of the
perspective view. We will set the size of the sphere later on. The sphere I made looks like this,
yours can be different in size and color, but the only thing that is important is to....
Well, in this tut, I'll show you how to do an simple link counter, with only one count for each
IP and the date when the link were clicked. Just remember, this is only one way to do it. First,
create an mysql database called 'links', with 2 table: first table will be called
'links', with the columns: id, title, ref and clicks. The other one will be 3 columns and
will be called links_info: id, ip and date. Just remember that the columns 'id' of this
second table IS NOT auto-increment. Here is the code of the file which will count the clicks, ....
Looking for change, image, user, clicks, php, javascript
CODE
