Jump to content

submit button image


yandoo
Go to solution Solved by yandoo,

Recommended Posts

Hiya just a quickie, 

 

I'm using php and trying to echo out a form. It works just fine but when I try and replace the submit button with an image, although the functionality of the form is working the image doesn't appear??? there's just a border around an empty image. 

 

 

This was what it was originally

<input type="submit" name="button" id="button" value="Add to Cart" />

And this is what I tried to change it to.

<input type="image" id="button" src"style/add_to_cart.jpg" alt="Add to Cart" />

Any ideas?? Could it be that I using php to echo out this form?

 

Thanks

Link to comment
Share on other sites

This is how you could do it, a quick and dirty way:

 

 

<input type="submit" name="submit" id="submit" style="background-image:url('path_to_image/add_to_cart.jpg')"/>

 

If you do it that way, then you'd probably also want to set the width and height of the button to match that of the dimensions of the image you're using, otherwise it won't display correctly.

 

Denno

Link to comment
Share on other sites

Thanks for your reply Denno. I've had to use more double quotes or `` sloped quotes rather than singles for the url path because the whole form is echoed in php. Doing it this way it doesn't work instead of the image the traditional submit button appears.

 

Is there a way to get not being able to use the single quotes? 

 

Thank you

<input type="submit" name="submit" id="submit" style="background-image:url("path_to_image/add_to_cart.jpg")"/>


<input type="submit" name="submit" id="submit" style="background-image:url(`path_to_image/add_to_cart.jpg`)"/>
Link to comment
Share on other sites

And this is what I tried to change it to.

<input type="image" id="button" src"style/add_to_cart.jpg" alt="Add to Cart" />

Any ideas?? Could it be that I using php to echo out this form?

 

Look closer at your "src" parameter - something is missing.

 

 

 

Thanks for your reply Denno. I've had to use more double quotes or `` sloped quotes rather than singles for the url path because the whole form is echoed in php. Doing it this way it doesn't work instead of the image the traditional submit button appears.

 

Is there a way to get not being able to use the single quotes? 

 

Thank you

<input type="submit" name="submit" id="submit" style="background-image:url("path_to_image/add_to_cart.jpg")"/>


<input type="submit" name="submit" id="submit" style="background-image:url(`path_to_image/add_to_cart.jpg`)"/>

 

You need to learn how to work with either type of quote in any context. It shouldn't matter if the output is done inside or outside of an echo statement. I assume you are echoing the string within an echo that is defined using single quotes. There are multiple options to do what you were trying above (even though you can stick with your first attempt after correcting the src parameter). Here is one solution

 

//Escape the single quotes inside the string
echo '<input type="submit" name="submit" id="submit" style="background-image:url(\'path_to_image/add_to_cart.jpg\')"/>';
Link to comment
Share on other sites

  • Solution

Thank you for your reply but i tried that too and it still didn't work either. 

 

Here's how I just fixed it:

 

css

.button {
background:url(style/add_to_cart.jpg);
width:90px;
height:25px;
border:0px;
} 
'<input type="submit" value="" name="button" id="button" class="button" />';

Thank you for your replies and input. 

 

:)

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

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.