How to make image into a workable button - PHPBuilder Forums

How to make image into a workable button

andreingenx

i need to make this...

<IMG NAME="t3RG_29" SRC="images/t3RG_29.jpg" WIDTH=180 HEIGHT=50 BORDER=0>

into a workable button

NogDog

You can use the <button> tag:

<button type="submit" name="t3RG_29" style="background:transparent;border:none">
<img src="images/t3RG_29.jpg" width="180" height="50" alt="Submit">
</button>

andreingenx

Another issue with it is that the picture has a OVER/CLICK/OUT states, should i find the CLICK state and add the button through there

Let me explain how i did the graphic, i made the graphic using Imageready, then using Dreamweaver to place form items... now there are parts of the page that has STATES, like when a user moves the mouse over, or clicks, or out of the image...

Thats where i face the issue of having a button or a link some how

agulaid

andreingenx wrote:
Another issue with it is that the picture has a OVER/CLICK/OUT states, should i find the CLICK state and add the button through there

Let me explain how i did the graphic, i made the graphic using Imageready, then using Dreamweaver to place form items... now there are parts of the page that has STATES, like when a user moves the mouse over, or clicks, or out of the image...

Thats where i face the issue of having a button or a link some how

Hi What you have probably done is apply the css to a wrong tag. Please upload the full css and html code so i can have a look for you.

andreingenx

<HTML>
<HEAD>
<TITLE>t3RG</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

<SCRIPT LANGUAGE="JavaScript">
<!--

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments].src = changeImages.arguments[i+1];
}
}
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
t3RG_02_t3RG_03_over = newImage("images/t3RG_02-t3RG_03_over.jpg");
t3RG_03_over = newImage("images/t3RG_03-over.jpg");
t3RG_03_click = newImage("images/t3RG_03-click.jpg");
t3RG_04_t3RG_03_over = newImage("images/t3RG_04-t3RG_03_over.jpg");
t3RG_04_t3RG_03_click = newImage("images/t3RG_04-t3RG_03_click.jpg");
t3RG_05_t3RG_03_over = newImage("images/t3RG_05-t3RG_03_over.jpg");
t3RG_05_t3RG_03_click = newImage("images/t3RG_05-t3RG_03_click.jpg");
t3RG_28_t3RG_29_over = newImage("images/t3RG_28-t3RG_29_over.jpg");
t3RG_29_over = newImage("images/t3RG_29-over.jpg");
t3RG_29_click = newImage("images/t3RG_29-click.jpg");
t3RG_30_t3RG_29_over = newImage("images/t3RG_30-t3RG_29_over.jpg");
t3RG_31_t3RG_29_over = newImage("images/t3RG_31-t3RG_29_over.jpg");
t3RG_31_t3RG_29_click = newImage("images/t3RG_31-t3RG_29_click.jpg");
t3RG_34_t3RG_29_over = newImage("images/t3RG_34-t3RG_29_over.jpg");
t3RG_34_t3RG_29_click = newImage("images/t3RG_34-t3RG_29_click.jpg");
preloadFlag = true;
}
}

// -->
</SCRIPT>

<style type="text/css">

</style>
</HEAD>
<BODY BGCOLOR=#FFFFFF ONLOAD="preloadImages();">

