The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Using a Button Image to Refresh Page
rivera2419
post Dec 4 2019, 06:58 PM
Post #1





Group: Members
Posts: 5
Joined: 4-December 19
From: El Paso, TX
Member No.: 27,060



Hi,

I'm using the following to refresh a page on my website: <button onClick="window.location.reload();">Refresh Page</button>

The above obviously generates a "Refresh Page" button but I want to use a .png image as the button. Can anyone please advise me on how to accomplish this?

Thanks,
A newbie...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Dec 4 2019, 09:11 PM
Post #2


Programming Fanatic
********

Group: Members
Posts: 1,682
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



Just replace '<button>...</button>' with '<img>'. You will still need to use the 'onclick' event. Or, depending on the image size, you may use the .png as a background for the button.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
rivera2419
post Dec 4 2019, 10:58 PM
Post #3





Group: Members
Posts: 5
Joined: 4-December 19
From: El Paso, TX
Member No.: 27,060



QUOTE(CharlesEF @ Dec 4 2019, 09:11 PM) *

Just replace '<button>...</button>' with '<img>'. You will still need to use the 'onclick' event. Or, depending on the image size, you may use the .png as a background for the button.


Sorry for being so dense but I tried several iterations of the <img> tag and I can't get it to work. I know this is wrong: <img src="example.png">onClick="window.location.reload();"</img> Thanks...

This post has been edited by rivera2419: Dec 4 2019, 11:13 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Dec 5 2019, 02:47 AM
Post #4


WDG Member
********

Group: Root Admin
Posts: 8,317
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



Start with this:
<button onClick="window.location.reload();">Refresh Page</button

Then replace this content:
<button onClick="window.location.reload();">Refresh Page</button

With the image:
<button onClick="window.location.reload();"><img src="..." alt="..."></button
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
rivera2419
post Dec 5 2019, 10:27 AM
Post #5





Group: Members
Posts: 5
Joined: 4-December 19
From: El Paso, TX
Member No.: 27,060



QUOTE(Darin McGrew @ Dec 5 2019, 02:47 AM) *

Start with this:
<button onClick="window.location.reload();">Refresh Page</button

Then replace this content:
<button onClick="window.location.reload();">Refresh Page</button

With the image:
<button onClick="window.location.reload();"><img src="..." alt="..."></button


Thanks for the help Darin but I'm still having problems with the button. The code you provided works but it superimposes the .png image over the button that is generated by the original code - please refer to attachment.

This post has been edited by rivera2419: Dec 5 2019, 10:33 AM


Attached image(s)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
rivera2419
post Dec 5 2019, 12:41 PM
Post #6





Group: Members
Posts: 5
Joined: 4-December 19
From: El Paso, TX
Member No.: 27,060



Thanks for the replies!

I finally found the solution:

<a href="java script:location.reload(true)" ><img src="example.png"></a>

This post has been edited by rivera2419: Dec 5 2019, 12:43 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Dec 6 2019, 02:40 AM
Post #7


Programming Fanatic
********

Group: Members
Posts: 1,682
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



It may work, but not for the reason you think. If your page is HTML4 then the 'a' tag can contain an empty href. Clicking on it would result in a page reload, that is the default action. If your page is HTML5 then an empty href in invalid. You could use javascript, as your example shows (javascript is 1 word your code may not execute but the page will reload anyway) or you could just use the page name for the href.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 6 2019, 09:47 AM
Post #8


.
********

Group: WDG Moderators
Posts: 8,256
Joined: 10-August 06
Member No.: 7



QUOTE(CharlesEF @ Dec 6 2019, 08:40 AM) *

(javascript is 1 word your code may not execute

I recall the forum software adds a space between "java" and "script" when the (correctly spelled) "javascript" is followed by a colon, in order to prevent code injection (confusing I know).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 6 2019, 01:44 PM
Post #9


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,461
Joined: 9-August 06
Member No.: 6



Just to add to the mix... You actually don't need the A or the BUTTON. onclick can be attached to anything. This is enough.

HTML
<img src="..." width="..." height="..." alt="..." onClick="window.location.reload()">


If you want it to work without JS though you should use A as a fallback,.

CODE
<a href="#" onClick="window.location.reload();return false"><img src="..." width="..." height="..." alt="...">


But if you have the A part above you actually don't need the JS, so... tongue.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Dec 6 2019, 02:18 PM
Post #10


Programming Fanatic
********

Group: Members
Posts: 1,682
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



QUOTE(Christian J @ Dec 6 2019, 08:47 AM) *

QUOTE(CharlesEF @ Dec 6 2019, 08:40 AM) *

(javascript is 1 word your code may not execute

I recall the forum software adds a space between "java" and "script" when the (correctly spelled) "javascript" is followed by a colon, in order to prevent code injection (confusing I know).

For whatever reason I seem to forget that.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 12th December 2019 - 01:30 PM