13 Replies - 1887 Views - Last Post: 06 November 2011 - 08:34 PM

#1 designjunxion  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 06-November 11

Help: Wordpress submit button image replacement (hover)

Posted 06 November 2011 - 03:22 PM

Hey guys, I'm pulling my hair out over here. I hope you can help. It would be much appreciated.

I'm customizing a wordpress theme and have an email capture form plugin (WP Email Capture) with name-email-submit button. The form is very basic and I am changing the submit button to an image rollover button. I am working with MAMP on a local host to view instead of being live.

I could be going about this all wrong because I'm a bit of a newb.

My problem:

The rollover and the button works but I have this damn border around the button an it is driving me crazy! I can't get rid of the border. Also, The button shows up like it can't find the image. Why is this happening? When I remover the src="my image" it show the text "submit" and the border. What do I need to do here? lol

<label class="wp-email-capture-name">Name:</label> <input name="wp-email-capture-name" size="42" type="text" class="wp-email-capture-name"><br/>

	<label class="wp-email-capture-email">Email:</label> <input name="wp-email-capture-email" size="42" type="text" class="wp-email-capture-email"><br/>

	<input type="hidden" name="wp_capture_action" value="1">

<input name="input" type="image" height="37" width="115" src="subscribebtn.jpg"  class="wp-email-capture-submit" font-size="0" line-height="0" border="0" value="" >

</form>


#wp_email_capture {
	
}
 
#wp_email_capture label {
	text-decoration: none;
	border:none;
}
 
#wp_email_capture input {
 	margin: 15px 0 0 0;
	line-height: 15px;
	text-decoration: none;
	border:none;
	
}
 
#wp_email_capture_2 {
 
}
 
#wp_email_capture_2 label {
 
}
 
#wp_email_capture_2 input {
 
}

input[type=image] { 
	height: 37px;
	width: 115px;
	background-image:url(../../plugins/wp-email-capture/inc/subscribebtn.jpg);
	text-decoration: none;
	border:0;
	display: block;
	text-indent: -999em;
 }
input:hover[type=image] { 
	height: 37px;
	width: 115px;
	background-image:url(../../plugins/wp-email-capture/inc/subscribebtnon.jpg); 
	text-decoration: none;
	border:0;
	display: block;
	text-indent: -999em;
}


This is the result
Posted Image


This is what is looks like when I remover the src="myimage" from the html
Posted Image


Any help would be amazing. Thanks in advance!

Is This A Good Question/Topic? 0
  • +

Replies To: Help: Wordpress submit button image replacement (hover)

#2 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3719
  • View blog
  • Posts: 5,990
  • Joined: 08-June 10

Re: Help: Wordpress submit button image replacement (hover)

Posted 06 November 2011 - 04:05 PM

Hey.

The problem there is that the image you are liking to in the src attribute of your image input is invalid. The browser can't find it so it either displays a broken-link icon and/or shows the "alt" text (or "value" in the case of text inputs) instead.

You need to have a valid image in there to avoid this, but at the same time you can't really put an image there or it will cover the background image, making your :hover style invisible.

A simple solution is to put an invisible image in the src tag. That way you avoid the error icon but the background remains visible. A one pixel, transparent PNG or GIF is enough. Just set the desired width and height in the CSS so it won't collapse on you.


Another popular method involves using Javascript to change the value of the "src" attribute.
Was This Post Helpful? 0
  • +
  • -

#3 designjunxion  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 06-November 11

Re: Help: Wordpress submit button image replacement (hover)

Posted 06 November 2011 - 04:13 PM

Thank you for the reply!

I knew it was acting as if it was a broken image link but i don't understand why? It is linked properly. Is it because I am working locally for some reason? I'm confused. If I change the image to what you mentioned, wouldn't it still show as a broken link?

Thanks again!
Was This Post Helpful? 0
  • +
  • -

#4 designjunxion  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 06-November 11

Re: Help: Wordpress submit button image replacement (hover)

Posted 06 November 2011 - 04:19 PM

Yeah I just using a transparent 1pixel image for the src but it still shows as a broken link. The file path is correct but it still displays broken.

Whne I veiw the page locally in firefox it actually displays perfectly with no broken image link but in chrome and safari it shows as broken.
Was This Post Helpful? 0
  • +
  • -

