Jump to content


Photo

Converting image to work as button *SOLVED*


  • Please log in to reply
17 replies to this topic

#1 ashrafzia

ashrafzia
  • Members
  • PipPipPip
  • Advanced Member
  • 45 posts

Posted 24 September 2006 - 05:39 PM

Can anyone help me that how to convert an image to work as button.
Actually my question involve different issues.
I am making an online examination system in which in the admin area i have images instead of buttons for good look.  Lets say i have an image Student Now when the student image (which will work as button) is clicked  i should be proceeded to the same page, with these different options.
Add Student
Delete Student
Edit Student
Update Student
Plz clarify me that in case of form buttons we make a hidden filed named let's say (h1) and then make its value to true and when that button is clicked, in the action of that form we provide the same file name, let's say student.php and then we have an isset() function and we check that either h1 form is submitted or other and then according to that form we write code.
So in case of images how can we handle such things.
I hope you get what i want to say  :-[
Thanx for any help in advance.

#2 AndyB

AndyB
  • Staff Alumni
  • Advanced Member
  • 5,465 posts
  • LocationToronto

Posted 24 September 2006 - 06:02 PM

I think your question is asking how can you detect when an image is clicked as a form submit.  If that's the case, then what's actually passed by the form are the x and y co-ordinates of the point clicked relative to the top left corner of the image. For example, with this code in a form that uses the post method:

<input type="submit" name="submit1" src="images/submit1.gif"/>

$_POST['submit1_x'] and $_POST['submit1_y'] will contain values when the submit1.gif image is clicked.
Legend has it that reading the manual never killed anyone.
My site

#3 Barand

Barand
  • Moderators
  • Sen . ( ile || sei )
  • 18,015 posts

Posted 24 September 2006 - 06:13 PM

or try

<input type="image" name="submit1" src="images/submit1.gif"/>
If you are still using mysql_ functions, STOP! Use mysqli_ or PDO. The longer you leave it the more you will have to rewrite.

Donations gratefully received






moon.png

|baaGrid| easy data tables - and more
|baaChart| easy line, column and pie charts

#4 ashrafzia

ashrafzia
  • Members
  • PipPipPip
  • Advanced Member
  • 45 posts

Posted 24 September 2006 - 06:17 PM

Yes that's exactly what i want , but i dont understand about the $_POST['submit1_x'] and $_POST['sumbit1_y'] . Will they contain information about the image X-axis and Y-axis values or something else ?
If you have worked with oscommerce, you can see that they have placed images instead of buttons . I want to create such thing.

#5 onlyican

onlyican
  • Members
  • PipPipPip
  • Advanced Member
  • 921 posts
  • LocationHants - UK

Posted 24 September 2006 - 06:20 PM

the submit_x and y will be the X and Y position of where about the mouse was clicked on that image

so if you click top left corner, X and Y will be 1, 1
(well close to, I doubt u get 1,1 but as an example)
Tell me the problem, I will try tell you the solution

#6 Daniel0

Daniel0
  • Staff Alumni
  • Advanced Member
  • 11,956 posts

Posted 24 September 2006 - 06:26 PM

I think your question is asking how can you detect when an image is clicked as a form submit.  If that's the case, then what's actually passed by the form are the x and y co-ordinates of the point clicked relative to the top left corner of the image. For example, with this code in a form that uses the post method:

<input type="submit" name="submit1" src="images/submit1.gif"/>

$_POST['submit1_x'] and $_POST['submit1_y'] will contain values when the submit1.gif image is clicked.


That do not work for me, but this does:
<button type="submit" name="submit1" style="border: 0px"><img src="images/submit1.gif" alt="button"></button>


#7 ashrafzia

ashrafzia
  • Members
  • PipPipPip
  • Advanced Member
  • 45 posts

Posted 24 September 2006 - 06:34 PM

That do not work for me, but this does:

<button type="submit" name="submit1" style="border: 0px"><img src="images/submit1.gif" alt="button"></button>


Done. THankyou very much. Its now working with your code.

#8 ashrafzia

ashrafzia
  • Members
  • PipPipPip
  • Advanced Member
  • 45 posts

Posted 24 September 2006 - 06:42 PM

Now Let's Make It a little complex : How can i make it a Rollover ?

#9 Daniel0

Daniel0
  • Staff Alumni
  • Advanced Member
  • 11,956 posts

Posted 24 September 2006 - 06:45 PM

Try this:
<button type="submit" name="submit1" style="border: 0px"><img src="images/submit1.gif" alt="button" onmouseover="this.src='images/submit1.gif'" onmouseout="this.src='images/submit2.gif'" ></button>


#10 onlyican

onlyican
  • Members
  • PipPipPip
  • Advanced Member
  • 921 posts
  • LocationHants - UK

Posted 24 September 2006 - 06:50 PM

or try

<input type="image" name="submit1" src="images/submit1.gif"/>


That one works
That is the only one
Tell me the problem, I will try tell you the solution

#11 Daniel0

Daniel0
  • Staff Alumni
  • Advanced Member
  • 11,956 posts

Posted 24 September 2006 - 06:51 PM

or try

<input type="image" name="submit1" src="images/submit1.gif"/>


That one works
That is the only one


Don't the one I showed work for you??

#12 ashrafzia

ashrafzia
  • Members
  • PipPipPip
  • Advanced Member
  • 45 posts

Posted 24 September 2006 - 06:58 PM

Try this:

<button type="submit" name="submit1" style="border: 0px"><img src="images/submit1.gif" alt="button" onmouseover="this.src='images/submit1.gif'" onmouseout="this.src='images/submit2.gif'" ></button>


Rollover  Isn't Working

#13 ashrafzia

ashrafzia
  • Members
  • PipPipPip
  • Advanced Member
  • 45 posts

Posted 24 September 2006 - 07:00 PM

Here's the coding:

<?
echo  "<form method=\"post\" action=\"mypage2.php\">
  <table width=\"200\" border=\"1\" align=\"center\">
    <tr>
      <td width=\"89\">Name : </td>
      <td width=\"95\">&nbsp;</td>
    </tr>
    <tr>
      <td>Age : </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td colspan=\"2\"><div align=\"center\">
//working fine    <button type=\"submit\" name=\"submit1\" style=\"border: 0px\"><img src=\"image012.gif\" alt=\"button\"></button>
//working fine        <input type=\"image\"  src=\"image012.gif\">
//rollover not working	<button type=\"submit\" name=\"submit1\" style=\"border: 0px\"><img src=\"image012.gif\" alt=\"button\" onmouseover=\"this.src='image012.gif'\" onmouseout=\"this.src='image002.gif'\" ></button>
      </div></td>
    </tr>
  </table>
</form>";

?>


#14 onlyican

onlyican
  • Members
  • PipPipPip
  • Advanced Member
  • 921 posts
  • LocationHants - UK

Posted 24 September 2006 - 07:02 PM

no
The only way to make a button an image is
<input type='image'' name='submit'..

Why make things more complex, the code is there ready made
and with that way
you can use
$_POST["submit_x"] and $_POST["submit_y"] for the X and Y position of the click
If you want
Tell me the problem, I will try tell you the solution

#15 Barand

Barand
  • Moderators
  • Sen . ( ile || sei )
  • 18,015 posts

Posted 24 September 2006 - 07:08 PM

The advantage of
<input type='image' src='image012.gif' name='student'>

is that (as has pointed out several times now) it post values in $_POST['student_x'].

You can use this to find out which of your buttons was clicked.

if (isset($_POST['student_x'])) {
    // student button was clicked
}
elseif (isset($_POST['other_x'])) {
    // other button was clicked
}

With Daniels code, the image tag contents are posted.
If you are still using mysql_ functions, STOP! Use mysqli_ or PDO. The longer you leave it the more you will have to rewrite.

Donations gratefully received






moon.png

|baaGrid| easy data tables - and more
|baaChart| easy line, column and pie charts

#16 ashrafzia

ashrafzia
  • Members
  • PipPipPip
  • Advanced Member
  • 45 posts

Posted 24 September 2006 - 07:19 PM

The advantage of
<input type='image' src='image012.gif' name='student'>

is that (as has pointed out several times now) it post values in $_POST['student_x'].

You can use this to find out which of your buttons was clicked.

if (isset($_POST['student_x'])) {
    // student button was clicked
}
elseif (isset($_POST['other_x'])) {
    // other button was clicked
}

With Daniels code, the image tag contents are posted.


Now things are cleared to me. Thats what i finally want. Once again thankyou very much for all of you.

#17 Barand

Barand
  • Moderators
  • Sen . ( ile || sei )
  • 18,015 posts

Posted 24 September 2006 - 07:23 PM

As for the rollover
<input type='image' name='student' src='image1.gif'
    onmouseover='this.src="image2.gif"'
    onmouseout='this.src="image1.gif"'>

If you are still using mysql_ functions, STOP! Use mysqli_ or PDO. The longer you leave it the more you will have to rewrite.

Donations gratefully received






moon.png

|baaGrid| easy data tables - and more
|baaChart| easy line, column and pie charts

#18 ashrafzia

ashrafzia
  • Members
  • PipPipPip
  • Advanced Member
  • 45 posts

Posted 25 September 2006 - 05:44 PM

As for the rollover

<input type='image' name='student' src='image1.gif'
    onmouseover='this.src="image2.gif"'
    onmouseout='this.src="image1.gif"'>


BINGO, ITS WORKING




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users