Multiple Buttons change images in fixed area through html? |
Multiple Buttons change images in fixed area through html? |
Ruggero |
Sep 30 2018, 10:08 PM
Post
#1
|
Group: Members Posts: 4 Joined: 30-September 18 Member No.: 26,721 |
I'm trying to best approximate with html what is probably in done in Javascript. In the link there are pressable
buttons that change the image of the girl holding the white cards(but not the image position). Can this be done with html? In the link it's the blonde girl in black holding the cards and the buttons like 8x10 to the right. The buttons say 8x10, etc.... https://www.printful.com/custom/wall-art/po...?size=8%C3%9710 This is what I'm talking about below. The image changes with each different button(8x10, etc....) clicked but not the image positions. |
Darin McGrew |
Oct 1 2018, 12:17 AM
Post
#2
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
With HTML, you could have multiple pages, each displaying an inline image. Clicking on the "8x10" link would display the page that displays the image showing 8x10 stock. Clicking on the "10x10" link would display the page that displays the image showing the 10x10 stock. And so on.
|
Christian J |
Oct 1 2018, 05:15 AM
Post
#3
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
You could also generate each HTML page with a serverside script (e.g. PHP).
|
pandy |
Oct 1 2018, 07:03 AM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Or you could load the images (or pages with the image in question if you want to keep the links) in an IFRAME.
|
Ruggero |
Oct 1 2018, 08:47 AM
Post
#5
|
Group: Members Posts: 4 Joined: 30-September 18 Member No.: 26,721 |
Thanks Darin, Christian and Pandy. I'm trying to keep the same page on screen but just have the images replaced by each other as the different buttons are clicked. I may not understand all the solutions offered but I think the iframe might work as long as I can switch out images instead of webpages. This W3schools example iframe example could work as long as different side-by-side buttons pressed revealed different images in the iframe instead of webpages.
|
Ruggero |
Oct 1 2018, 09:00 AM
Post
#6
|
Group: Members Posts: 4 Joined: 30-September 18 Member No.: 26,721 |
Or maybe an iframe without a border just showing an image instead of a page, Like this borderless iframe w3schools but an image instead, and buttons that this example doesn't have.
The image below is the iframe within a page that just has an image but how would I get rid of the scroll at the bottom? It doesn't scroll because the iframe is the same dimension as the image but still shows a bar at the bottom. Below is the code I used. I thought the "border" css was supposed to remove the scroll bar. <iframe img src="https://jurassicgorilla.com/wp-content/uploads/2018/09/posters4.png" width="360" height="203" style="border:none;"></iframe> This post has been edited by Ruggero: Oct 1 2018, 09:21 AM |
Ruggero |
Oct 1 2018, 09:39 AM
Post
#7
|
Group: Members Posts: 4 Joined: 30-September 18 Member No.: 26,721 |
I got it to work without the scroll bar: <iframe img src="https://jurassicgorilla.com/wp-content/uploads/2018/09/posters4.png" overflow:scroll scrolling="no" frameborder="0" width="360" height="203" style="border:none;"></iframe>
I think it's the (scrolling="no") that did the trick. I'll have to check because I added (overflow:scroll) and (frameborder="0") which I have to experiment or research to find out what effect they have. |
Lo-Fi Version | Time is now: 18th April 2024 - 10:18 PM |