Using a Button Image to Refresh Page |
Using a Button Image to Refresh Page |
rivera2419 |
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... |
CharlesEF |
Dec 4 2019, 09:11 PM
Post
#2
|
Programming Fanatic Group: Members Posts: 1,981 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.
|
rivera2419 |
Dec 4 2019, 10:58 PM
Post
#3
|
Group: Members Posts: 5 Joined: 4-December 19 From: El Paso, TX Member No.: 27,060 |
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 |
Darin McGrew |
Dec 5 2019, 02:47 AM
Post
#4
|
WDG Member Group: Root Admin Posts: 8,365 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 |
rivera2419 |
Dec 5 2019, 10:27 AM
Post
#5
|
Group: Members Posts: 5 Joined: 4-December 19 From: El Paso, TX Member No.: 27,060 |
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) |
rivera2419 |
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 |
CharlesEF |
Dec 6 2019, 02:40 AM
Post
#7
|
Programming Fanatic Group: Members Posts: 1,981 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.
|
Christian J |
Dec 6 2019, 09:47 AM
Post
#8
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
|
pandy |
Dec 6 2019, 01:44 PM
Post
#9
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 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... |
CharlesEF |
Dec 6 2019, 02:18 PM
Post
#10
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
(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. |
Lo-Fi Version | Time is now: 26th April 2024 - 09:05 AM |