#5 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3719
  • View blog
  • Posts: 5,990
  • Joined: 08-June 10

Re: Help: Wordpress submit button image replacement (hover)

Posted 06 November 2011 - 04:32 PM

OK, I see. That's odd.

Could you post the exact location where the image is stored, what the "src" is pointing to, and what URL is showing in the address bar of the browser?
Was This Post Helpful? 1
  • +
  • -

#6 designjunxion  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 06-November 11

Re: Help: Wordpress submit button image replacement (hover)

Posted 06 November 2011 - 05:04 PM

I opened inspect elements in chrome on the page in question and it shows the image link as broken. My other images are linked fine but the src for the submit button image shows this /subscribebtn.jpg while working image links look like this http://localhost:888...es/rule_lrg.png

Do you think i need to type out info for the broken submit button? I didn't have to do that for my other images. They are linked exactly link the submit button is in my code.
Was This Post Helpful? 0
  • +
  • -

#7 designjunxion  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 06-November 11

Re: Help: Wordpress submit button image replacement (hover)

Posted 06 November 2011 - 05:11 PM

this is what is in the address bar for the submit button http://localhost:8888/subscribebtn.jpg

I'm going to try and link it with the full file path
Was This Post Helpful? 0
  • +
  • -

#8 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3719
  • View blog
  • Posts: 5,990
  • Joined: 08-June 10

Re: Help: Wordpress submit button image replacement (hover)

Posted 06 November 2011 - 05:20 PM

Does your src attribute say: src="/subscribebtn.jpg"?

If you include the leading /, the server will request it as http: //host/subscribebtn.jpg. However if you don't include it, the server will request http:// host/current/path/sibscribebtn.jpg. This is assuming the page you are viewing is in the http: //host/current/path directory.
Was This Post Helpful? 0
  • +
  • -

#9 designjunxion  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 06-November 11

Re: Help: Wordpress submit button image replacement (hover)

Posted 06 November 2011 - 05:27 PM

If I remember correctly I tried it both ways. I am currently loading the site files live at a different location so it will be viewable. I will try adding the / when it is completed. For now it doesn't have a /
Was This Post Helpful? 0
  • +
  • -

#10 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: Help: Wordpress submit button image replacement (hover)

Posted 06 November 2011 - 06:54 PM

Why don't you set no value for the button, put a class on the button, then set a width and height for it and a background-image for it. Then when someone hovers of the button use :hover and change the background-image? Personally I would use CSS3 for this type of thing (There are many problems that arise from that though, but I believe in graceful degradation).
Was This Post Helpful? 0
  • +
  • -

#11 designjunxion  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 06-November 11

Re: Help: Wordpress submit button image replacement (hover)

Posted 06 November 2011 - 07:03 PM

unbelievable. I got it to work by typing out the FULL LOOOONG file path. WOW, I have been trying to figure this out for 2 days!! Thanks so much for the help!!
Was This Post Helpful? 0
  • +
  • -

#12 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3719
  • View blog
  • Posts: 5,990
  • Joined: 08-June 10

Re: Help: Wordpress submit button image replacement (hover)

Posted 06 November 2011 - 07:55 PM

Glad you got it working! :)

@EnvXOwner
That is basically what he was doing. The problem is that if the src image is invalid some browsers show a broken-link icon even if there is no value. And if it is valid it covers the background image so it's pointless to change it on :hover. Unless, that is, if the image is transparent.
Was This Post Helpful? 0
  • +
  • -

#13 designjunxion  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 06-November 11

Re: Help: Wordpress submit button image replacement (hover)

Posted 06 November 2011 - 07:57 PM

Exactly! Thanks again for the input! That was driving me nuts! haha.

Cheers!
Was This Post Helpful? 0
  • +
  • -

#14 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: Help: Wordpress submit button image replacement (hover)

Posted 06 November 2011 - 08:34 PM

View PostAtli, on 06 November 2011 - 09:55 PM, said:

Glad you got it working! :)

@EnvXOwner
That is basically what he was doing. The problem is that if the src image is invalid some browsers show a broken-link icon even if there is no value. And if it is valid it covers the background image so it's pointless to change it on :hover. Unless, that is, if the image is transparent.

Ah, I've never seen it done that way. I guess we learn something new everyday :D
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1