<TABLE WIDTH=1000 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=302 HEIGHT=1></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=78 HEIGHT=1></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=30 HEIGHT=1></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=8 HEIGHT=1></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=74 HEIGHT=1></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=98 HEIGHT=1></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=39 HEIGHT=1></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=121 HEIGHT=1></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=30 HEIGHT=1></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=67 HEIGHT=1></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=46 HEIGHT=1></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=107 HEIGHT=1></TD>
<TD></TD>
</TR>
<TR>
<TD COLSPAN=12>
<IMG SRC="images/t3RG_01.jpg" WIDTH=1000 HEIGHT=52></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=52></TD>
</TR>
<TR>
<TD COLSPAN=8 ROWSPAN=2>
<IMG NAME="t3RG_02" SRC="images/t3RG_02.jpg" WIDTH=750 HEIGHT=98></TD>
<TD COLSPAN=2>
<A HREF="#"
ONMOUSEOVER="changeImages('t3RG_02', 'images/t3RG_02-t3RG_03_over.jpg', 't3RG_03', 'images/t3RG_03-over.jpg', 't3RG_04', 'images/t3RG_04-t3RG_03_over.jpg', 't3RG_05', 'images/t3RG_05-t3RG_03_over.jpg', 't3RG_29', 'images/t3RG_29.jpg', 't3RG_31', 'images/t3RG_31.jpg', 't3RG_34', 'images/t3RG_34.jpg'); return true;"
ONMOUSEOUT="changeImages('t3RG_02', 'images/t3RG_02.jpg', 't3RG_03', 'images/t3RG_03.jpg', 't3RG_04', 'images/t3RG_04.jpg', 't3RG_05', 'images/t3RG_05.jpg'); return true;"
ONCLICK="changeImages('t3RG_02', 'images/t3RG_02.jpg', 't3RG_03', 'images/t3RG_03-click.jpg', 't3RG_04', 'images/t3RG_04-t3RG_03_click.jpg', 't3RG_05', 'images/t3RG_05-t3RG_03_click.jpg');">
<IMG NAME="t3RG_03" SRC="images/t3RG_03.jpg" WIDTH=97 HEIGHT=48 BORDER=0></A></TD>
<TD COLSPAN=2 ROWSPAN=7>
<IMG NAME="t3RG_04" SRC="images/t3RG_04.jpg" WIDTH=153 HEIGHT=183></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=48></TD>
</TR>
<TR>
<TD COLSPAN=2>
<IMG NAME="t3RG_05" SRC="images/t3RG_05.jpg" WIDTH=97 HEIGHT=50></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=50></TD>
</TR>
<TR>
<TD ROWSPAN=15>
<IMG SRC="images/t3RG_06.jpg" WIDTH=302 HEIGHT=350></TD>
<TD COLSPAN=4 align="center" background="images/t3RG_07.jpg">
<input name="textfield" type="text"></TD>
<TD ROWSPAN=5>
<IMG SRC="images/t3RG_08.jpg" WIDTH=98 HEIGHT=85></TD>
<TD COLSPAN=3 align="center" background="images/t3RG_09.jpg"> <input name="textfield2" type="password"></TD>
<TD ROWSPAN=5>
<IMG SRC="images/t3RG_10.jpg" WIDTH=67 HEIGHT=85></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=30></TD>
</TR>
<TR>
<TD COLSPAN=4 ROWSPAN=2>
<IMG SRC="images/t3RG_11.jpg" WIDTH=190 HEIGHT=27></TD>
<TD COLSPAN=3>
<IMG SRC="images/t3RG_12.jpg" WIDTH=190 HEIGHT=5></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=5></TD>
</TR>
<TR>
<TD ROWSPAN=3>
<IMG SRC="images/t3RG_13.jpg" WIDTH=39 HEIGHT=50></TD>
<TD COLSPAN=2 ROWSPAN=2 align="center" valign="middle" background="images/t3RG_14.jpg"> <input type="text" name="textfield3"></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=22></TD>
</TR>
<TR>
<TD ROWSPAN=12>
<IMG SRC="images/t3RG_15.jpg" WIDTH=78 HEIGHT=293></TD>
<TD ROWSPAN=2 align="center" valign="bottom" background="images/t3RG_16.jpg">
<input type="checkbox" name="checkbox" value="checkbox"></TD>
<TD COLSPAN=2 ROWSPAN=2>
<IMG SRC="images/t3RG_17.jpg" WIDTH=82 HEIGHT=28></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=8></TD>
</TR>
<TR>
<TD COLSPAN=2>
<IMG SRC="images/t3RG_18.jpg" WIDTH=151 HEIGHT=20></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=20></TD>
</TR>
<TR>
<TD align="center" valign="bottom" background="images/t3RG_19.jpg"><input type="checkbox" name="checkbox2" value="checkbox"></TD>
<TD ROWSPAN=7>
<IMG SRC="images/t3RG_20.jpg" WIDTH=8 HEIGHT=188></TD>
<TD COLSPAN=7 ROWSPAN=5>
<IMG SRC="images/t3RG_21.jpg" WIDTH=475 HEIGHT=135></TD>
<TD ROWSPAN=10>
<IMG SRC="images/t3RG_22.jpg" WIDTH=107 HEIGHT=265></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=31></TD>
</TR>
<TR>
<TD align="center" valign="bottom" background="images/t3RG_23.jpg"><input type="checkbox" name="checkbox3" value="checkbox"></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=28></TD>
</TR>
<TR>
<TD align="center" valign="bottom" background="images/t3RG_24.jpg"><input type="checkbox" name="checkbox4" value="checkbox"></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=28></TD>
</TR>
<TR>
<TD align="center" valign="bottom" background="images/t3RG_25.jpg"><input type="checkbox" name="checkbox5" value="checkbox"></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=28></TD>
</TR>
<TR>
<TD ROWSPAN=2 align="center" valign="bottom" background="images/t3RG_26.jpg"><input type="checkbox" name="checkbox6" value="checkbox"></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=20></TD>
</TR>
<TR>
<TD COLSPAN=7 ROWSPAN=2>
<IMG SRC="images/t3RG_27.jpg" WIDTH=475 HEIGHT=53></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=8></TD>
</TR>
<TR>
<TD ROWSPAN=4>
<IMG NAME="t3RG_28" SRC="images/t3RG_28.jpg" WIDTH=30 HEIGHT=122></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=45></TD>
</TR>
<TR>
<TD COLSPAN=3 ROWSPAN=2>
<A HREF="#"
ONMOUSEOVER="changeImages('t3RG_03', 'images/t3RG_03.jpg', 't3RG_04', 'images/t3RG_04.jpg', 't3RG_05', 'images/t3RG_05.jpg', 't3RG_28', 'images/t3RG_28-t3RG_29_over.jpg', 't3RG_29', 'images/t3RG_29-over.jpg', 't3RG_30', 'images/t3RG_30-t3RG_29_over.jpg', 't3RG_31', 'images/t3RG_31-t3RG_29_over.jpg', 't3RG_34', 'images/t3RG_34-t3RG_29_over.jpg');
return true;"
ONMOUSEOUT="changeImages('t3RG_28', 'images/t3RG_28.jpg', 't3RG_29', 'images/t3RG_29.jpg', 't3RG_30', 'images/t3RG_30.jpg', 't3RG_31', 'images/t3RG_31.jpg', 't3RG_34', 'images/t3RG_34.jpg'); return true;"
ONCLICK="changeImages('t3RG_28', 'images/t3RG_28.jpg', 't3RG_29', 'images/t3RG_29-click.jpg', 't3RG_30', 'images/t3RG_30.jpg', 't3RG_31', 'images/t3RG_31-t3RG_29_click.jpg', 't3RG_34', 'images/t3RG_34-t3RG_29_click.jpg');">
<IMG NAME="t3RG_29" SRC="images/t3RG_29.jpg" WIDTH=180 HEIGHT=50 BORDER=0></A></TD>
<TD COLSPAN=5>
<IMG NAME="t3RG_30" SRC="images/t3RG_30.jpg" WIDTH=303 HEIGHT=2></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=2></TD>
</TR>
<TR>
<TD COLSPAN=2 ROWSPAN=2>
<IMG NAME="t3RG_31" SRC="images/t3RG_31.jpg" WIDTH=160 HEIGHT=75></TD>
<TD COLSPAN=2>
<IMG SRC="images/t3RG_32.jpg" WIDTH=97 HEIGHT=48></TD>
<TD ROWSPAN=2>
<IMG SRC="images/t3RG_33.jpg" WIDTH=46 HEIGHT=75></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=48></TD>
</TR>
<TR>
<TD COLSPAN=3>
<IMG NAME="t3RG_34" SRC="images/t3RG_34.jpg" WIDTH=180 HEIGHT=27></TD>
<TD COLSPAN=2>
<IMG SRC="images/t3RG_35.jpg" WIDTH=97 HEIGHT=27></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=27></TD>
</TR>
</TABLE>

</BODY>
</HTML>

THE ONLY THING IS IS THAT I THINK I SHOULD DO IS MAKE SOME KIND OF A LINK ON THE IMAGE ( <IMG NAME="t3RG_29" SRC="images/t3RG_29.jpg" WIDTH=180 HEIGHT=50 BORDER=0> ) SO THAT WHEN THEY CLICK IT IT SENDS THE INFORMATION TO THE DATABASE... ANOTHER ISSUE IS THAT I STILL WANT TO KEEP THE ORIGINAL STATES WHEN I WORKED ON THE IMAGE IN IMAGEREADY SO THAT THE STATES R NOT BOTHERED WHEN THEY GO OVER IT WITH THE MOUSE